body {
  margin: 0px;
  padding: 0px;
}
#container {
  display: flex;
  width: 96vw;
  height: auto;
  font-family: "Muli", "Helvetica Neue", Helvetica, Arial, sans-serif;

  border: 1px solid transparent;

  flex-direction: column;
  z-index: 2;
}
h1 {
  color: rgb(109, 72, 72);
  text-align: center;
  font-family: "Lucida";
}
h2 {
  color: rgb(109, 72, 72);
  font-family: "Lucida";
  font-weight: normal;
  text-align: center;
}
h3 {
  color: indianred;
  text-align: center;
}
h5 {
  text-align: center;
  color: lightslategray;
  line-height: 18px;
}
p {
  color: lightslategray;
  font-family: "Gill Sans Extrabold", sans-serif;
  text-align: center;
  line-height: 18px;
}
.midimg {
  width: 100%;
}
/* -------location div */
#firstdiv {
  border: 1px solid transparent;
  display: flex;
  width: 100%;
  height: 3%;
  position: relative;
}
#firstdiv > div {
  border: 1px solid transparent;
  width: 30%;
  height: 100%;
  margin: auto;
  padding: 1px;
}
#profile {
  display: flex;
  justify-content: center;
  gap: 12px;
}
#profile > div {
  border: 1px solid transparent;
  width: 35px;
  height: 100%;
}
#imglogo {
  border: 1px solid transparent;
  margin: auto;
  width: 30%;
  height: 98%;
}
#imglogo > img {
  width: 100%;
  height: 100%;
}
#cart {
  display: flex;
  justify-content: center;
}
#cart > div {
  border: 1px solid transparent;
  width: 35px;
  font-size: 15px;
}
select {
  border: 0;
}
/* ------------shopping div------------- */

/* #seconddiv {
  border: 1px solid transparent;
  display: flex;
  width: 100%;
  height: 3%;
  margin: auto;
  text-align: center;
  position: relative;
}
/* ul {
  display: flex;
  gap: 15px;
  justify-content: center;

  font-size: 13px;
  list-style-type: none;
  font-weight: bold;
  margin-left: 2%;
} */
a {
  text-decoration-line: none;
  color: darkslategray;
}
*/

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.prev,
.next,
.dot {
  opacity: 0;
}
.slideshow-container:hover .dot,
.slideshow-container:hover .prev,
.slideshow-container:hover .next {
  opacity: 1;
}
/* The dots/bullets/indicators */
.navigationDots {
  z-index: 999;
  display: flex;
  justify-content: center;
}

.dot {
  cursor: pointer;
  height: 5px;
  width: 5px;
  margin: 0 4px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid white;
  display: inline-block;
  transition: background-color 0.6s ease;
  z-index: 999;
  transform: translateY(-50px);
}
.mySlides img {
  width: 98vw;
}

.active,
.dot:hover {
  background-color: white;
  display: block;
}
#thirddiv {
  display: flex;
  border: 1px solid transparent;
  width: 100%;

  padding: 1px;
}
.thirddiv {
  color: #604b3b;
  font-family: serif;
  background-color: whitesmoke;
}
.thirddiv > h1 {
  text-align: center;
}
.thirddiv > p {
  text-align: center;
  font-size: 20px;

  /*--------------- FORTHDIV */
}
.fourthdiv {
  display: flex;
  border: 1px solid transparent;
  width: 98%;
  height: 400px;
  padding: 10px;
  justify-content: center;

  background-color: whitesmoke;
}
.fourthdiv > div {
  border: 1px solid transparent;
  width: 250px;
  height: 100%;

  color: brown;
  text-align: center;
}
.fourthdiv > div > img {
  width: 80%;
}
.fourthdiv > div > p {
  color: #b8afa9;
}
/* ----------FIGTHDIV */

