* {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      box-sizing: border-box;
}
body {
      background: #fff;
}
.breadcrum {
      padding: 10px 20px ;
      font-size: 12px;
      color: #565656;
}
.product-display {
      min-height: 100%;
      padding: 10px 20px;
      display: flex;
}
.product-d-image {
      display: flex;
      gap: 10px;
}
.product-icons {
      display: flex;
      flex-direction: column;
      gap: 10px;
}
.product-icons img {
      border: 1px solid gray;
      border-radius: 10px;
      padding: 5px;
}
.product-d-details {
      margin: 0 30px;
}
.product-title {
      font-size: 25px;
}
.brand-store {
      margin-top: 5px;
      font-size: 14px;
      color: #007185;
}
.product-rating {
      display: flex;
      flex-direction: column;
      gap: 10px;
}
.product-rating div {
      display: flex;
      align-items: center;
      gap: 10px;
}
.product-rating p {
      color: #007185;
}
.product-rating p span {
      color: #fff;
      background: #c73500;
      padding: 2px 5px;
      font-size: 14px;
      border-radius: 3px;
}
.product-rating h5 {
      font-weight: 400;
}
.product-price {
      display: flex;
      flex-direction: column;
      gap: 5px;
}
.product-price div {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px  0;
}
.product-price div p {
      font-size: 26px;
      color: #c73500;
}
.product-price div h1 {
      font-size: 26px;
      font-weight: 500;
}
.product-price div h1 span{
      font-size: 14px;
      font-weight: 500;
}
.product-price h5 {
      color: #565656;
      font-weight: 400;
}
.product-price h5 span {
      text-decoration: line-through;
}
.product-price p span {
      color: #007185;
}
.product-color-selection {
      margin: 15px 0;
}
.product-color-options {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
}
.option {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border: 1px solid #cbcbcb;
      gap: 10px;
}
.product-info {
      display: grid;
      grid-template-columns: auto auto;
      max-width: 300px;
      margin-bottom: 15px;
}
.product-description h1{
      font-size: 20px;
      margin: 15px 0;
}
.product-description ul {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-left: 30px;
}
.product-d-purchase {
      width: 100%;
      max-width: 280px;
      border: 1px solid#c1c1c1;
      border-radius: 10px;
      padding: 20px;
}
.title {
      display: flex;
      justify-content: space-between;
      align-items: center;
}
.cost {
      font-size: 26px;
      font-weight: 400;
      margin: 10px 0;
}
.cost span {
      font-size: 14px;
      padding: 2px;
}
.gap {
      margin: 15px 0;
}
.gap p span {
      color: #007185;
}
.location {
      display: flex;
      align-items: center;
      gap: 5px;
}
.product-stock {
      margin: 15px 0;
      color: green;
      font-weight: 400;
}
.product-quantity {
      padding: 8px 5px;
      outline: none;
      width: 100%;
      border-radius: 5px;
      background: #efefef;
      border-color: #c1c1c1;
}
.product-d-purchase .btn {
      outline: none;
      border: none;
      background-color: #ffd814;
      padding: 10px 0;
      width: 100%;
      margin-top: 10px;
      border-radius: 50px;
      cursor: pointer;
}
.product-d-purchase .product-buy {
background: #ffa41c;
}
.product-seller-info {
      display: grid;
      grid-template-columns: auto auto;
      gap: 4px;
      font-size: 14px;
      color: #565656;
      margin-top: 10px;
}
.product-seller-info span {
      color: #007185;
}
.product-d-purchase hr {
      margin: 20px 0;
}
.product-add-list {
      width: 100%;
      padding: 8px 15px;
      border-radius: 5px;
      border: 1px solid #000;
      text-align: start;
      background: #fff;
      cursor: pointer;
}
.product-footer {
      margin-top: 100px;
}

/* ---------Media Queries------ */
@media only screen and (max-width: 900px) {
      .product-display {
            flex-wrap: wrap;
      }
}

@media only screen and (max-width: 600px) {
      .product-icons {
            display: none;
      }
      .product-main-image img {
            width: 100%;
            padding: 20px;
      }
      .option {
            padding: 6px 8px;
      }
      .option p {
            display: none;
      }
      .product-d-purchase {
            max-width: 90%;
            margin: 20px auto 10px;
      }
}