.elementor-17 .elementor-element.elementor-element-c2aa36c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-38ae38c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-f9fe5cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-2f43b56{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-2f43b56.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-17 .elementor-element.elementor-element-3140569{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-9de47f9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:10px 0px 10px 0px;}.elementor-17 .elementor-element.elementor-element-9de47f9{text-align:center;}.elementor-17 .elementor-element.elementor-element-9de47f9 .elementor-heading-title{font-family:"Intro Rust", Sans-serif;font-size:2.6rem;font-weight:600;color:var( --e-global-color-secondary );}.elementor-17 .elementor-element.elementor-element-1542880{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-17 .elementor-element.elementor-element-4278658{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-654486d{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-7751c73 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-style:solid;border-width:0px 0px 0px 0px;border-radius:10px 10px 10px 10px;}.elementor-17 .elementor-element.elementor-element-988f053{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-a9fd0db{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-0149466 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-b4dd9c2{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-5fdb9a5{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-ec17860 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-bdf0ba2{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-3fac0cb{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-9932443 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-9e080fe{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-200dfb2{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-20e6953 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-35d91b4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-e410e54{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-633e596 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-76aa232{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-07f6db0{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-77a4740 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-3cccd31{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-3631a05{--display:flex;--justify-content:flex-end;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17 .elementor-element.elementor-element-f888dbe > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-17 .elementor-element.elementor-element-1542880{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-f9fe5cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-1542880{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}@media(min-width:768px){.elementor-17 .elementor-element.elementor-element-1542880{--content-width:1000px;}}/* Start custom CSS for html, class: .elementor-element-7751c73 *//* Define the animation keyframes */
@keyframes slide-fwd-top {
    0% {
        transform: translateZ(0) translateY(0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(160px) translateY(-20px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        bottom: -50px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Style the container */
.custom-product-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: auto;
}

.product-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
    transition: border 0.3s ease-in-out;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px; /* Ensure space for button */
}

/* Style the main image */
.main-image {
    width: 100%;
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the background image */
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-image: url('https://temptationsuae.com/wp-content/uploads/2024/06/cakeconfetti.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the button */
.custom-button {
    position: absolute;
    bottom: -50px; /* Start position */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 10px;
    background-color: #ff9900; /* Adjust as needed */
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 6ms, bottom 0.3s ease 10ms;
}

/* Hover/tap effects */
.product-wrapper:hover .main-image,
.product-wrapper:active .main-image {
    transform: scale(0.9);
}

.product-wrapper:hover .background-image,
.product-wrapper:active .background-image {
    opacity: 1;
    animation: slide-fwd-top 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms both;
}

.product-wrapper:hover .custom-button,
.product-wrapper:active .custom-button {
    opacity: 1;
    bottom: 10px;
}

/* Custom product container */
.elementor-widget-html .custom-product-container {
    padding-bottom: 0px;
    padding-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Custom button */
.e-grid .product-link .custom-button {
    background-color: transparent;
    border-style: solid;
    border-color: #3b1866;
    border-width: 2px;
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
}

/* Custom product container */
.e-grid .elementor-element .custom-product-container {
    border-style: none;
    border-width: 2px;
    transform: translatex(0px) translatey(0px);
    border-color: #ffd700;
    background-image: linear-gradient(to bottom, rgb(254,253,255) 0%, rgba(204,204,204,0.4) 100%);
}

/* Glow Border Animation */
.product-wrapper {
    position: relative;
}

.product-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid transparent;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none; /* Ensures the border does not interfere with button clicks */
    background: linear-gradient(to right, #BF953F, #FCF6BA, #FBF5B7, #BF953F);
    background-size: 200% 200%;
    background-clip: border-box;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.product-wrapper:hover:before {
    opacity: 1;
    animation: border-glow 4s linear infinite;
}

@keyframes border-glow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0149466 *//* Define the animation keyframes */
@keyframes slide-fwd-top {
    0% {
        transform: translateZ(0) translateY(0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(160px) translateY(-20px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        bottom: -50px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Style the container */
.custom-product-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: auto;
}

.product-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px; /* Ensure space for button */
}

/* Style the main image */
.main-image {
    width: 100%;
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the background image */
.background-image1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-image: url('https://temptationsuae.com/wp-content/uploads/2024/06/Freshly-Baked-hov.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the button */
.custom-button {
    position: absolute;
    bottom: -50px; /* Start position */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 10px;
    background-color: #ff9900; /* Adjust as needed */
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 6ms, bottom 0.3s ease 10ms;
}

/* Hover/tap effects */
.product-wrapper:hover .main-image,
.product-wrapper:active .main-image {
    transform: scale(0.9);
}

.product-wrapper:hover .background-image1,
.product-wrapper:active .background-image1 {
    opacity: 1;
    animation: slide-fwd-top 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms both;
}

.product-wrapper:hover .custom-button,
.product-wrapper:active .custom-button {
    opacity: 1;
    bottom: 5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ec17860 *//* Define the animation keyframes */
@keyframes slide-fwd-top {
    0% {
        transform: translateZ(0) translateY(0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(160px) translateY(-20px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        bottom: -50px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Style the container */
.custom-product-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: auto;
}

.product-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px; /* Ensure space for button */
}

/* Style the main image */
.main-image {
    width: 100%;
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the background image */
.background-image4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-image: url('https://temptationsuae.com/wp-content/uploads/2024/08/splash-water.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the button */
.custom-button {
    position: absolute;
    bottom: -50px; /* Start position */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 10px;
    background-color: #ff9900; /* Adjust as needed */
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 6ms, bottom 0.3s ease 10ms;
}

/* Hover/tap effects */
.product-wrapper:hover .main-image,
.product-wrapper:active .main-image {
    transform: scale(0.9);
}

.product-wrapper:hover .background-image4,
.product-wrapper:active .background-image4 {
    opacity: 1;
    animation: slide-fwd-top 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms both;
}

.product-wrapper:hover .custom-button,
.product-wrapper:active .custom-button {
    opacity: 1;
    bottom: 5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9932443 *//* Define the animation keyframes */
@keyframes slide-fwd-top {
    0% {
        transform: translateZ(0) translateY(0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(160px) translateY(-20px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        bottom: -50px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Style the container */
.custom-product-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: auto;
}

.product-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px; /* Ensure space for button */
}

/* Style the main image */
.main-image {
    width: 100%;
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the background image */
.background-image5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-image: url('https://temptationsuae.com/wp-content/uploads/2024/08/Savoury-suprise.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the button */
.custom-button {
    position: absolute;
    bottom: -50px; /* Start position */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 10px;
    background-color: #ff9900; /* Adjust as needed */
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 6ms, bottom 0.3s ease 10ms;
}

/* Hover/tap effects */
.product-wrapper:hover .main-image,
.product-wrapper:active .main-image {
    transform: scale(0.9);
}

.product-wrapper:hover .background-image5,
.product-wrapper:active .background-image5 {
    opacity: 1;
    animation: slide-fwd-top 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms both;
}

.product-wrapper:hover .custom-button,
.product-wrapper:active .custom-button {
    opacity: 1;
    bottom: 5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-633e596 *//* Define the animation keyframes */
@keyframes slide-fwd-top {
    0% {
        transform: translateZ(0) translateY(0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(160px) translateY(-20px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        bottom: -50px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Style the container */
.custom-product-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: auto;
}

.product-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px; /* Ensure space for button */
}

/* Style the main image */
.main-image {
    width: 100%;
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the background image */
.background-image8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-image: url('https://temptationsuae.com/wp-content/uploads/2024/11/hover-menu-v3.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the button */
.custom-button {
    position: absolute;
    bottom: -50px; /* Start position */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 10px;
    background-color: #ff9900; /* Adjust as needed */
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 6ms, bottom 0.3s ease 10ms;
}

/* Hover/tap effects */
.product-wrapper:hover .main-image,
.product-wrapper:active .main-image {
    transform: scale(0.9);
}

.product-wrapper:hover .background-image8,
.product-wrapper:active .background-image8 {
    opacity: 1;
    animation: slide-fwd-top 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms both;
}

.product-wrapper:hover .custom-button,
.product-wrapper:active .custom-button {
    opacity: 1;
    bottom: 5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-77a4740 *//* Define the animation keyframes */
@keyframes slide-fwd-top {
    0% {
        transform: translateZ(0) translateY(0) rotate(-5deg);
        opacity: 1;
    }
    100% {
        transform: translateZ(160px) translateY(-20px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slide-up {
    0% {
        bottom: -50px;
    }
    100% {
        bottom: 10px;
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Style the container */
.custom-product-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust as needed */
    margin: auto;
}

.product-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: transparent;
    padding: 10px;
    border-radius: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 20px; /* Ensure space for button */
}

/* Style the main image */
.main-image {
    width: 100%;
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the background image */
.background-image7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    background-image: url('https://temptationsuae.com/wp-content/uploads/2024/08/Gifting-surp.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms;
}

/* Style the button */
.custom-button {
    position: absolute;
    bottom: -50px; /* Start position */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    padding: 10px;
    background-color: #ff9900; /* Adjust as needed */
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 3;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease 6ms, bottom 0.3s ease 10ms;
}

/* Hover/tap effects */
.product-wrapper:hover .main-image,
.product-wrapper:active .main-image {
    transform: scale(0.9);
}

.product-wrapper:hover .background-image7,
.product-wrapper:active .background-image7 {
    opacity: 1;
    animation: slide-fwd-top 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 10ms both;
}

.product-wrapper:hover .custom-button,
.product-wrapper:active .custom-button {
    opacity: 1;
    bottom: 5px;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Intro Rust';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://temptationsuae.com/wp-content/uploads/2024/04/IntroRust-Base.woff') format('woff');
}
/* End Custom Fonts CSS */