body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container1 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.logo img {
  width: 60px;
  /* height: 100px; */
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding-inline: 50px; */
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;

  /* max-width: 1200px; */
  width: 100%;
  margin: 0 auto;
  /* inset: 0; */

  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  height: 60px;
}
@media (max-width: 800px) {
  .navbar {
    flex-direction: column;
    height: auto;
    gap: 20px;
    padding-block: 5px;
    padding-inline: 0;
  }
  .container1 {
    width: 100%;
    margin: 0 auto;
  }
}

.navbar-list a {
  text-decoration: none;
  color: black;
}
.navbar-list a:hover {
  color: skyblue;
}

#sale {
  color: red;
}
#sale:hover {
  color: skyblue;
}

.navbar-list {
  display: flex;
  gap: 15px;
}
.demo {
  position: relative;
  z-index: 1;
}

.demo-list {
  background-color: white;
  /* box-shadow: 0px 10px 10px black; */
  display: flex;
  width: 800px;
  gap: 80px;
  padding-inline: 10px;

  cursor: pointer;
  position: absolute;
  top: 100%;
  left: -260px;
  display: none;
  z-index: 2;
}

.demo:hover .demo-list {
  display: flex;
}
.demo-list p:hover {
  color: skyblue;
}

/* shop list item */

.shop {
  position: relative;
}
.new {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 30px;
  height: 22px;
  background-color: skyblue;
  border-radius: 120px;
  text-align: center;
}

.salee {
  position: relative;
}
.sale-top {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 30px;
  height: 22px;
  background-color: orange;
  border-radius: 120px;
  text-align: center;
}

.shop-list {
  background-color: white;
  width: 650px;
  padding-inline: 30px;
  cursor: pointer;
  display: flex;
  gap: 30px;
  position: absolute;
  left: -250px;
  top: 100%;
  display: none;
  z-index: 2;
}
.shop:hover .shop-list {
  display: flex;
}
.men-div {
  position: relative;
}

.menbtn {
  position: absolute;
  bottom: 100px;
  left: 50px;
  padding: 8px 25px;
  border: none;
}

.shop-list p:hover {
  color: skyblue;
}
.men {
  /* border: 2px solid black; */
  width: 171px;
  height: 300px;
  margin-top: 45px;
  overflow: hidden;
}
.men img {
  display: block;
  height: 100%;
  width: 100%;
  /* position: relative; */
}

.men img:hover {
  transform: scale(1.2);
  transition: 2s;
}
.wemen-div {
  position: relative;
}
.wemenbtn {
  position: absolute;
  bottom: 100px;
  left: 50px;
  padding: 8px 25px;
  border: none;
}

.women {
  width: 181px;
  height: 300px;
  margin-top: 45px;
  overflow: hidden;
}
.women img {
  display: block;
  width: 100%;
  height: 100%;
  /* overflow: block; */
}
.women img:hover {
  transform: scale(1.2);
  transition: 2s;
}
/*  */
.nav-logo {
  display: flex;
  gap: 20px;
  cursor: pointer;
}
.nav-logo i {
  font-size: 20px;
  /* position: relative; */
}
.nav-logo i:hover {
  color: skyblue;
}
.love-p {
  position: relative;
}
.love {
  position: absolute;
  background-color: black;
  height: 15px;
  width: 15px;
  border-radius: 100%;
  right: -5px;
  top: -6px;
  display: grid;
  place-content: center;
  color: white;
  font-size: 10px;
}
.user-i {
  position: relative;
}
.user {
  position: absolute;
  background-color: black;
  height: 15px;
  width: 15px;
  border-radius: 100%;
  right: -5px;
  top: -6px;
  display: grid;
  place-content: center;
  color: white;
  font-size: 10px;
}

/* BIG PIC.................. */

.container-big {
  margin-bottom: 50px;
  width: 100%;
}

