body {
     margin: 0;
     font-family: 'Poppins', sans-serif;
     color: #222;
 }

 .details-container {
     max-width: 1100px;
     margin: 100px auto;
     display: flex;
     flex-wrap: wrap;
     background: #fff;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
 }

 .details-container:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
 }

 .details-container img {
     width: 50%;
     object-fit: contain;
 }

 .info {
     flex: 1;
     padding: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .info h1 {
     font-size: 2.2rem;
     margin-bottom: 8px;
     color: #111;
 }

 .info h3 {
     font-weight: 500;
     color: #777;
     margin-bottom: 20px;
 }

 .info p {
     line-height: 1.7;
     font-size: 1rem;
     margin-bottom: 30px;
     color: #444;
 }

 .buttons {
     display: flex;
     gap: 15px;
     align-items: center;
 }

 .buy-now {
     background: #25D366;
     color: #fff;
     border: none;
     padding: 12px 28px;
     border-radius: 30px;
     cursor: pointer;
     font-weight: 600;
     font-size: 1rem;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
     transition: background 0.3s ease, transform 0.2s;
 }

 .buy-now:hover {
     background: #1eb75f;
     transform: translateY(-2px);
 }

 .share-btn {
     background: #007bff;
     color: #fff;
     border: none;
     padding: 12px 16px;
     border-radius: 50%;
     cursor: pointer;
     font-size: 1.2rem;
     transition: background 0.3s ease, transform 0.2s;
 }

 .share-btn:hover {
     background: #0056b3;
     transform: scale(1.1);
 }

 .related-products {
     max-width: 1100px;
     margin: 60px auto;
 }

 .related-products h2 {
     text-align: center;
     margin-bottom: 30px;
     color: #333;
 }

 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 25px;
 }

 .product-card {
     background: #fff;
     border-radius: 15px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     text-align: center;
     transition: transform 0.3s;
 }

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

 .product-card img {
     width: 100%;
     height: 200px;
     object-fit: contain;
 }

 .product-card h4 {
     margin: 10px 0 5px;
     font-size: 1.1rem;
     color: #111;
 }

 .product-card p {
     color: #666;
     font-size: 0.9rem;
     margin-bottom: 15px;
 }

 @media (max-width: 768px) {
     .details-container {
         flex-direction: column;
     }

     .details-container img {
         width: 100%;
     }

     .info {
         padding: 30px;
     }
 }