/* Add custom CSS styles below */ 
<section class="drops-hero-product">

  <div class="drops-bg"></div>

  <img
    class="drops-main-bag"
    src="حط-رابط-صورة-شامباكو"
  >

  <div class="drops-content">
    <span class="drops-origin">
      كولومبيا • شامباكو
    </span>

    <h1>
      محصول استثنائي<br>
      بتجربة فاخرة
    </h1>

    <p>
      إيحاءات شوكولاتة وبندق محمص
      بحلاوة متوازنة وقوام غني.
    </p>

    <button>
      تسوق الآن
    </button>
  </div>

</section>

<style>
.drops-hero-product{
  position:relative;
  height:650px;
  overflow:hidden;
  background:
  linear-gradient(180deg,#f8efe5,#ead8c5);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* الخلفية */
.drops-bg{
  position:absolute;
  inset:0;
  background:
  url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1600')
  center/cover;
  opacity:.12;
  transform:scale(1.1);
}

/* الكيس الرئيسي */
.drops-main-bag{
  position:absolute;
  width:370px;
  right:18%;
  z-index:5;

  animation:
  bagFloat 4s ease-in-out infinite,
  bagRotate 7s ease-in-out infinite;

  filter:
  drop-shadow(0 35px 35px rgba(0,0,0,.22));
}

/* المحتوى */
.drops-content{
  position:absolute;
  left:12%;
  max-width:430px;
  z-index:6;
  color:#5c120d;
}

.drops-origin{
  display:inline-block;
  margin-bottom:18px;
  padding:8px 18px;
  border-radius:50px;
  background:#8b0000;
  color:#fff;
  font-size:14px;
}

.drops-content h1{
  font-size:62px;
  line-height:1.15;
  margin:0 0 18px;
  font-weight:800;
}

.drops-content p{
  font-size:20px;
  line-height:1.9;
  color:#6f5146;
  margin-bottom:28px;
}

.drops-content button{
  border:0;
  background:#8b0000;
  color:#fff;
  padding:16px 34px;
  border-radius:14px;
  font-size:18px;
  cursor:pointer;
  transition:.3s;
}

.drops-content button:hover{
  transform:translateY(-4px);
  background:#6d0000;
}

/* الإضاءة */
.drops-hero-product::after{
  content:"";
  position:absolute;
  bottom:90px;
  right:21%;
  width:280px;
  height:50px;
  border-radius:50%;
  background:
  radial-gradient(circle,
  rgba(255,180,80,.55),
  transparent 70%);
  animation:glow 3s infinite;
}

/* الحركات */
@keyframes bagFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-18px);
  }
}

@keyframes bagRotate{
  0%,100%{
    rotate:-2deg;
  }

  50%{
    rotate:2deg;
  }
}

@keyframes glow{
  0%,100%{
    opacity:.5;
    transform:scale(1);
  }

  50%{
    opacity:1;
    transform:scale(1.12);
  }
}

/* الجوال */
@media(max-width:768px){

  .drops-hero-product{
    height:760px;
  }

  .drops-main-bag{
    width:250px;
    right:50%;
    top:90px;
    transform:translateX(50%);
  }

  .drops-content{
    left:0;
    bottom:70px;
    padding:30px;
    text-align:center;
    max-width:100%;
  }

  .drops-content h1{
    font-size:38px;
  }

  .drops-content p{
    font-size:16px;
  }

  .drops-hero-product::after{
    right:50%;
    transform:translateX(50%);
  }
}
</style>