/* Product Page Specific Styles */
    .product-hero {
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
      padding: 30px 0;
      border-bottom: 1px solid #e1e5e9;
    }

    .product-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin-top: 80px;
    }

    .product-gallery {
      flex: 1 1 400px;
    }

    .main-image {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      margin-bottom: 20px;
      height: 400px;
      object-fit: cover;
    }

    .thumbnail-container {
      display: flex;
      gap: 10px;
    }

    .thumbnail {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.3s;
      object-fit: cover;
    }

    .thumbnail:hover, .thumbnail.active {
      border-color: #1f3a69;
    }

    .product-details {
      flex: 1 1 500px;
    }

    .product-title {
      font-size: 2.2rem;
      color: #1f3a69;
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .product-subtitle {
      color: #666;
      font-size: 1.1rem;
      margin-bottom: 20px;
    }

    .product-highlights {
      margin: 25px 0;
    }

    .highlight-item {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 1rem;
    }

    .highlight-icon {
      color: #1f3a69;
      font-size: 1.2rem;
    }

    /* New Sections */
    .product-section {
      max-width: 1200px;
      margin: 60px auto;
      padding: 0 20px;
    }

    .section-title {
      font-size: 1.8rem;
      color: #1f3a69;
      margin: 40px 0 20px;
      position: relative;
      padding-left: 15px;
    }

    .section-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      height: 80%;
      width: 4px;
      background: #1f3a69;
      border-radius: 4px;
    }

    .features-apps-container {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin: 30px 0;
    }

    .features-section, .apps-section {
      flex: 1 1 400px;
    }

    .feature-box, .app-box {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .feature-title, .app-title {
      font-weight: 600;
      color: #1f3a69;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .feature-title i, .app-title i {
      font-size: 1.1rem;
    }

    .advantages-list {
      list-style-type: none;
      columns: 2;
      column-gap: 30px;
    }

    .advantages-list li {
      padding: 10px 0;
      position: relative;
      padding-left: 25px;
      break-inside: avoid;
    }

    .advantages-list li::before {
      content: "✓";
      color: #1f3a69;
      font-weight: bold;
      position: absolute;
      left: 0;
    }

    /* Responsive Styles */
    @media (max-width: 768px) {
      .product-title {
        font-size: 1.8rem;
      }
      
      .section-title {
        font-size: 1.5rem;
      }
      
      .advantages-list {
        columns: 1;
      }
      
      .features-apps-container {
        flex-direction: column;
      }
    }

    @media (max-width: 480px) {
      .product-title {
        font-size: 1.5rem;
      }
      
      .thumbnail {
        width: 60px;
        height: 60px;
      }
    }

/* Product Variants Section */
.product-variants {
  padding: 50px 20px;
  background: #f9f9f9;
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.variant-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.variant-card:hover {
  transform: translateY(-5px);
}

.variant-image {
  height: 200px;
  overflow: hidden;
}

.variant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.variant-card:hover .variant-image img {
  transform: scale(1.05);
}

.variant-details {
  padding: 20px;
}

.variant-details h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 1.3rem;
}

.variant-details ul {
  list-style: none;
  padding: 0;
}

.variant-details li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: #555;
  position: relative;
  padding-left: 20px;
}

.variant-details li:before {
  content: "•";
  /* color: #e74c3c; */
  font-weight: bold;
  position: absolute;
  left: 0;
}





.long-image-container {
    max-width: 100%;
    overflow-x: auto;
    text-align: center;
    padding: 20px 20px; 

  }

  .long-image-container img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    object-fit: contain;
  }