@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kablammo&display=swap");

body {
  background: #002447;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

section {
  background: transparent;
  width: 100%;
  border-radius: 5px;
}

.content {
  display: flex;
  justify-content: space-between;
}

/* Left Side:Start */
.left {
  display: block;
  height: fit-content;
  min-width: 250px;
}
.left .product_img {
  height: 480px;
  width: 240px;
  margin: 10px;
  border-radius: 5px;

  background: url("https://i.postimg.cc/X799Yjd4/product-1.jpg") no-repeat;
  background-position: center;
  background-size: cover;
}
.product_details {
  text-align: left;
  margin: 0 10px 10px;
  padding: 5px;
}
.product_details .title {
  font-size: 1.3em;
  color: rgb(99, 99, 99);
  font-weight: 900;
}
.product_details .discription {
  margin-top: 2px;
  font-size: 0.9em;
  color: gray;
}
.product_details .price {
  margin-top: 4px;
  font-size: 1.1em;
  font-weight: 600;
  white-space: pre;
}
.product_details .price span {
  font-weight: 500;
}
.product_details .price .price_original {
  text-decoration: line-through;
  font-size: 0.7em;
  font-weight: 400;
  color: gray;
}
.product_details .price .offer {
  color: #03ac13;
  font-weight: 600;
}
.product_details .other {
  font-size: 0.8em;
  color: grey;
}
/* Left Side:End */

/* Right Side:Start */
.right {
  display: block;
}
.right .product_description {
  text-align: left;
  margin: 30px 20px;
}
.product_description h4 {
  font-size: 1.3em;
  font-weight: 900;
  margin-bottom: 20px;
}
.product_description p {
  font-size: 1.1em;
  color: grey;
  margin-bottom: 15px;
}
.product_description .highlight {
  color: rgb(99, 99, 99);
  font-weight: 900;
}
.product_description .special {
  font-size: 0.85em;
}
/* Right Side:End */

.behind_the_image{
	max-width: 250px;
	background-color: transparent;
    text-align: center;
	margin: 0 10px 10px;
    padding: 5px;
}
.w_img{
	max-width: 100%; 
}
.w_div{
	width: 250px;
}

/* Responsiveness:Start */
@media screen and (min-width: 320px) and (max-width: 480px) {
  .content {
    display: flex;
    flex-direction: column;
    width: 100vw;
    border-radius: 0px;
  }
  section {
    width: 100% !important;
  }
  .product_img {
    width: calc(100vw - 6%) !important;
    height: 350px !important;
  }
  h4.title {
    font-size: 1em !important;
  }
  p {
    width: 100%;
  }
  p.discription {
    font-size: 0.7em !important;
  }
  p.other {
    font-size: 0.7em !important;
  }
  
  .behind_the_image{
	max-width: 100%;
	background-color: #f1f3f5;
  }
  .w_img{
	max-width: 100%; 
  }

  .w_div{
	width: 100%;
  }

}
/* Responsiveness:End */