.fifthdiv {
  display: flex;

  gap: 50px;
  width: 98%;
  height: 550px;
  padding: 1%;
  border: 1px solid transparent;
  justify-content: center;
}
.fifthdiv > div {
  border: 1px solid transparent;
  text-align: center;
  width: 30%;
}
.fifthdiv > div > img {
  width: 100%;

  /* ---------------------sixthdiv */
}
.sixthdiv {
  display: flex;

  gap: 50px;
  width: 98%;
  height: 250px;
  padding: 1%;
  border: 1px solid transparent;
  justify-content: center;
}
.sixthdiv > div {
  display: flex;
  border: 1px solid transparent;
  text-align: center;
  width: 30%;
  padding: 1px;
  gap: 15px;
}
.sixthdiv > div > div {
  border: 1px solid transparent;
  text-align: center;
  width: 35%;
  height: 90%;
  line-height: 10px;
  font-size: 15px;
}
.sixthdiv > div > div > img {
  width: 100%;
}
/* seventhdiv-------------------------- */

.seventhdiv {
  display: grid;
  background-color: whitesmoke;
  margin-top: 25px;
  width: 98%;
  height: 850px;
  padding: 2%;
  border: 1px solid transparent;
  justify-content: space-around;
  color: #7d7faa;

  grid-template-areas:
    "a1 a1 a1 a1 a1 a1"
    "a2 a2 a2 a2 a2 a2"
    "a3 a4 a5 a6 a7 a8";
}
.seventhdiv > div:nth-child(1) {
  grid-area: a1;
  border: 1px solid transparent;
  width: 100%;
  height: 100px;
  margin: auto;
}
.seventhdiv > div:nth-child(2) {
  grid-area: a2;
  border: 1px solid transparent;
  width: 50%;
  height: 100px;
  margin: auto;
}
.seventhdiv > div:nth-child(3) {
  grid-area: a3;
  border: 1px solid transparent;
  width: 50%;
  height: 250px;
  margin-top: 210px;
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-left: 25%;
}
.seventhdiv > div:nth-child(3) > div {
  margin-top: 25px;
  border-radius: 5px;
}
.bigimg {
  border: 1px solid transparent;
  width: 100%;
  height: 100%;
  margin: auto;
}
.bigimg > div {
  border: 1px solid transparent;
  width: 98vw;
  height: 90%;
}
.video {
  width: 100%;
  height: 550px;
  padding: 5px;
}
.video > div {
  border: 1px solid;
  width: 80%;
  height: 55%;
  margin: auto;
}
.footcontainer {
  width: 97vw;
  height: 670px;
  border: 1px solid;
  background-image: url("https://www.colourbox.com/preview/6273218-vintage-floral-seamless-pattern-on-brown.jpg");
  padding: 5px;
}
.footcontainer > h5 {
  margin-top: 5px;
  color: white;
  text-align: center;
}
.footcontainer > p {
  margin-top: 5px;
  color: rgb(214, 194, 183);
  text-align: center;
}
#tablecontent {
  display: grid;
  border: 1px solid black;
  width: 95%;
  height: 550px;
  background-color: whitesmoke;
  margin: auto;
  padding: 2px;
  grid-template-areas: "a00 a11 a22 a33" "a44 a44 a44 a44";
}
#tablecontent > div:nth-child(1) {
  grid-area: a00;
  border-left: 1px solid darkgray;
  width: 90%;
  height: 250px;
  border-radius: 5px;
}
#tablecontent > div:nth-child(2) {
  grid: a11;
  border-left: 1px solid darkgray;
  width: 90%;
  height: 250px;
  border-radius: 5px;
}

#tablecontent > div:nth-child(3) {
  grid-area: a22;
  border-left: 1px solid darkgray;
  width: 90%;
  height: 250px;
  border-radius: 5px;
}