.big-parent {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media (max-width: 700px) {
  .summer {
    position: absolute;
    top: 15%;

    left: 10%;
  }
  .big-pic img {
    width: 100%;
    height: auto;
    margin-top: 30%;
  }
}
@media (max-width: 500px) {
  .big-pic img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.big-pic img {
  width: 100%;
  height: 100%;
  display: block;
}
.summer {
  position: absolute;
  bottom: 35%;
  left: 10%;
}
.summer h1 {
  font-size: 55px;
  color: white;
  margin: 0;
}
.summer h2 {
  color: white;
  margin: 0;
}
.explorebtn {
  border: none;
  padding: 10px 25px;
  transition: all 3s ease;
  font-weight: 700;
}
.explorebtn:hover {
  background-color: skyblue;
}

/* container2 grid............*/

.container2 {
  display: grid;

  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(38, 1fr);
  gap: 20px;
  position: relative;
}
.box1 {
  grid-column: 3/7;
  grid-row: 5/37;
  /* box-shadow: 0 0px 15px; */
  border: 2px solid rgba(128, 128, 128, 0.351);
  overflow: hidden;
  position: relative;
}

.woman {
  position: absolute;
  bottom: 10%;
  left: 35%;
}

.womanbtn {
  border: none;
  padding: 10px 20px;
  font-size: 15px;
  background-color: steelblue;
  color: white;
  cursor: pointer;
}
.box1 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.box1 img:hover {
  transform: scale(1.2);
  transition: 3s;
}

/* box 2.......... */

.box2 {
  grid-column: 7/11;
  grid-row: 5/20;
  /* box-shadow: 0 0px 15px; */
  border: 2px solid rgba(128, 128, 128, 0.351);
  overflow: hidden;
  position: relative;
}

.bag {
  position: absolute;
  top: 80%;
  left: 40%;
}
.bagbtn {
  border: none;
  padding: 10px 20px;
  font-size: 15px;
  background-color: steelblue;
  color: white;
  cursor: pointer;
}
.box2 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.box2 img:hover {
  transform: scale(1.2);
  transition: 2s;
}

/* box3............ */
.box3 {
  grid-column: 7/11;
  grid-row: 20/37;
  /* box-shadow: 0 0px 15px; */
  border: 2px solid rgba(128, 128, 128, 0.351);
  overflow: hidden;
  position: relative;
}
.box3 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.box3 img:hover {
  transform: scale(1.2);
  transition: 2s;
}

.footwear {
  position: absolute;
  bottom: 10%;
  right: 38%;
}
.footwearbtn {
  border: none;
  padding: 10px 20px;
  font-size: 15px;
  background-color: steelblue;
  color: white;
  cursor: pointer;
}

/* box4........ */
.box4 {
  grid-column: 11/15;
  grid-row: 5/37;
  /* box-shadow: 0 0px 15px; */
  overflow: hidden;
  border: 2px solid rgba(128, 128, 128, 0.351);
  position: relative;
}
.box4 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.box4 img:hover {
  transform: scale(1.2);
  transition: 2s;
}
@media (max-width: 800px) {
  .box1 {
    grid-column: 3/16;
    grid-row: 5/12;
  }
  .box2 {
    grid-column: 3/16;
    grid-row: 12/20;
  }
  .box3 {
    grid-column: 3/16;
    grid-row: 20/25;
  }
  .box4 {
    grid-column: 3/16;
    grid-row: 25/33;
  }
}
.watch {
  position: absolute;
  bottom: 10%;
  right: 40%;
}

.watchbtn {
  border: none;
  padding: 10px 20px;
  font-size: 15px;
  background-color: steelblue;
  color: white;
  cursor: pointer;
}

/* container 3, 4 line bat dewa hoise................................ */

.section-title {
  text-align: center;
}

.section-title h2 {
  position: relative;
  display: inline-block;
  font-size: 32px;
  letter-spacing: 2px;
  font-weight: 700;
}

/* left line */
.section-title h2::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 2px;
  background: #333;
  left: -100px;
  top: 50%;
}

.section-title h2::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 2px;
  background: #333;
  right: -100px;
  top: 50%;
}
.section-title h2 {
  margin: 0;
}

.section-title p {
  margin-top: px;
  font-style: italic;
  color: #9b7b5a;
}

/* button side.................. */
.learnmorebtn {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;

  text-align: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.load-more {
  padding: 18px 38px;
  border: 2px solid black;
  border-radius: 50px;
  font-size: 15px;
  background-color: white;
  font-weight: 400;
  cursor: pointer;
  transition: all 3s ease;
}
.load-more:hover {
  background-color: skyblue;
  border: none;
  color: white;
}

/* container 5 ..................*/

.container5 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;

  /* padding-inline: 200px;
  margin-bottom: 50px;
  padding-block: 50px;
  display: flex;
  justify-content: space-between; */
}

.last-tow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.tow-boxs {
  border: 2px solid grey;
  cursor: pointer;
  overflow: hidden;
}
.tow-boxs img {
  width: 100%;
  height: 100%;
  display: block;
}
.tow-boxs img:hover {
  transform: scale(1.2);
  transition: 2s;
}

.nine {
  position: relative;
}
.sit {
  position: absolute;
  top: 35%;
  left: 5%;
  color: white;
}
.ten {
  position: relative;
}
.tow-girl {
  position: absolute;
  top: 40%;
  left: 5%;
  color: white;
}
.tow-girl h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.tow-girl h1 {
  margin-top: 0;
  font-size: 45px;
}
/* ontainer6.................. */

.container6 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
}

