.carousel-container {
	position: relative;
	width: 100%;
	height: auto;
	perspective: 1300px;
}

.carousel {
    width: 74vw;
    height: auto;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1300px;
    top: 4vw;
    /* border: 1px solid white; */
    transform: scale(0.9) !important;
}

.Recommended-Products-card {
    background-color: #96B7C8;
    color: white;
    border-radius: 1vw;
    position: absolute;
    top: 60%;
    left: 50%;
    transform-style: preserve-3d;
    transition: transform 1s, opacity 1s;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1.5vw;
    transform-origin: center;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
}


.Recommended-Products-card.active {
    transform: translateX(-50%) translateY(-50%) translateZ(260px);
    opacity: 1;
    visibility: visible;
    z-index: 10;
    /* background: linear-gradient(to bottom, #e6eef2 0%, #b7c9d6 100%); */
    /* or alternatively with more color stops for more control: */
    /* background: linear-gradient(
        to center,
        #e6eef2 0%,
        #d1dfe8 0%,
        #b7c9d6 100%
    ); */

	background:#96B7C8;
    color: black; /* Since the background is lighter, black text will be more readable */
    border-radius: 16px; /* Adding rounded corners to match the image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    height: 24vw;
}

.Recommended-Products-card.left {
	transform: translateX(calc(-70% - 10vw)) translateY(-50%) rotateY(0deg) translateZ(140px); /* Converted to vw */
	opacity: 1;
	visibility: visible;
	z-index: 5;
	background: #709297;
	height:23vw;
}

.Recommended-Products-card.right {
	transform: translateX(calc(-30% + 10vw)) translateY(-50%) rotateY(0deg) translateZ(140px); /* Converted to vw */
	opacity: 1;
	visibility: visible;
	z-index: 5;
	background: #709297;
		height:23vw;
}

.Recommended-Products-card.left-hidden,
.Recommended-Products-card.right-hidden {
	transform: translateX(calc(-93% - 20vw)) translateY(-50%) translateZ(0); /* Converted to vw */
	opacity: 1;
	visibility: visible;
	z-index: 1;
	background-color: #3E4044;
	color: white;
}

.Recommended-Products-card.right-hidden {
	transform: translateX(calc(-6% + 20vw)) translateY(-50%) translateZ(0); /* Converted to vw */
}

.Recommended-Products-card.left.active {
	transform: translateX(calc(-50% - 7.5vw)) translateY(-50%) rotateY(15deg) translateZ(15vw) !important; /* Converted to vw */
}

.Recommended-Products-card.right.active {
	transform: translateX(calc(-50% + 7.5vw)) translateY(-50%) rotateY(-15deg) translateZ(15vw) !important; /* Converted to vw */
}

.Recommended-Products-card.left-hidden.active-hidden {
	transform: translateX(calc(-50% - 11.5vw)) translateY(-50%) translateZ(0) !important; /* Converted to vw */
}

.Recommended-Products-card.right-hidden.active-hidden {
	transform: translateX(calc(-50% + 11.5vw)) translateY(-50%) translateZ(0) !important; Converted to vw
}

.detail h3 {
    text-align: center;
    font-size: 1.2vw;
    margin-bottom: 1.3vw;
    color: white;
    width: 17vw;
}

.img-container img {
	height: auto;
	width: 15vw; /* Converted to vw for responsive image sizing */
}

.product-btn {
  
    font-size: 1vw;
    color: white;
    background-color: #ff0f39;
    border-radius: 0.3vw;
    padding: 0.5vw 4vw;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    background-image: linear-gradient(to right, #050a30 50%, #ff0f39 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.3s ease;
}

.product-btn:hover {
    background-position: left bottom; /* Triggers the slide animation */
    color: white; /* Changes text color on hover */
    border-color: #fff; /* Optional: Matches border to text color */
}



.Recommended-Products-card.active .product-btn {
	background-color: #ff0f39 !important;
}

.card.active .product-btn {
	background-color: #ff0f39;
	border: none;
	color: black;
}
.detail {
    height: fit-content;
    text-align: center;
    position: relative;
    padding: 40px 10px 20px 10px;
    display: flex;
    flex-direction: column;
}

.card-title-btn {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}