/* Main Product Image Slider */
    .main-slider {
        width: 100%;
        max-width: 500px;
        margin: auto;
    }
    .main-slider .swiper-slide img {
        width: 100%;
        border-radius: 10px;
    }

    /* Thumbnail Slider */
    .thumb-slider {
        width: 100%;
        max-width: 500px;
        margin: auto;
        margin-top: 10px;
    }
    .thumb-slider .swiper-slide {
        width: 100px;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3s;
    }
    .thumb-slider .swiper-slide-thumb-active {
        opacity: 1;
    }
    .thumb-slider .swiper-slide img {
        width: 100%;
        border-radius: 5px;
    }

    /* Navigation Buttons */
    .swiper-button-next,
    .swiper-button-prev {
        font-size: 5px; /* Adjust the size as needed (e.g., smaller than default) */
    width: 5px; /* Reduce the width of the arrow */
    height: 5px; /* Reduce the height of the arrow */
    line-height: 5px; /* Center the arrow vertically */
        color: #8f8c8c;
     
        
    }

   
    .price {
            font-weight: bold;
            font-size: 18px;
            color: black;
        }
        .original-price {
            text-decoration: line-through;
            color: gray;
            font-size: 16px;
        }
        .discount {
            color: green;
            font-size: 16px;
        }
        .badge-container {
            display: flex;
            flex-direction: column;
            align-items: start  ;
            gap: 5px;
        }

        .discount-badge {
            background: linear-gradient(to bottom, #ffb3e6, #ffffff);
            color: purple;
            font-weight: bold;
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 12px;
            border: 2px solid green;
            text-align: center;
        }

        .weight-badge {
            background-color: #935f0f;
            color: white;
            font-weight: bold;
            font-size: 16px;
            padding: 6px 14px;
            border-radius: 15px;
            text-align: center;
        }
        .rating-container {
            display: flex;
            align-items: center;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }

        .star {
            color: orange;
            font-size: 18px;
            margin-right: 5px;
        }

        .rating {
            color: orange;
            font-weight: bold;
            margin-right: 8px;
        }

        .verified-badge {
            color: #1e90ff;
            font-size: 18px;
            margin-right: 5px;
        }

        .reviews {
            color: purple;
            font-weight: bold;
            text-decoration: none;
        }

        .reviews:hover {
            text-decoration: underline;
        }
        .heading{
            font-size: 55px;
            margin-top: -150px;
        }
        .tra-black--hover-1{
            width: 50%;
            font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
    padding: 13px 34px 10px;
    border: 1px solid transparent;
            display: none;
        }
        @media (max-width: 768px) { /* Adjust max-width as needed */
    a.btn.violet-red--btn.tra-black--hover {
        margin-bottom: 20px;
        margin-top: 10px;
        display: none;
    }
    .heading{
        font-size: 2rem;
            margin-top: 10px;
        }
    
}

@media (max-width: 768px) { /* Adjust max-width as needed */
    a.btn.violet-red--btn.tra-black--hover-1 {
        margin-bottom: 20px;
        margin-top: 10px;
        display: block;
    }

    
}
@media (max-width: 1024px) {
    a.btn.violet-red--btn.tra-black--hover {
        margin-bottom: 15px; /* Slightly reduced margin for tablet */
        margin-top: 8px;
        display: inline-block; /* Keep visible on tablets */
    }

    .heading {
        font-size: 2rem; /* Slightly smaller for tablets */
        margin-top: 12px;
    }
}

/* Mobile screens (up to 768px) */
@media (max-width: 768px) {
    a.btn.violet-red--btn.tra-black--hover {
        margin-bottom: 20px;
        margin-top: 10px;
        display: none; /* Hidden on mobile as per your original code */
    }

    .heading {
        font-size: 2rem; /* Smaller font for mobile */
        margin-top: 10px;
    }
}

/* Smaller mobile screens (up to 480px) */
@media (max-width: 480px) {
    a.btn.violet-red--btn.tra-black--hover {
        margin-bottom: 15px; /* Adjust for very small screens */
        margin-top: 5px;
        display: none; /* Still hidden */
    }

    .heading {
        font-size: 2rem; /* Even smaller for small mobile screens */
        margin-top: 8px;
    }
}
.content-full-1 {
            display: none;
        }

.content-full-1.active {
            display: block;
        }

        .content-full-2 {
            display: none;
        }

.content-full-2.active {
            display: block;
        }

        .content-full-3 {
            display: none;
        }

.content-full-3.active {
            display: block;
        }

        /* Button styling */
        .toggle-btn {
            background-color: #935F0F;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 10px;
            border-radius: 5px;
            font-size: 16px;
        }

        .toggle-btn:hover {
            background-color: #935F0F;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .content-container {
                padding: 0 15px;
            }

            .toggle-btn {
                font-size: 14px;
                padding: 8px 16px;
            }
        }