mensproductpage.css

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.mainbox {
  margin: auto;
  margin-top: 40px;
  width: 100%;
  display: flex;
  /* gap: 20px; */
  justify-content: center;
  align-items: center;
  /* border: 1px solid black; */
}

#mens-nav {
  display: none;
}

.childbox1 {
  width: 50%;
  /* border: 1px solid black; */
  padding-left: 200px;
}

.childbox2 {
  width: 50%;
  justify-content: center;
  /* border: 1px solid black; */
}

.features {
  margin-left: 25px;
  margin-bottom: 20px;
  color: rgb(76, 67, 67);
  font-family: sans-serif;
  font-weight: lighter;
}

.features>h2 {
  /* for brand name */
  font-size: large;
  font-weight: bold;
  color: rgb(76, 67, 67);
  margin-bottom: 15px;
}

.features>p {
  margin-bottom: 15px;
}

h5 {
  /* for brand original price */
  color: gray;
  font-weight: lighter;
  font-size: medium;
}

.features>h2+p {
  /* for brand description */
  color: gray;
  font-family: sans-serif;
  margin-bottom: 20px;
}

.features>p+p {
  color: gray;
  font-weight: lighter;
  margin-bottom: 20px;
}

.features>div {
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.features>div>p {
  color: green;
}

.type {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.type>div:first-child {
  width: 130px;
  height: auto;
  background-color: gray;
  color: white;
  margin-left: 25px;
}

.type>div:last-child {
  width: 165px;
  height: auto;
  border: 1px solid black;
}

.type>div>p {
  padding-left: 10px;
}

.members {
  margin-left: 25px;
  width: 475px;
  font-weight: lighter;
  font-size: medium;
  margin-bottom: 25px;
}

.sizelist {
  display: flex;
  cursor: pointer;
}

.sizelist>div>p:first-child {
  margin-left: 30px;
  font-weight: bold;
}

.sizelist>div:nth-child(2) {
  text-align: right;
  margin-left: 230px;
}

.sizelist>div:last-child {
  display: flex;
  margin-top: 30px;
  margin-left: -450px;
  margin-bottom: 25px;
}

.sizelist>div>div {
  margin-left: 20px;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  padding: 15px 5px 5px 18px;
}

.sizelist>div>div:nth-child(5) {
  padding: 13px;
}

.sizelist>div>div:nth-child(6) {
  padding: 13px;
}

.cart {
  margin-left: 25px;
  margin-bottom: 25px;
  width: 450px;
  height: 35px;

  display: flex;
}

.cart>div:first-child {
  width: 55%;
  background-color: yellow;
  cursor: pointer;
}

.cart>div:last-child {
  width: 35%;
  margin-left: 20px;
  border: 0.5px solid gray;
  justify-content: center;
  cursor: pointer;
}

.cart>div>h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  color: black;
}

.details {
  margin-left: 25px;
}

.details>div>p {
  width: 460px;
}

#offers {
  width: 460px;
  border: transparent;
}

.details>div:nth-child(3) {
  width: 460px;
}

.details>div:nth-child(3)>p {
  width: 260px;
  border: transparent;
}

.exchange>div>p {
  width: 100px;
}

#description {
  width: 460px;
  border: transparent;
}

#returns {
  width: 460p;
  border: transparent;
}


.delivery {
  width: 460px;
  border: transparent;
}

#pincode {
  width: 460px;
  height: 30px;
  /* border: 1px solid gray; */
}

#check {
  border: transparent;
}

#exchange>p {
  width: 460px;
  margin: auto;
}

#footer {
  margin-top: 500px;
  width: 100%;
}

.childbox1>div>img {
  height: 600px;
}

.path> {
  margin-top: 10px;
  margin-left: 150px;
  font-size: small;
  display: flex;
  color: grey;
  cursor: pointer;
}

#footer {
  display: none;
}


/* for medium screens */
@media all and (min-width:768px) and (max-width:1023px) {

  #navbar,
  #nav_bar_container {
    display: none;
    /* margin-bottom: 50px; */
  }

  #mens-nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
  }

  .mainbox {
    display: block;
    width: 100%;
  }

  .childbox1 {
    width: 100%;
    margin: auto;
    /* border: 1px solid black; */
    padding-left: 0px;
  }

  .childbox2 {
    width: 100%;
  }

  .features {
    margin-top: 20px;
    font-size: xx-small;
  }

  .type {
    font-size: xx-small;
  }

  .members {
    font-size: xx-small;
  }

  .sizelist {
    padding-left: 40px;
  }

  .sizelist>div>p {
    font-size: xx-small;
  }

  .cart {
    font-size: xx-small;
    position: sticky;

  }

  .details {
    font-size: xx-small;
  }
}

/* for small screens */
@media all and (min-width:280px) and (max-width:767px) {

  #navbar,
  #nav_bar_container {
    display: none;
    /* margin-bottom: 50px; */
  }

  #mens-nav {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 30px;
  }


  .mainbox {
    width: 100%;
    display: block;
  }

  .childbox1 {
    width: 100%;
    margin: auto;
    /* border: 1px solid black; */
    padding-left: 0px;
    display: block;
  }

  .bewalogo {
    width: 100%;
  }

  .childbox2 {
    width: 100%;
  }

  .members>p {
    word-wrap: break-word;
  }

  .sizelist {
    width: 100%;
    display: flex;
    /* border: 1px solid black; */
  }

  .sizelist>div>p {
    display: none;
  }

  .cart {
    width: 100%;
    display: flex;
  }

  .cart>div {
    width: 50%;
  }

  .details {
    width: 100%;
  }

  #footer {
    display: none;
  }

  .sizelist>div:nth-child(3) {
    margin-left: -310px;
  }
}