.elementor-1701 .elementor-element.elementor-element-4ef7348{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:25px 25px 25px 25px;--padding-top:3%;--padding-bottom:3%;--padding-left:0%;--padding-right:0%;}.elementor-1701 .elementor-element.elementor-element-4ef7348.e-con:hover{--e-con-transform-scale:1.05;}.elementor-1701 .elementor-element.elementor-element-f4e4d2a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:0.17;--border-radius:25px 25px 25px 25px;}.elementor-1701 .elementor-element.elementor-element-f4e4d2a::before, .elementor-1701 .elementor-element.elementor-element-f4e4d2a > .elementor-background-video-container::before, .elementor-1701 .elementor-element.elementor-element-f4e4d2a > .e-con-inner > .elementor-background-video-container::before, .elementor-1701 .elementor-element.elementor-element-f4e4d2a > .elementor-background-slideshow::before, .elementor-1701 .elementor-element.elementor-element-f4e4d2a > .e-con-inner > .elementor-background-slideshow::before, .elementor-1701 .elementor-element.elementor-element-f4e4d2a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://visionpulse.ae/wp-content/uploads/2025/06/Grey-Wave@2x.png");--background-overlay:'';background-size:cover;}.elementor-1701 .elementor-element.elementor-element-fcaf668{--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-1701 .elementor-element.elementor-element-f18816c{text-align:left;}.elementor-1701 .elementor-element.elementor-element-f18816c .elementor-heading-title{font-family:"Coder", Sans-serif;font-size:2.4em;font-weight:400;text-transform:capitalize;line-height:1.4em;color:var( --e-global-color-f74a39a );}.elementor-1701 .elementor-element.elementor-element-fb6e68c{--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-1701 .elementor-element.elementor-element-10e86e3 .elementor-heading-title{font-family:"Coder", Sans-serif;font-size:1.4em;font-weight:400;line-height:1.8em;letter-spacing:0.4px;color:var( --e-global-color-primary );}.elementor-1701 .elementor-element.elementor-element-e946380 .elementor-heading-title{font-family:"Cairo", Sans-serif;font-size:1.1em;font-weight:400;line-height:1.8em;letter-spacing:0.4px;color:var( --e-global-color-f74a39a );}.elementor-1701 .elementor-element.elementor-element-ab57c4a{--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-1701 .elementor-element.elementor-element-200a20c .elementor-heading-title{font-family:"Coder", Sans-serif;font-size:1.4em;font-weight:400;line-height:1.8em;letter-spacing:0.4px;color:var( --e-global-color-primary );}.elementor-1701 .elementor-element.elementor-element-19f6472 .elementor-heading-title{font-family:"Cairo", Sans-serif;font-size:1.1em;font-weight:400;line-height:1.8em;letter-spacing:0.4px;color:var( --e-global-color-f74a39a );}.elementor-1701 .elementor-element.elementor-element-2cc0d1d{--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-1701 .elementor-element.elementor-element-06ab9d1 .elementor-heading-title{font-family:"Coder", Sans-serif;font-size:1.4em;font-weight:400;line-height:1.8em;letter-spacing:0.4px;color:var( --e-global-color-text );}.elementor-1701 .elementor-element.elementor-element-d24c77f .elementor-button{background-color:#02010100;font-family:"Coder", Sans-serif;font-size:30px;font-weight:400;text-transform:capitalize;padding:0px 0px 0px 0px;}.elementor-1701 .elementor-element.elementor-element-6b729f6{--display:flex;--justify-content:center;}.elementor-1701 .elementor-element.elementor-element-76b597d > .elementor-widget-container{margin:0% -46% 0% 0%;}.elementor-1701 .elementor-element.elementor-element-76b597d img{width:100%;}@media(min-width:768px){.elementor-1701 .elementor-element.elementor-element-fcaf668{--width:100%;}.elementor-1701 .elementor-element.elementor-element-6b729f6{--width:50%;}}@media(max-width:767px){.elementor-1701 .elementor-element.elementor-element-4ef7348.e-con:hover{--e-con-transform-scale:1;}.elementor-1701 .elementor-element.elementor-element-4ef7348{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-1701 .elementor-element.elementor-element-f4e4d2a{--width:100%;}.elementor-1701 .elementor-element.elementor-element-f18816c .elementor-heading-title{font-size:1.5em;}.elementor-1701 .elementor-element.elementor-element-10e86e3 .elementor-heading-title{font-size:1em;}.elementor-1701 .elementor-element.elementor-element-e946380 .elementor-heading-title{font-size:1em;}.elementor-1701 .elementor-element.elementor-element-200a20c .elementor-heading-title{font-size:1em;}.elementor-1701 .elementor-element.elementor-element-19f6472 .elementor-heading-title{font-size:1em;}.elementor-1701 .elementor-element.elementor-element-06ab9d1 .elementor-heading-title{font-size:1em;}.elementor-1701 .elementor-element.elementor-element-d24c77f .elementor-button{font-size:1.8em;}.elementor-1701 .elementor-element.elementor-element-76b597d img{width:250px;}}/* Start custom CSS for container, class: .elementor-element-4ef7348 */.product-card-parent { width:50vw; perspective: 1500px; /* This creates the 3D space */ } .product-card { position: relative; width: 100%; background: linear-gradient(164deg,rgba(2, 47, 50, 1) 0%, rgba(2, 47, 50, 1) 30%, rgba(2, 47, 50, 1) 50%, rgba(2, 47, 50, 1) 61%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 1) 95%); box-shadow:0 10px 20px rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.2); /* This is CRUCIAL for the 3D effect to work on child elements */ transform-style: preserve-3d; /* Smooth transition for the rotation */ transition: transform 0.6s cubic-bezier(0.23, 1, 0.320, 1), background 0.4s ease-in-out;; } /* This is the main rotation effect on the card */ .product-card-parent:hover .product-card { background: linear-gradient(-30deg,rgba(2, 47, 50, 1) 0%, rgba(2, 47, 50, 1) 30%, rgba(2, 47, 50, 1) 50%, rgba(2, 47, 50, 1) 61%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 1) 95%); transform: rotate3d(1, 1, 0, 30deg); box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px; } /* STEP 3: The Text Content Wrapper A container inside the card to hold all your text widgets. */ .card-text-content { position: relative; /* Keeps it in the flow */ padding: 40px 30px 0px 30px; color: white; /* Pushes the text forward in the 3D space to give it depth */ transform: translateZ(40px); } /* Your original text styling */ .card-text-content .brand-logo { font-weight: 900; font-size: 1.2rem; letter-spacing: 2px; } .card-text-content .series-title { font-weight: 900; font-size: 3.5rem; line-height: 1; margin: 10px 0; } .card-text-content .feature-title { color: #33E5E4; font-size: 1.1rem; margin: 20px 0 0 0; } .card-text-content .feature-desc { font-size: 0.8rem; margin: 5px 0 0 0; opacity: 0.8; } .card-text-content .price { font-size: 1.2rem; font-weight: 700; color: #33E5E4; margin-top: 0px; } /* NEW: Explore Button Styling */ .explore-button { text-decoration: none; font-weight: 700; border-radius: 5px; opacity: 0; /* Hidden by default */ transform: translateY(20px); /* Positioned lower by default */ transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease; /* Smooth fade/slide transition with a delay */ } /* NEW: Show button on hover */ .product-card-parent:hover .explore-button { opacity: 1; transform: translateY(0); } /* STEP 4: The Product Image Wrapper A separate container inside the card, holding just the image widget. This is the magic part that will be counter-rotated. */ .product-image-wrapper { width:70%; /* Crucial: Must have the same transition timing as the card */ transition: transform 0.6s cubic-bezier(0.23, 1, 0.320, 1); /* Push the image far forward in the 3D space so it floats in front */ transform: translateZ(120px); } .product-image-wrapper img { width: 100%; /* Adds a nice shadow to the transparent PNG */ filter: drop-shadow(0 30px 20px rgba(0,0,0,0.4)); } /* STEP 5: The Counter-Rotation When the parent is hovered, we apply the OPPOSITE rotation to the image. */ .product-card-parent:hover .product-image-wrapper { /* The card rotates by '30deg'. We rotate the image by '-30deg'. This cancels the rotation, making the image look stationary. We must keep the original translateZ value. */ transform: translateZ(120px) translateY(+50px) rotate3d(1, 1, 0, -30deg); } @media only screen and (max-width: 900px) { .product-card-parent { width:90vw; perspective: 1500px; /* This creates the 3D space */ } .product-card, .product-image-wrapper, .product-card-parent:hover .product-card, .product-card-parent:hover .product-image-wrapper { transform: none !important; /* flat, no tilt s */ transition: none !important; /* no slow spin/return */ box-shadow: none !important; /* drop the deep shadow */ } /* the card no longer needs a 3-D context */ .product-card { transform-style: flat !important; } /* always show the call-to-action */ .explore-button { opacity: 1 !important; /* fully visible */ transform: none !important; /* no slide-up effect */ transition: none !important; } }/* End custom CSS */