.parent-box2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  cursor: pointer;
  @media (max-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  @media (max-width: 500px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.parent-box2 img {
  width: 100%;
  height: 100%;
  display: block;
}
/*  */
.parent-box2 p {
  margin: 5px;
}
.parent-box2 p:hover {
  color: skyblue;
}
.city-p {
  font-weight: 600;
}
.price-p {
  color: rgba(128, 128, 128, 0.705);
}
.img-div {
  border: 2px solid rgba(128, 128, 128, 0.542);
  height: 350px;
  overflow: hidden;
}
.img-div img:hover {
  transform: scale(1.2);
  transition: 2s;
}

/* container 7 */

.container7 {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.parent-box3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  cursor: pointer;

  @media (max-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  @media (max-width: 500px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.parent-box3 img {
  width: 100%;
  height: 100%;
  display: block;
}
.parent-box3 p {
  margin: 5px;
}
.parent-box3 p:hover {
  color: skyblue;
}
.tho {
  text-decoration: line-through;
}
.short-hoodie {
}
.img-div2 {
  border: 2px solid rgba(128, 128, 128, 0.69);
  height: 350px;
  overflow: hidden;
}
.img-div2 img:hover {
  transform: scale(1.2);
  transition: 2s;
}

/* container 8............... */

.container8 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.parent-box4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  @media (max-width: 800px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  @media (max-width: 500px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

.parent-box4 img {
  width: 100%;
  height: 100%;
  display: block;
}
.parent-box4 p {
  margin: 5px;
}
.details {
  color: rgba(128, 128, 128, 0.603);
}
.img-div3 {
  border: 2px solid rgba(128, 128, 128, 0.582);
  overflow: hidden;
}
.img-div3 img:hover {
  transform: scale(1.2);
  transition: 2s;
}

/* container 9.................... */
.container9 {
  margin-bottom: 50px;
}
.parent-box5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  @media (max-width: 800px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  @media (max-width: 500px) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.parent-box5 img {
  width: 100%;
  height: 100%;
  display: block;
}
.img-div5 {
  height: 250px;
  border: 2px solid rgba(128, 128, 128, 0.737);
  overflow: hidden;
}
.img-div5 img:hover {
  transform: scale(1.2);
  transition: 2s;
}

/* container 10............. */
.container10 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 35px;
}
.parent-box6 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  @media (max-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  @media (max-width: 500px) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.icon {
  font-size: 35px;
}
.parent-box6 p {
  color: rgba(128, 128, 128, 0.663);
  margin: 0;
}
.parent-box6 h4 {
  margin: 0;
  margin-bottom: 8px;
}
.icon1 {
  display: flex;
  gap: 5px;
}
.one-div {
  display: flex;
  gap: 12px;
}

/* container 11............... */

.container11 {
  background-color: #f6f6f8;
  margin-bottom: 10px;
}
.scnd-con {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-block: 20px;
}

.main-div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  cursor: pointer;
  @media (max-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    text-align: center;
  }
  @media (max-width: 500px) {
    grid-template-columns: repeat(1, 1fr);
  }
}
.main-div p:hover {
  color: skyblue;
}
.card {
  font-size: 22px;
}

.icon-card {
  font-size: 18px;
}
.icon-card i:hover {
  color: skyblue;
}
.email {
  width: 220px;
  border-radius: 50px;
  height: 50px;
  outline: none;
  /* position: relative; */
}
.sub {
  padding: 10px 12px;
  border: none;
  background-color: black;
  color: white;
  border-radius: 50px;
  position: absolute;
  right: 4%;
  bottom: 41%;
}
.div-num3 {
  position: relative;
}
.div-num3 .sub:hover {
  background: #ff8c00;
  transform: translateY(-2px);
  transition: all 2s ease;
}
@media (max-width: 500px) {
  .sub {
    position: absolute;
    bottom: 7%;
    right: 28%;
  }
}
@media (max-width: 1000px) {
  .sub {
    position: absolute;
    bottom: 6%;
    right: 22%;
  }
}
@media (max-width: 912px) {
  .sub {
    position: absolute;
    bottom: 43%;
    right: 5%;
  }
}
/* container 12............ */
.container12 {
  text-align: center;
  padding-block: 20px;
}

/* .item-five {
  position: relative;
}
.item-five:hover .QuickView {
  display: block;
}
.item-five:hover .QuickShop {
  display: block;
}
.QuickView {
  background-color: white;
  color: black;
  padding-inline: 20px;
  border-radius: 100px;
  padding-block: 7px;
  position: absolute;
  top: 40%;
  left: 30%;

  display: none;
}
.QuickShop {
  background-color: white;
  color: black;
  padding-inline: 20px;
  border-radius: 100px;
  padding-block: 7px;
  position: absolute;
  top: 50%;
  left: 30%;
  display: none;
} */

/* .btn2 {
  position: absolute;
} */

/*  */