@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Open+Sans:wght@300;400;600&family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Arima:wght@400;700&family=Great+Vibes&family=Gulzar&family=Open+Sans:wght@300;400;600&family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background-color: rgb(31, 27, 27);

  /* z-index: -999; */
}
main {
  display: block;
  overflow: hidden;
}
@media only screen and (min-width: 360px) and (max-width: 767px) {
  body {
    min-width: 100%;
    overflow-x: hidden !important;
    z-index: -999;
  }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1800px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    z-index: -999;
  }
}

/* ------------------------------------------------------------------ */
/* Styling for heading */
.tea-shop-title {
  height: 10%;
  width: 100%;
  margin: 0 auto;
  background-color: white;
  z-index: 999;
}
.shop-header {
  /* height: 80px; */
  height: 5%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.header-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.tea-heading-img {
  height: 80px;
  width: 100px;
}
.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

.tea-heading {
  margin: 0;
  color: rgb(82, 24, 24);
  font-family: monospace;
  letter-spacing: -1px;
}

.tea-heading-para {
  margin: 0;
  color: rgb(56, 54, 54);
  text-transform: lowercase;
  font-family: cursive;
  font-style: italic;
  font-weight: 1px;
  text-align: center;
  display: block;
}

.tea-shop-address-ul {
  text-decoration: none;
  list-style: none;
  /* margin-left: 500px; */
}
.address-li {
  padding: 1px;
  text-align: left;
  align-items: center;
  font-size: 15px;
}

.phone-no {
  font-weight: bold;
}

@media (max-width: 720px) {
  .tea-shop-title {
    margin: 0 auto;
    width: 100%;
  }
  .shop-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: max-content;
  }
  .tea-heading-para {
    text-align: justify;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .tea-shop-title {
    margin: 0 auto;
    width: 100%;
  }
  .shop-header {
    width: 100%;
    flex-direction: column;
    height: max-content;
  }
  .tea-heading-para {
    text-align: justify;
  }
}

/* ------------------------------------------------------------------ */
/* End Styling for heading */

/*Navigation tea bar*/
.navigation-bar {
  /* margin-top: 10px; */
  height: 40px;
  background-color: rgb(88, 72, 25);
  font-family: sans-serif;
  color: snow;
}

.navigation-list {
  list-style: none;
  display: flex;
  margin-left: 250px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.navigation-link {
  padding: 15px;
  transition: background-color 0.2s ease-in;
}
.navigation-link:hover {
  background-color: rgb(151, 140, 140);
  opacity: 0.1;
  color: black;
}

@media (max-width: 720px) {
  .navigation-bar {
    width: 100%;
    height: max-content;
  }

  .navigation-list {
    margin: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .navigation-bar {
    width: 100%;
    height: max-content;
  }
}

/*  End of Navigation tea bar*/

.img-insert-div {
  margin-top: 4px;
  /* margin-left: 150px; */
  margin: 0 auto;
  height: max-content;
  width: 77%;
  display: flex;
  justify-content: center;

  background-color: rgba(148, 59, 59, 0.247);
}
.img-insert {
  height: 500px;
  width: 800px;
}

@media (max-width: 720px) {
  .img-insert {
    height: 300px;
    width: 500px;
  }
}
@media only screen and (min-width: 360px) and (max-width: 767px) {
  .img-insert {
    height: 45%;
    width: 60%;
  }
}

/* ------------------End heading style with Image------------------------------------------------------------------------ */

/* --------------------main white div-------------------- */

.ramaining-background {
  height: 1300px;
  width: 77%;
  margin: 0 auto;
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 360px) and (max-width: 767px) {
  .ramaining-background {
    width: 100%;
    height: 2800px;
    flex-direction: column;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .ramaining-background {
    width: 100%;
    flex-direction: row;
    height: 1500px;

    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* --------------------End main white div-------------------- */

/* ---------------------------------------------------------- */
.main-div-slidebar {
  height: 700px;
  width: 20%;
  margin-left: 7%;
  /* margin-top: 1%; */
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.left-side-heading h3 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-weight: 100px;
  font-style: oblique;
}

.left-side-heading p {
  display: block;
  width: 70%;
  text-align: left;
  font-family: "Times New Roman", Times, serif;
}

.main-div-slidebar form {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  padding: 1px;
}
.main-div-slidebar input {
  height: 30px;
  width: 150px;
  border: 1px solid black;
}
.main-div-slidebar .input-tea-msg {
  height: 50px;
  width: 200px;
  border: 1px solid black;
}
.tea-of-day-div {
  height: 200px;
  width: 180px;
  border: 2px solid rgb(46, 16, 16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tea-of-day-div img {
  height: 150px;
  width: 150px;
  margin-top: 10px;
}
.tea-of-day-div p {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: 11px;
  text-align: center;
  font-style: italic;
  font-weight: bolder;
  margin-top: 10px;
}

/* ---------------------phone----------------------- */
@media only screen and (min-width: 360px) and (max-width: 767px) {
  .main-div-slidebar {
    width: 100%;
    margin-top: 4%;
    margin-left: 20%;
    /* margin-top: 1%; */

    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .left-side-heading {
    width: 100%;
  }
  .left-side-heading h3 {
    width: 100%;
  }
}

/* -------------------ipad---------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .main-div-slidebar {
    margin-top: 4%;
    margin-left: 3%;
    /* margin-top: 1%; */

    justify-content: flex-start;
    align-items: flex-start;
  }

  .left-side-heading {
    width: 100%;
  }
  .left-side-heading h3 {
    width: 100%;
  }
}

/* -----------------------end left side div----------------------- */

/* -----------------------Right side div----------------------- */

.right-slidebar {
  height: 700px;
  width: 80%;
  margin-top: 1%;
  margin-left: 5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 999;
}

.right-slidebar-main {
  width: 80%;
}
.right-slidebar-main h3 {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.right-slidebar-main p {
  display: block;
  font-family: "Times New Roman", Times, serif;
  font-weight: 100px;
  font-style: normal;
  z-index: 999;
}

.tea-items {
  width: 80%;
  height: 700px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 999;
}
.tea-items div {
  padding: 6px;
  z-index: 999;
}
.tea-items img {
  height: 180px;
  width: 180px;
}
.tea-items p {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  text-align: left;
  margin-left: 1px;
}
.address-map {
  /* width: 0%; */
  width: 85%;
  margin-top: 10px;
  /* margin-left:5%; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.address {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.our-details-div {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.map {
  width: 100%;

  margin-top: 10%;
}

.map iframe {
  width: 100%;
  height: 300px;
}

/* --------------ipad----------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .right-slidebar {
    /* margin-top: 4%; */
    margin-left: 15%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* position: relative; */
    z-index: 999;
  }
  .right-slidebar-main {
    margin-top: 100%;
    width: 90%;
  }
  .tea-items {
    flex-direction: column;
    justify-content: flex-start;
  }
  .c-tea-items {
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .c-tea-items div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .address-map {
    width: 100%;
    margin-top: 100px;
    margin-left: -100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .address {
    margin-top: 20px;
    width: 30%;
    margin-left: -200px;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .para-right-slidebar p {
    display: block;
    margin-left: 3%;
  }
  .our-details-div {
    width: 100%;
  }
  .contact-div {
    width: 100%;
  }
  .map iframe {
    margin-left: 10%;
    width: 70%;
  }
}

/* -----------------------phone---------------------------- */
@media only screen and (min-width: 360px) and (max-width: 767px) {
  .right-slidebar {
    margin-top: 10%;
    width: 100%;
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 999;
  }

  .tea-items {
    flex-direction: column;
    justify-content: flex-start;
  }
  .c-tea-items {
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .c-tea-items div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .address-map {
    width: 100%;
    margin-top: 400px;
    margin-left: 20px;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .address {
    margin-top: 80px;
    width: 100%;
  }
  .para-right-slidebar p {
    display: block;
    margin-left: 3%;
  }
  .our-details-div {
    width: 100%;
  }
  .contact-div {
    width: 100%;
  }
  .map iframe {
    margin-left: 0%;
    width: 90%;
  }
}

/* Footer----------- */
.follow-us-div {
  /* margin-left: 1%;  */
  margin: 0 auto;
  height: 400px;
  width: 77.1%;
  background-color: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
.follow-us-p {
  position: absolute;
  /* transform: translate(-80px,-90px); */
  transform: translate(-8%, -48%);
  color: rgba(37, 35, 35, 0.815);
  font-size: 25px;
  /* margin-left: 4%; */
  padding: 80px;
}
.facebook-p {
  margin-left: 650px;
}
.follow-us-p i {
  padding: 3px;
}
.line-div {
  height: 1px;
  width: 60%;
  /* margin-left: 200px; */
  margin-left: 2%;
  background-color: darkgrey;
  position: absolute;
  top: 130px;
}
.copy1 {
  position: absolute;
  /* transform: translate(-90px,-40px); */
  transform: translate(-110%, -180%);
  font-size: 25px;
}
.fa-copyright {
  font-size: 15px;
  /* top:-1px; */
}

.copy2 {
  font-size: 20px;
  font-weight: bold;

  position: absolute;
  transform: translate(-2%, -200%);
  /* transform: translate(250px,-36px); */
}

/* --------------ipad----------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .right-slidebar {
    margin-top: 20%;
  }

  .follow-us-div {
    margin-left: 4%;
  }
}

/* -----------------------phone---------------------------- */
@media only screen and (min-width: 360px) and (max-width: 767px) {
  .follow-us-div {
    justify-content: flex-start;

    width: 100%;
  }
  .follow-us-p {
    margin-left: 0px;
  }

  .follow-us-p i {
    margin-left: 0;
    padding: 0;
  }
  .facebook-p {
    margin-left: 0px;
  }
  .follow-us-p i {
    padding-top: 3px;
    padding-right: 0px;
    padding-left: 0px;
  }
  .line-div {
    margin-left: 0px;
  }
  .copy1 {
    position: absolute;
    transform: translate(0px, 0px);
    font-size: 25px;
  }
  .fa-copyright {
    font-size: 15px;
    /* top:-1px; */
  }

  .copy2 {
    font-size: 20px;
    font-weight: bold;

    position: absolute;
    transform: translate(0px, 30px);
  }
}

/* -----------------------end right side div----------------------- */
/*End of Slide bar for Tea of the month Club*/