/* =========================
   PRODUCT SECTION
========================= */
.product{
  position:relative;
  padding:120px 0;
  overflow:hidden;

  background:
  linear-gradient(
  to bottom,
  #f8f6f2 100%,
  #edf5ee 0%
  );
}

.product__container{
  max-width:1300px;

  margin:auto;
  margin-bottom:0px;

  display:grid;

  grid-template-columns:
  0.9fr 1.05fr;

  align-items:center;

  gap:30px;

  position:relative;
  z-index:2;
}

/*=============== LEFT IMAGE ===============*/
.product-image{
   position: relative;
   width:100%;
   max-width:520px;

}

.product-image img{
   position: relative;
   z-index: 2;
   border-radius: 9%;
   border: 3px solid #fff;
    width: 100%;
}

.image-glow{
   position: absolute;

   top: 20px;
   left: -50px;

   width: 300px;
   height: 300px;

   background: #966F33;

   border-radius: 5%;

   filter: blur(100px);

   opacity: 1;

   z-index: 1;
}

/*=============== RIGHT CONTENT ===============*/
.product-content{
   width: 100%;
}

.product-tag{
   color: #966F33;
   font-size: .95rem;
   font-weight: 700;
   letter-spacing: 1px;
   display: inline-block;
   margin-bottom: 15px;
}

.product-title{
  font-size:64px;
  line-height:1.05;
  font-weight:700;
  color:#1d1d1d;

  margin-bottom:5px;
}

.product-title span{
   color: #966F33;
}

.title-line{
   width: 90px;
   height: 5px;
   background: #966F33;
   border-radius: 20px;
   margin-bottom: 15px;
}

.product-description{
   font-size: 1.08rem;
   line-height: 1.3;
   color: #5d6470;
   margin-bottom: 15px;
   max-width: 700px;
}

/*=============== SPEC GRID ===============*/
.spec-grid{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
   margin-bottom: 25px;
}

.spec-card{
   background: #ffffff;

   border-radius: 20px;

   padding: 14px 16px;

   display: flex;
   align-items: center;
   gap: 18px;

   border: 1px solid rgba(0,0,0,.03);

   box-shadow:
   0 10px 30px rgba(0,0,0,.04);

   transition: .35s ease;
}

.spec-card:hover{
   transform: translateY(-5px);
   box-shadow:
   0 18px 40px rgba(0,0,0,.06);
}

.spec-icon{
   width: 45px;
   height: 45px;

   border-radius: 30%;

   background: #edf7ee;

   display: flex;
   align-items: center;
   justify-content: center;

   flex-shrink: 0;
}

.spec-icon i{
   font-size: 1.45rem;
   color: #966F33;
}

.spec-info p{
   font-size: 14px;
   color: #7a7a7a;
   margin-bottom: 8px;
   font-weight: 500;
}

.spec-info h3{
   font-size: 16px;
   font-weight: 700;
   color: #111827;
   line-height: 1.2;
}

/*=============== DESIGNED FOR ===============*/
.designed-for h2{
   font-size: 24px;
   margin-bottom: 25px;
}

.designed-grid{
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
}

.designed-icon{
   font-size: 26px;
}

.designed-card{
   background: #fff;
   padding: 20px 24px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   gap: 1px;
   font-size: 13px;
   font-weight: 600;
   box-shadow: 0 10px 25px rgba(0,0,0,.05);
   transition: .3s;
}

.designed-card:hover{
   transform: translateY(-4px);
}

.designed-card span{
   color: #222;
}


/* ===================================== */
/* PRODUCT RESPONSIVE */
/* ===================================== */

/* =========================
   MACBOOK / LAPTOP
========================= */
@media screen and (max-width:1200px){

   .product{
      padding:100px 40px;
   }

   .product__container{
      gap:50px;
   }

   .product-title{
      font-size:54px;
   }

   .product-image{
      max-width:450px;
   }

   .spec-grid{
      gap:12px;
   }

}

/* =========================
   TABLET
========================= */
@media screen and (max-width:992px){

   .product{
      padding:90px 30px;
   }

   .product__container{
      grid-template-columns:1fr;
      gap:60px;

      margin-bottom:0;
   }

   .product-image{
      margin:auto;
      max-width:450px;
   }

   .product-content{
      text-align:center;
   }

   .title-line{
      margin:0 auto 20px;
   }

   .product-description{
      margin:auto auto 25px;
      line-height:1.8;
   }

   .spec-grid{
      grid-template-columns:repeat(2,1fr);
   }

   .designed-grid{
      justify-content:center;
   }

}

/* =========================
   MOBILE
========================= */
@media screen and (max-width:576px){

   .product{
      padding:70px 20px;
   }

   .product__container{
      gap:40px;
   }
   .product-content{
      text-align:left;
   }

   .product-tag{
      font-size:12px;
   }

   .product-title{
      font-size:34px;
      line-height:1.15;
   }

   .product-description{
      font-size:15px;
      line-height:1.8;
      text-align:left;
   }

   .product-image{
      max-width:300px;
   }

   .image-glow{
      width:180px;
      height:180px;
      left:-10px;
      top:40px;
      filter:blur(70px);
   }

   .spec-grid{
      grid-template-columns:1fr;
   }

   .spec-card{
      padding:14px;
      border-radius:18px;
   }

   .spec-icon{
      width:42px;
      height:42px;
   }

   .spec-icon i{
      font-size:1.2rem;
   }

   .spec-info h3{
      font-size:14px;
   }

   .spec-info p{
      font-size:12px;
   }

   .designed-for h2{
      font-size:20px;
      text-align:center;
   }

   .designed-grid{
      justify-content:center;
      gap:12px;
   }

   .designed-card{
      padding:14px 18px;
      font-size:12px;
   }

   .designed-icon{
      font-size:20px;
   }

}