* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: Arial, sans-serif;
   }

   body {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
       min-height: 100vh;
       background-color: #f9f9f9;
   }

   .content {
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       padding: 20px;
   }

   .product-container {
       /* display: flex; */
       flex-wrap: wrap;
       width: 100%;
       /* max-width: 1400px; */
       background: #fff;
       padding: 40px;
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       /* max-height: calc(100vh - 120px); */
       overflow-y: auto;
       gap: 20px;
   }

   /* Left Side */
.left-side {
    width: 100%;
    max-width: 550px;
    padding-right: 50px;
        padding-left: 45px;
        
    position: relative;
    border-right: 2px solid #ddd;
    overflow: hidden;
}

.left-side img {
    width: 100%;
    height: auto;
    display: none;
    object-fit: contain;
    border-radius: 8px;
    transition: opacity 0.3s ease-in-out;
}

.left-side img.active {
    display: block;
}


   .prev,
   .next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: rgba(0, 0, 0, 0.6);
       color: #fff;
       padding: 8px;
       cursor: pointer;
       border: none;
       border-radius: 50%;
       font-size: 18px;
       transition: background 0.3s;
   }

   .prev:hover,
   .next:hover {
       background: rgba(0, 0, 0, 0.8);
   }

   .prev {
       left: 10px;
   }

   .next {
       right: 10px;
   }

   /* Right Side */
   .right-side {
       flex: 1;
       padding-left: 40px;
       display: flex;
       flex-direction: column;
       gap: 20px;
   }

   .product-name {
       font-size: 24px;
       font-weight: bold;
       color: #333;
   }

   .product-price {
       font-size: 20px;
       font-weight: bold;
       color: #555;
   }

   .total-price {
       font-size: 20px;
       color: #27ae60;
       font-weight: bold;
   }

   .quantity-container {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: 16px;
       font-weight: bold;
   }

   .quantity-container input {
       width: 70px;
       padding: 5px;
       border: 1px solid #ccc;
       border-radius: 5px;
       text-align: center;
   }

   .buy-button {
       background-color: #e74c3c;
       color: #fff;
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       font-size: 16px;
       transition: background-color 0.3s ease-in-out;
       text-align: center;
       width: fit-content;
   }

   .buy-button:hover {
       background-color: #c0392b;
   }

   .product-description {
       font-size: 16px;
       color: #555;
       line-height: 1.5;
       text-align: justify;
   }

   .addtcart-btn {
       background-color: #e74c3c;
       color: #fff;
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       text-decoration: none;
       font-size: 16px;
       transition: background-color 0.3s ease-in-out;
       text-align: center;
       width: fit-content;
   }

   .addtcart-btn:hover {
       background-color: #c0392b;
   }

   .description {
       display: block;
       margin-top: 10px;
       padding-top: 10px;
       border-top: 2px solid #ddd;
       /* border-radius: 10px; */
   }

   footer {
       width: 100%;
       background-color: #222;
       color: #fff;
   }

   footer .container {
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
   }

   footer .column {
       flex: 1;
       margin: 10px;
       min-width: 200px;
   }

   footer a {
       color: #ffd700;
       /* Match with the existing yellow link color */
       text-decoration: none;
   }

   footer a:hover {
       text-decoration: underline;
   }

   .button {
       display: flex;
       gap: 20px;
   }




   .top-side {
       display: flex;
       padding-bottom: 10px;
       margin: auto;
   }

   .tab-buttons {
       display: flex;
       gap: 20px;
       margin-bottom: 15px;
   }

   .tab-btn {
       padding: 10px 20px;
       border: none;
       font-size: 17px;
       background-color: #eee;
       cursor: pointer;
       border-radius: 5px;
       font-weight: bold;
       transition: 0.3s ease;
   }

   .tab-btn.active {
       background-color: #e74c3c;
       color: white;
   }

   .tab-content {
       display: none;
   }

   .tab-content.active {
       display: block;
   }


   .cdr-file-section {
       padding: 20px;
       border-radius: 12px;
       font-family: 'Segoe UI', sans-serif;
       margin-top: 30px;
   }

   .cdr-file-section h3 {
       font-size: 1.5rem;
       color: #333;
       margin-bottom: 20px;
   }

   .cdr-file-section iframe,
   .cdr-file-section img {
       /* display: block; */
       margin: 0 auto 20px auto;
       border-radius: 8px;
       border: 1px solid #ddd;
       height: auto;
       max-width: 600px;
       min-width: 600px;
       width: 50%;
   }

   .cdr-file-section iframe {
       height: 400px;
   }

   .cdr-file-section p {
       text-align: center;
       font-style: italic;
       color: #777;
       margin-bottom: 20px;
   }

   /* Wrapper to center the button */
   .download-btn-wrapper {
       /* display: flex; */
       justify-content: center;
       margin-top: -10px;
       /* optional spacing tweak */
   }

   /* Animated button */
   .download-btn {
       background-color: #e74c3c;
       color: #fff;
       padding: 10px 25px;
       border: none;
       border-radius: 6px;
       font-size: 1rem;
       cursor: pointer;
       transition: background-color 0.3s ease, transform 0.3s ease;
       box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
   }

   .download-btn:hover {
       background-color: #BD1300FF;
       transform: scale(1.05);
   }

   /* Responsive Design */
   @media (max-width: 1024px) {
       .product-container {
           flex-direction: column;
           align-items: center;
           padding: 30px;
       }

       .top-side {
           display: block;
       }

       .left-side {
           width: 100%;
           padding-right: 0;
           border-right: none;
           min-width: unset;
           max-width: 100%;
           position: relative;
           aspect-ratio: 4 / 3;
           /* ✅ keeps consistent ratio */
           height: auto;
       }

       .right-side {
           padding-left: 0;
           margin-top: 20px;
           width: 100%;
       }

       .cdr-file-section iframe,
       .cdr-file-section img {
           width: 80%;
           max-width: 90%;
           min-width: unset;
       }


   }


   @media (max-width: 600px) {

       .content {
           padding: 10px;
       }

       .top-side {
           display: block;
       }

       .product-container {
           padding: 20px;
       }

       .product-name {
           font-size: 20px;
       }

       .product-price {
           font-size: 16px;
       }

       /* .quantity-container {
        flex-direction: column;
align-items: center;
    } */

       .quantity-container input {
           width: 100%;
           max-width: 80px;
       }

       .buy-button,
       .addtcart-btn {
           width: 100%;
           max-width: 300px;
       }

       .product-description {
           font-size: 14px;
       }

       .cdr-file-section {
           padding: 10px;
           text-align: center;
       }

       .cdr-file-section iframe,
       .cdr-file-section img {
           width: 100%;
           max-width: 100%;
           height: auto;
           border-radius: 10px;
           border: 1px solid #ccc;
       }


       .download-btn {
           width: 90%;
           font-size: 1rem;
       }

       .tab-buttons {
           /* flex-direction: column; */
           gap: 10px;
       }

       .left-side {
           height: 300px;
       }


   }

   .responsive-video {
       position: relative;
       padding-bottom: 300px;
       /* 16:9 aspect ratio */
       padding-top: 30px;
       height: 0;
       overflow: hidden;
   }

   .responsive-video iframe,
   .responsive-video object,
   .responsive-video embed {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       max-width: 500px;
       max-height: 300px;
       height: 100%;
   }


   .share-wrapper {
       position: relative;
       display: inline-block;
   }

   .share-icon-detail {
       background-color: #e74c3c;
       color: #fff;
       padding: 10px 20px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       font-size: 16px;
       transition: background-color 0.3s ease-in-out;
   }

   .share-icon-detail:hover {
       background-color: #c0392b;
   }

   .share-buttons-detail {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       margin-top: 8px;
       background: #fff;
       border-radius: 10px;
       box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
       padding: 10px;
       flex-direction: row;
       gap: 10px;
       z-index: 100;
       animation: fadeIn 0.2s ease-in-out;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .share-buttons-detail button {
       background-color: #fff;
       border: 1px solid #ddd;
       border-radius: 50%;
       padding: 10px;
       font-size: 16px;
       cursor: pointer;
       transition: background-color 0.2s;
       width: 45px;
       height: 45px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
   }

   .share-buttons-detail button:hover {
       background-color: #f5f5f5;
   }

   .share-buttons-detail a {
       text-decoration: none;
   }

   .share-buttons-detail i {
       font-size: 24px;
   }

   .share-buttons-detail button:hover {
       background-color: #f5f5f5;
   }

   .share-buttons-detail i.fa-square-whatsapp {
       color: #25D366;
       font-size: 30px;
   }

   .share-buttons-detail i.fa-square-facebook {
       color: #1877F2;
       font-size: 30px;
   }

   .copy-feedback {
       position: absolute;
       bottom: 20%;
       left: -140%;
       transform: translateX(-40%);
       background-color: black;
       color: white;
       padding: 4px 8px;
       font-size: 16px;
       border-radius: 4px;
       white-space: nowrap;
       display: none;
       z-index: 999;
   }

   .buy-button.disabled {
       cursor: not-allowed;
       opacity: 0.6;
       pointer-events: none;
   }