#tablecontent > div:nth-child(4) {
  grid-area: a33;
  border-left: 1px solid darkgray;
  width: 90%;
  height: 250px;
  border-radius: 5px;
}
#tablecontent > div > li {
  margin-left: 15px;
  font-size: 15px;
  list-style-type: none;
  line-height: 25px;
}
a {
  text-decoration-line: none;
  color: darkslategray;
}
#tablecontent > div > h4 {
  margin-left: 15px;

  margin-top: 10px;
}
#tablecontent > div:nth-child(5) {
  grid-area: a44;
  border-left: 1px solid darkgray;
  border-top: 1px solid darkgray;
  width: 100%;
  height: 100px;
  border-radius: 5px;
  margin-top: 0px;
  display: flex;
  flex-direction: row;
  padding: 3px;
  gap: 10px;
}
#tablecontent > div:nth-child(5) > div {
  border-right: 1px solid darkgray;
  width: 29%;

  color: rgb(72, 54, 10);
  font-weight: lighter;
}

.sociallogo > p {
  margin-top: 2px;
  text-align: left;
}
.sociallogo > div {
  border: 1px solid transparent;
  width: 15%;
  height: 40%;

  display: inline-flex;
}
.soclogo {
  width: 50%;
}

.applogo {
  width: 170%;
}
.copyright {
  width: 100%;

  color: sienna;
  font-size: 15px;
  margin-left: 140%;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
  #container {
    display: flex;
    width: 99%;
    height: auto;
    font-family: "Muli", "Helvetica Neue", Helvetica, Arial, sans-serif;
    max-width: min-content;
    border: 1px solid transparent;
    padding: 5px;
  }
  h1 {
    color: rgb(109, 72, 72);
    text-align: center;
    font-family: "Lucida";
  }
  h2 {
    color: rgb(109, 72, 72);
    font-family: "Lucida";
    font-weight: normal;
    text-align: center;
  }
  h3 {
    color: indianred;
    text-align: center;
  }
  h5 {
    text-align: center;
    color: lightslategray;
    line-height: 13px;
  }
  p {
    color: lightslategray;
    font-family: "Gill Sans Extrabold", sans-serif;
    text-align: center;
  }
  .midimg {
    width: 100%;
  }
  /* -------location div */
  #firstdiv {
    border: 1px solid transparent;
    display: flex;
    width: auto;
    height: 3%;
    position: relative;
  }
  #firstdiv > div {
    border: 1px solid transparent;
    width: auto;
    height: 100%;
    margin: auto;
    padding: 1px;
  }
  #profile {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  #profile > div {
    border: 1px solid transparent;
    width: 35px;
    height: 100%;
  }
  #imglogo {
    border: 1px solid transparent;
    margin: auto;
    width: auto;
    height: 98%;
  }
  #imglogo > img {
    width: 100%;
    height: 100%;
  }
  #cart {
    display: flex;
    justify-content: center;
  }
  #cart > div {
    border: 1px solid transparent;
    width: 35px;
    font-size: 15px;
  }
  select {
    border: 0;
  }
  /* ------------shopping div------------- */

  #seconddiv {
    border: 1px solid transparent;
    display: flex;
    width: 100%;
    height: 3%;
    margin: auto;
    text-align: center;
    position: relative;
  }
  ul {
    display: flex;
    gap: 15px;
    justify-content: center;

    font-size: 13px;
    list-style-type: none;
    font-weight: bold;
    margin-left: 10%;
  }
  a {
    text-decoration-line: none;
    color: darkslategray;
  }

  /* Slideshow container */
  .slideshow-container {
    position: relative;
    margin: auto;
  }

  /* Hide the images by default */
  .mySlides {
    display: none;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  .prev,
  .next,
  .dot {
    opacity: 0;
  }
  .slideshow-container:hover .dot,
  .slideshow-container:hover .prev,
  .slideshow-container:hover .next {
    opacity: 1;
  }
  /* The dots/bullets/indicators */
  .navigationDots {
    z-index: 999;
    display: flex;
    justify-content: center;
  }

  .dot {
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin: 0 4px;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid white;
    display: inline-block;
    transition: background-color 0.6s ease;
    z-index: 999;
    transform: translateY(-50px);
  }
  .mySlides img {
    width: 100%;
  }

  .active,
  .dot:hover {
    background-color: white;
    display: block;
  }
  #thirddiv {
    display: flex;
    border: 1px solid transparent;
    width: 100%;

    padding: 1px;
  }
  .thirddiv {
    color: #604b3b;
    font-family: serif;
    background-color: whitesmoke;
  }
  .thirddiv > h1 {
    text-align: center;
  }
  .thirddiv > p {
    text-align: center;
    font-size: 20px;

    /*--------------- FORTHDIV */
  }
  .fourthdiv {
    display: flex;
    border: 1px solid transparent;
    width: 98%;
    height: 400px;
    padding: 10px;
    justify-content: center;

    background-color: whitesmoke;
  }
  .fourthdiv > div {
    border: 1px solid transparent;
    width: 250px;
    height: 100%;

    color: brown;
    text-align: center;
  }
  .fourthdiv > div > img {
    width: 80%;
  }
  .fourthdiv > div > p {
    color: #b8afa9;
  }
  /* ----------FIGTHDIV */

  .fifthdiv {
    display: flex;

    gap: 50px;
    width: 98%;
    height: 550px;
    padding: 1%;
    border: 1px solid transparent;
    justify-content: center;
  }
  .fifthdiv > div {
    border: 1px solid transparent;
    text-align: center;
    width: 30%;
  }
  .fifthdiv > div > img {
    width: 100%;

    /* ---------------------sixthdiv */
  }
  .sixthdiv {
    display: flex;

    gap: 50px;
    width: 98%;
    height: 250px;
    padding: 1%;
    border: 1px solid transparent;
    justify-content: center;
  }
  .sixthdiv > div {
    display: flex;
    border: 1px solid transparent;
    text-align: center;
    width: 30%;
    padding: 1px;
    gap: 15px;
  }
  .sixthdiv > div > div {
    border: 1px solid transparent;
    text-align: center;
    width: 35%;
    height: 90%;
    line-height: 10px;
    font-size: 15px;
  }
  .sixthdiv > div > div > img {
    width: 100%;
  }
  /* seventhdiv-------------------------- */

  .seventhdiv {
    display: grid;
    background-color: whitesmoke;
    margin-top: 25px;
    width: 98%;
    height: 850px;
    padding: 2%;
    border: 1px solid transparent;
    justify-content: space-around;
    color: #7d7faa;

    grid-template-areas:
      "a1 a1 a1 a1 a1 a1"
      "a2 a2 a2 a2 a2 a2"
      "a3 a4 a5 a6 a7 a8";
  }
  .seventhdiv > div:nth-child(1) {
    grid-area: a1;
    border: 1px solid transparent;
    width: 100%;
    height: 100px;
    margin: auto;
  }
  .seventhdiv > div:nth-child(2) {
    grid-area: a2;
    border: 1px solid transparent;
    width: 50%;
    height: 100px;
    margin: auto;
  }
  .seventhdiv > div:nth-child(3) {
    grid-area: a3;
    border: 1px solid transparent;
    width: 50%;
    height: 250px;
    margin-top: 210px;
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-left: 25%;
  }
  .seventhdiv > div:nth-child(3) > div {
    margin-top: 25px;
    border-radius: 5px;
  }
  .bigimg {
    border: 1px solid transparent;
    width: 100%;
    height: 100%;
    margin: auto;
  }
  .bigimg > div {
    border: 1px solid transparent;
    width: 99%;
    height: 90%;
  }
  .video {
    width: 100%;
    height: 550px;
    padding: 5px;
  }
  .video > div {
    border: 1px solid;
    width: 80%;
    height: 55%;
    margin: auto;
  }
  .footcontainer {
    width: 100%;
    height: 670px;
    border: 1px solid;
    background-image: url("https://www.colourbox.com/preview/6273218-vintage-floral-seamless-pattern-on-brown.jpg");
    padding: 5px;
  }
  .footcontainer > h5 {
    margin-top: 5px;
    color: white;
    text-align: center;
  }
  .footcontainer > p {
    margin-top: 5px;
    color: rgb(214, 194, 183);
    text-align: center;
  }
  #tablecontent {
    display: grid;
    border: 1px solid black;
    width: 97%;
    height: 550px;
    background-color: whitesmoke;
    margin: auto;
    padding: 2px;
    grid-template-areas: "a00 a11 a22 a33" "a44 a44 a44 a44";
  }
  #tablecontent > div:nth-child(1) {
    grid-area: a00;
    border-left: 1px solid darkgray;
    width: 90%;
    height: 250px;
    border-radius: 5px;
  }
  #tablecontent > div:nth-child(2) {
    grid: a11;
    border-left: 1px solid darkgray;
    width: 90%;
    height: 250px;
    border-radius: 5px;
  }

  #tablecontent > div:nth-child(3) {
    grid-area: a22;
    border-left: 1px solid darkgray;
    width: 90%;
    height: 250px;
    border-radius: 5px;
  }

  #tablecontent > div:nth-child(4) {
    grid-area: a33;
    border-left: 1px solid darkgray;
    width: 90%;
    height: 250px;
    border-radius: 5px;
  }
  #tablecontent > div > li {
    margin-left: 15px;
    font-size: 15px;
    list-style-type: none;
    line-height: 25px;
  }
  a {
    text-decoration-line: none;
    color: darkslategray;
  }
  #tablecontent > div > h4 {
    margin-left: 15px;

    margin-top: 10px;
  }
  #tablecontent > div:nth-child(5) {
    grid-area: a44;
    border-left: 1px solid darkgray;
    border-top: 1px solid darkgray;
    width: 100%;
    height: 100px;
    border-radius: 5px;
    margin-top: 0px;
    display: flex;
    flex-direction: row;
    padding: 3px;
    gap: 10px;
  }
  #tablecontent > div:nth-child(5) > div {
    border-right: 1px solid darkgray;
    width: 29%;

    color: rgb(72, 54, 10);
    font-weight: lighter;
  }

  .sociallogo > p {
    margin-top: 2px;
    text-align: left;
  }
  .sociallogo > div {
    border: 1px solid transparent;
    width: 15%;
    height: 40%;

    display: inline-flex;
  }
  .soclogo {
    width: 50%;
  }

  .applogo {
    width: 170%;
  }
  .copyright {
    width: 100%;

    color: sienna;
    font-size: 15px;
    margin-left: 140%;
  }
}

