/*==========================================================
                INDIAN FIBRE SHEETS
                PRODUCT.CSS
==========================================================*/

/*==========================================================
                PRODUCTS SECTION
==========================================================*/

.products {
  background: #f8fafc;
}

/*==========================================================
                SECTION TITLE
==========================================================*/

.products .section-title {
  margin-bottom: 70px;
}

/*==========================================================
                PRODUCT GRID
==========================================================*/

.product-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 40px;
}

/*==========================================================
                PRODUCT CARD
==========================================================*/

.product-card {
  background: #ffffff;

  border-radius: 22px;

  overflow: hidden;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

  transition: 0.4s ease;

  position: relative;
}

.product-card:hover {
  transform: translateY(-12px);

  box-shadow: 0 30px 55px rgba(0, 0, 0, 0.15);
}

/*==========================================================
                PRODUCT IMAGE
==========================================================*/

.product-image {
  position: relative;

  overflow: hidden;
}

.product-image img,
.product-card img {
  width: 100%;

  height: 280px;

  object-fit: cover;

  transition: 0.5s ease;
}

.product-card:hover img {
  transform: scale(1.08);
}

/*==========================================================
                PRODUCT BADGE
==========================================================*/

.product-badge {
  position: absolute;

  top: 20px;

  left: 20px;

  background: #f58220;

  color: #fff;

  padding: 8px 18px;

  border-radius: 30px;

  font-size: 14px;

  font-weight: 600;
}

/*==========================================================
                PRODUCT CONTENT
==========================================================*/

.product-content {
  padding: 30px;
}

.product-card h3,
.product-content h3 {
  color: #0b3d91;

  font-size: 28px;

  margin-bottom: 15px;
  margin-top: 15px;
}

.product-card p,
.product-content p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 25px;
}

/*==========================================================
                FEATURES
==========================================================*/

.product-features {
  list-style: none;

  margin-bottom: 25px;
}

.product-features li {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 0;

  color: #555;
}

.product-features i {
  color: #f58220;
}

/*==========================================================
                PRODUCT BUTTON
==========================================================*/

.product-btn {
  display: inline-block;

  padding: 13px 30px;

  background: #0b3d91;

  color: #fff;

  border-radius: 40px;

  font-weight: 600;

  transition: 0.35s;
}

.product-btn:hover {
  background: #f58220;

  transform: translateY(-3px);
}

/*==========================================================
                PRODUCT SPECIFICATION
==========================================================*/

.product-specs {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 15px;

  margin-top: 25px;
}

.spec-box {
  background: #f4f7fb;

  padding: 18px;

  border-radius: 15px;

  text-align: center;
}

.spec-box h4 {
  color: #0b3d91;

  font-size: 16px;

  margin-bottom: 6px;
}

.spec-box span {
  color: #666;

  font-size: 15px;
}

/*==========================================================
                COLORS SECTION
==========================================================*/

.color-section {
  margin-top: 100px;
}

.color-section h2 {
  text-align: center;

  color: #0b3d91;

  font-size: 38px;

  margin-bottom: 20px;
}

.color-section p {
  text-align: center;

  color: #666;

  margin-bottom: 55px;
}

/*==========================================================
                COLOR GRID
==========================================================*/

.color-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

  gap: 25px;
}

.color-card {
  background: #fff;

  padding: 25px 20px;

  border-radius: 18px;

  text-align: center;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

  transition: 0.35s;
}

.color-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.color {
  width: 90px;

  height: 90px;

  border-radius: 18px;

  margin: 0 auto 18px;
}

/*==========================================================
                COLORS
==========================================================*/

.white {
  background: #ffffff;

  border: 1px solid #ddd;
}

.blue {
  background: #1d4ed8;
}

.orange {
  background: #f58220;
}

.grey {
  background: #808080;
}

.green {
  background: #16a34a;
}

.red {
  background: #dc2626;
}

.yellow {
  background: #facc15;
}

.black {
  background: #1f2937;
}

.color-card h4 {
  color: #0b3d91;

  font-size: 18px;
}

/*==========================================================
                MOBILE PRODUCT FIX
==========================================================*/

@media (max-width: 768px) {
  .product-image img,
  .product-card img {
    height: 240px;
  }

  .product-content {
    padding: 25px;
  }

  .product-card h3,
  .product-content h3 {
    font-size: 24px;
  }

  .product-specs {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .color-grid {
    grid-template-columns: 1fr;
  }

  .color {
    width: 75px;

    height: 75px;
  }
}
.product-card.aos-init.aos-animate {
  padding: 10px;
}