/* header----------------------------------------------------------------------------------------- */
#cont {
  border: 1px solid transparent;
  width: 100%;
  height: 110px;
  display: flex;
  flex-direction: column;
  position: fixed;
  /* margin: auto; */

  background-color: white;
  z-index: 2;
}

.profile {
  border: 1px solid transparent;
  width: 98%;
  height: 30%;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
}
.profile > div {
  width: 31%;
  border: 1px solid transparent;
}
.symbol {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2px;
}
.symbol > div {
  width: 40px;
  height: 100%;
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
}
.symbimg {
  width: 100%;
  height: 70%;
  justify-items: center;
}
select {
  border: 0;
  height: 80%;
  width: 20px;
}
.logo > div {
  width: 40%;
  border: 1px solid transparent;
  margin: auto;
  height: 100%;
}
.logoimg {
  width: 100%;
  height: 90%;
}
ul {
  display: flex;
  list-style: none;
  flex-wrap: nowrap;
  font-size: 12px;
  font-family: "Lucida Sans";
  justify-content: center;
  gap: 25px;
}

a {
  text-decoration: none;
  color: darkslategray;
  font-weight: bold;
}
#furn:hover {
  background-color: burlywood;
  height: 20px;
  width: 80px;
  border-radius: 5px;
  color: black;
  margin: auto;
  text-align: center;
  padding-top: 5px;
}