.elementor-425 .elementor-element.elementor-element-96219ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--overlay-opacity:0.5;--padding-top:2%;--padding-bottom:0%;--padding-left:7%;--padding-right:7%;}.elementor-425 .elementor-element.elementor-element-96219ef:not(.elementor-motion-effects-element-type-background), .elementor-425 .elementor-element.elementor-element-96219ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ayurvedawala.com/wp-content/uploads/2026/08/Backgound-image.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-425 .elementor-element.elementor-element-96219ef::before, .elementor-425 .elementor-element.elementor-element-96219ef > .elementor-background-video-container::before, .elementor-425 .elementor-element.elementor-element-96219ef > .e-con-inner > .elementor-background-video-container::before, .elementor-425 .elementor-element.elementor-element-96219ef > .elementor-background-slideshow::before, .elementor-425 .elementor-element.elementor-element-96219ef > .e-con-inner > .elementor-background-slideshow::before, .elementor-425 .elementor-element.elementor-element-96219ef > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-425 .elementor-element.elementor-element-ad90abb{--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;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#0F301B;--border-color:#0F301B;--padding-top:0%;--padding-bottom:3%;--padding-left:0%;--padding-right:0%;}.elementor-425 .elementor-element.elementor-element-5b0f7fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:2%;--padding-right:15%;}.elementor-425 .elementor-element.elementor-element-5b0f7fb.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-425 .elementor-element.elementor-element-118c08c{--divider-border-style:solid;--divider-color:var( --e-global-color-secondary );--divider-border-width:2px;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider-separator{width:40%;margin:0 auto;margin-left:0;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider__text{color:#24402c;font-family:"EB Garamond", Sans-serif;font-size:16px;font-weight:500;}.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-425 .elementor-element.elementor-element-6f867c8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;padding:0px 0px 0px 0px;}.elementor-425 .elementor-element.elementor-element-6f867c8 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:60px;font-weight:600;line-height:1.18em;letter-spacing:0.2px;color:#24402c;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-425 .elementor-element.elementor-element-96b9cd8{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;padding:0px 0px 0px 0px;font-family:"EB Garamond", Sans-serif;font-size:20px;font-weight:500;color:var( --e-global-color-text );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-425 .elementor-element.elementor-element-b18e1b0 .elementor-button{background-color:#24402c;font-family:"EB Garamond", Sans-serif;font-size:18px;text-decoration:none;line-height:1.6em;letter-spacing:0.3px;fill:#f3e7c9;color:#f3e7c9;padding:13px 26px 13px 26px;}.elementor-425 .elementor-element.elementor-element-b18e1b0{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--e-transform-transition-duration:1000ms;border-radius:4px 4px 4px 4px;}.elementor-425 .elementor-element.elementor-element-b18e1b0:hover{--e-transform-translateX:10px;}.elementor-425 .elementor-element.elementor-element-b18e1b0 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-425 .elementor-element.elementor-element-b18e1b0 .elementor-button .elementor-button-content-wrapper{gap:15px;}.elementor-425 .elementor-element.elementor-element-2ab84e1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0%;--margin-bottom:0%;--margin-left:-9%;--margin-right:-6%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-425 .elementor-element.elementor-element-8eed460{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:3%;--padding-bottom:3%;--padding-left:3%;--padding-right:3%;}.elementor-425 .elementor-element.elementor-element-8eed460:not(.elementor-motion-effects-element-type-background), .elementor-425 .elementor-element.elementor-element-8eed460 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ayurvedawala.com/wp-content/uploads/2026/08/Backgound-image.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-425 .elementor-element.elementor-element-509efd0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-425 .elementor-element.elementor-element-147a5b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--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-425 .elementor-element.elementor-element-147a5b4.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-425 .elementor-element.elementor-element-8c26a55{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-425 .elementor-element.elementor-element-8c26a55 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:45px;font-weight:600;line-height:1.18em;letter-spacing:0.2px;color:#24402c;}.elementor-425 .elementor-element.elementor-element-74972af{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;padding:0px 0px 0px 0px;text-align:center;font-family:"EB Garamond", Sans-serif;font-size:20px;font-weight:500;color:var( --e-global-color-secondary );}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-425 .elementor-element.elementor-element-97186ae{--grid-columns:4;--load-more—spacing:50px;--load-more-button-align:center;}.elementor-425 .elementor-element.elementor-element-97186ae .elementor-button{background-color:var( --e-global-color-secondary );fill:var( --e-global-color-accent );color:var( --e-global-color-accent );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-425 .elementor-element.elementor-element-ad90abb{--width:100%;}.elementor-425 .elementor-element.elementor-element-5b0f7fb{--width:65%;}.elementor-425 .elementor-element.elementor-element-2ab84e1{--width:100%;}.elementor-425 .elementor-element.elementor-element-8eed460{--content-width:1350px;}.elementor-425 .elementor-element.elementor-element-147a5b4{--width:620px;}}@media(max-width:1024px) and (min-width:768px){.elementor-425 .elementor-element.elementor-element-5b0f7fb{--width:100%;}}@media(max-width:1024px){.elementor-425 .elementor-element.elementor-element-ad90abb{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-425 .elementor-element.elementor-element-ad90abb.e-con{--align-self:center;}.elementor-425 .elementor-element.elementor-element-5b0f7fb{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider-separator{width:43%;margin:0 auto;margin-center:0;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider{text-align:center;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider__text{font-size:16px;}.elementor-425 .elementor-element.elementor-element-6f867c8{text-align:center;}.elementor-425 .elementor-element.elementor-element-6f867c8 .elementor-heading-title{font-size:33.6px;}.elementor-425 .elementor-element.elementor-element-96b9cd8{text-align:center;}.elementor-425 .elementor-element.elementor-element-b18e1b0.elementor-element{--align-self:center;}.elementor-425 .elementor-element.elementor-element-2ab84e1{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-425 .elementor-element.elementor-element-509efd0.e-con{--align-self:center;}.elementor-425 .elementor-element.elementor-element-8c26a55 .elementor-heading-title{font-size:33.6px;}.elementor-425 .elementor-element.elementor-element-74972af{width:var( --container-widget-width, 600px );max-width:600px;--container-widget-width:600px;--container-widget-flex-grow:0;text-align:center;}.elementor-425 .elementor-element.elementor-element-74972af.elementor-element{--align-self:center;}.elementor-425 .elementor-element.elementor-element-97186ae{--grid-columns:2;}}@media(max-width:767px){.elementor-425 .elementor-element.elementor-element-96219ef:not(.elementor-motion-effects-element-type-background), .elementor-425 .elementor-element.elementor-element-96219ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top center;}.elementor-425 .elementor-element.elementor-element-96219ef{--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-425 .elementor-element.elementor-element-ad90abb{border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-425 .elementor-element.elementor-element-ad90abb.e-con{--align-self:center;}.elementor-425 .elementor-element.elementor-element-5b0f7fb{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider-separator{width:65%;margin:0 auto;margin-center:0;}.elementor-425 .elementor-element.elementor-element-118c08c .elementor-divider{text-align:center;}.elementor-425 .elementor-element.elementor-element-6f867c8.elementor-element{--align-self:center;}.elementor-425 .elementor-element.elementor-element-6f867c8{text-align:center;}.elementor-425 .elementor-element.elementor-element-6f867c8 .elementor-heading-title{font-size:30px;}.elementor-425 .elementor-element.elementor-element-96b9cd8.elementor-element{--align-self:center;}.elementor-425 .elementor-element.elementor-element-96b9cd8{text-align:center;font-size:18px;}.elementor-425 .elementor-element.elementor-element-2ab84e1{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-425 .elementor-element.elementor-element-8eed460{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-425 .elementor-element.elementor-element-509efd0.e-con{--align-self:center;}.elementor-425 .elementor-element.elementor-element-8c26a55{text-align:center;}.elementor-425 .elementor-element.elementor-element-8c26a55 .elementor-heading-title{font-size:30px;}.elementor-425 .elementor-element.elementor-element-74972af.elementor-element{--align-self:center;}.elementor-425 .elementor-element.elementor-element-74972af{text-align:center;font-size:18px;}.elementor-425 .elementor-element.elementor-element-97186ae{--grid-columns:1;}}/* Start custom CSS for container, class: .elementor-element-8eed460 *//* ========================================================= AYURVEDAWALA — PRODUCTS SECTION ANIMATION + CLEAN RESPONSIVE LAYOUT ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .av-product-card { background: transparent !important; border: 1px solid rgba(160, 112, 43, 0.34); } .av-products { position: relative; overflow: hidden; isolation: isolate; } /* ========================================================= GOLDEN BACKGROUND GLOW ========================================================= */ .av-products::before { content: ""; position: absolute; width: 600px; height: 600px; left: 50%; top: 45%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(190, 145, 65, .13) 0%, rgba(190, 145, 65, .05) 40%, transparent 70% ); pointer-events: none; z-index: -1; animation: avProductGlow 8s ease-in-out infinite; } @keyframes avProductGlow { 0%, 100% { transform: translate(-50%, -50%) scale(.95); opacity: .55; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } } /* ========================================================= SECTION HEADER ========================================================= */ .av-products-header { width: 100%; text-align: center; margin-left: auto; margin-right: auto; animation: avProductsHeader 1s cubic-bezier(.22,.61,.36,1) both; } @keyframes avProductsHeader { from { opacity: 0; transform: translateY(45px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PRODUCTS LABEL ========================================================= */ .av-products-label { opacity: 0; animation: avFadeUp .7s ease forwards; animation-delay: .15s; } /* ========================================================= ORNAMENTAL DIVIDER ========================================================= */ .av-products-divider { transform: scaleX(0); transform-origin: center; animation: avDividerGrow 1s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: .3s; } @keyframes avDividerGrow { to { transform: scaleX(1); } } /* ========================================================= MAIN TITLE ========================================================= */ .av-products-title { opacity: 0; margin-left: auto; margin-right: auto; animation: avTitleReveal 1s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: .4s; } @keyframes avTitleReveal { from { opacity: 0; transform: translateY(30px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ========================================================= DESCRIPTION ========================================================= */ .av-products-description { max-width: 760px; margin-left: auto; margin-right: auto; opacity: 0; animation: avFadeUp .9s ease forwards; animation-delay: .65s; } @keyframes avFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PRODUCTS SLIDER AREA ========================================================= */ .av-products-slider { position: relative; width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 55px; padding-right: 55px; box-sizing: border-box; } /* ========================================================= FOUR CARD LAYOUT ========================================================= */ .av-products-slider .av-product-card { width: 100%; min-width: 0; box-sizing: border-box; } /* If av-products-slider is a normal Elementor container, this creates the 4-column desktop layout. */ .av-products-slider { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } /* ========================================================= PRODUCT CARD ========================================================= */ .av-product-card { position: relative; box-sizing: border-box; width: 100%; min-width: 0; min-height: 430px; height: 430px; padding: 18px 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start; opacity: 0; background: rgba(255, 247, 222, .42); border: 1px solid rgba(160,112,43,.34); border-radius: 11px; overflow: hidden; /* VERY IMPORTANT: prevents the diagonal shine from creating unwanted lines. */ animation: avCardReveal .9s cubic-bezier(.22,.61,.36,1) forwards; transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease; } /* ========================================================= CARD STAGGER ========================================================= */ .av-product-card:nth-child(1) { animation-delay: .75s; } .av-product-card:nth-child(2) { animation-delay: .9s; } .av-product-card:nth-child(3) { animation-delay: 1.05s; } .av-product-card:nth-child(4) { animation-delay: 1.2s; } /* ========================================================= CARD REVEAL ========================================================= */ @keyframes avCardReveal { from { opacity: 0; transform: translateY(55px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= CARD HOVER ========================================================= */ .av-product-card:hover { transform: translateY(-10px); border-color: rgba(181,138,69,.7); box-shadow: 0 18px 40px rgba(75,48,18,.16); } /* ========================================================= PRODUCT IMAGE AREA ========================================================= */ .av-product-image { position: relative; width: 100%; height: 195px; min-height: 195px; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; padding: 0; box-sizing: border-box; animation: avProductFloat1 5s ease-in-out infinite; transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease; } /* ========================================================= ACTUAL PRODUCT IMAGE ========================================================= */ .av-product-image img { display: block; width: auto !important; height: 175px !important; max-width: 100% !important; max-height: 175px !important; object-fit: contain; margin: 0 auto; transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease; } /* ========================================================= IMAGE HOVER ========================================================= */ .av-product-card:hover .av-product-image { transform: translateY(-8px) scale(1.055) rotate(-1deg); filter: drop-shadow( 0 12px 12px rgba(67,45,16,.15) ); } /* ========================================================= DIFFERENT FLOATING SPEED ========================================================= */ .av-product-card:nth-child(1) .av-product-image { animation: avProductFloat1 5s ease-in-out infinite; } .av-product-card:nth-child(2) .av-product-image { animation: avProductFloat2 5.5s ease-in-out infinite; } .av-product-card:nth-child(3) .av-product-image { animation: avProductFloat1 6s ease-in-out infinite; } .av-product-card:nth-child(4) .av-product-image { animation: avProductFloat2 5.2s ease-in-out infinite; } @keyframes avProductFloat1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes avProductFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================================================= PRODUCT TITLE ========================================================= */ .av-product-title { width: 100%; margin: 5px 0 8px; padding: 0; text-align: center; transition: color .3s ease, transform .3s ease; } .av-product-card:hover .av-product-title { color: #285B45; transform: translateY(-2px); } /* ========================================================= PRODUCT DESCRIPTION ========================================================= */ .av-product-description { width: 100%; max-width: 245px; margin: 0 auto; text-align: center; line-height: 1.6; } /* ========================================================= SHOP BUTTON AREA ========================================================= */ .av-product-button { margin-top: auto; padding-top: 12px; padding-bottom: 2px; } /* ========================================================= SHOP BUTTON ========================================================= */ .av-product-button .elementor-button { position: relative; background: transparent !important; color: #5b421f !important; border: none !important; box-shadow: none !important; padding: 5px 0 !important; transition: color .3s ease, transform .3s ease; } .av-product-button .elementor-button:hover { color: #173F32 !important; transform: translateX(5px); } /* ========================================================= BUTTON GOLD UNDERLINE ========================================================= */ .av-product-button .elementor-button::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 0; height: 1px; background: #B58A45; transition: width .4s ease; } .av-product-button .elementor-button:hover::after { width: 100%; } /* ========================================================= REMOVE THE OLD DIAGONAL SHINE ========================================================= */ /* THIS IS THE IMPORTANT FIX. Your previous ::before creates the diagonal line visible across the cards. */ .av-product-card::before { content: none !important; } .av-product-card::after { content: none !important; } /* ========================================================= ARROWS ========================================================= */ .av-product-prev, .av-product-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px !important; height: 38px !important; min-width: 38px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; transition: transform .3s ease, background .3s ease, box-shadow .3s ease; } /* LEFT */ .av-product-prev { left: 5px; animation: avArrowPulse 3s ease-in-out infinite; } /* RIGHT */ .av-product-next { right: 5px; animation: avArrowPulse 3s ease-in-out infinite 1.5s; } /* ========================================================= ARROW HOVER ========================================================= */ .av-product-prev:hover, .av-product-next:hover { transform: translateY(-50%) scale(1.12); background: #173F32; color: #fff5d8; box-shadow: 0 8px 20px rgba(65,42,15,.18); } /* ========================================================= ARROW PULSE ========================================================= */ @keyframes avArrowPulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.06); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .av-products-slider { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-left: 50px; padding-right: 50px; } .av-product-card { min-height: 430px; height: 430px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .av-products { padding-left: 20px !important; padding-right: 20px !important; } .av-products-title { font-size: 36px !important; line-height: 1.15 !important; } .av-products-slider { display: grid; grid-template-columns: 1fr; gap: 18px; padding-left: 35px; padding-right: 35px; } .av-product-card { width: 100%; min-height: 410px; height: 410px; padding: 18px 18px 22px; } .av-product-image { height: 175px; min-height: 175px; } .av-product-image img { height: 160px !important; max-height: 160px !important; } .av-product-prev { left: 0; } .av-product-next { right: 0; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .av-products *, .av-products::before { animation: none !important; transition: none !important; } }/* ========================================================= AYURVEDAWALA — PRODUCTS SECTION ANIMATION + CLEAN RESPONSIVE LAYOUT ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .av-products { position: relative; overflow: hidden; isolation: isolate; } /* ========================================================= GOLDEN BACKGROUND GLOW ========================================================= */ .av-products::before { content: ""; position: absolute; width: 600px; height: 600px; left: 50%; top: 45%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(190, 145, 65, .13) 0%, rgba(190, 145, 65, .05) 40%, transparent 70% ); pointer-events: none; z-index: -1; animation: avProductGlow 8s ease-in-out infinite; } @keyframes avProductGlow { 0%, 100% { transform: translate(-50%, -50%) scale(.95); opacity: .55; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } } /* ========================================================= SECTION HEADER ========================================================= */ .av-products-header { width: 100%; text-align: center; margin-left: auto; margin-right: auto; animation: avProductsHeader 1s cubic-bezier(.22,.61,.36,1) both; } @keyframes avProductsHeader { from { opacity: 0; transform: translateY(45px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PRODUCTS LABEL ========================================================= */ .av-products-label { opacity: 0; animation: avFadeUp .7s ease forwards; animation-delay: .15s; } /* ========================================================= ORNAMENTAL DIVIDER ========================================================= */ .av-products-divider { transform: scaleX(0); transform-origin: center; animation: avDividerGrow 1s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: .3s; } @keyframes avDividerGrow { to { transform: scaleX(1); } } /* ========================================================= MAIN TITLE ========================================================= */ .av-products-title { opacity: 0; margin-left: auto; margin-right: auto; animation: avTitleReveal 1s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: .4s; } @keyframes avTitleReveal { from { opacity: 0; transform: translateY(30px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ========================================================= DESCRIPTION ========================================================= */ .av-products-description { max-width: 760px; margin-left: auto; margin-right: auto; opacity: 0; animation: avFadeUp .9s ease forwards; animation-delay: .65s; } @keyframes avFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PRODUCTS SLIDER AREA ========================================================= */ .av-products-slider { position: relative; width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 55px; padding-right: 55px; box-sizing: border-box; } /* ========================================================= FOUR CARD LAYOUT ========================================================= */ .av-products-slider .av-product-card { width: 100%; min-width: 0; box-sizing: border-box; } /* If av-products-slider is a normal Elementor container, this creates the 4-column desktop layout. */ .av-products-slider { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } /* ========================================================= PRODUCT CARD ========================================================= */ .av-product-card { position: relative; box-sizing: border-box; width: 100%; min-width: 0; min-height: 430px; height: 430px; padding: 18px 20px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-start; opacity: 0; background: rgba(255, 247, 222, .42); border: 1px solid rgba(160,112,43,.34); border-radius: 11px; overflow: hidden; /* VERY IMPORTANT: prevents the diagonal shine from creating unwanted lines. */ animation: avCardReveal .9s cubic-bezier(.22,.61,.36,1) forwards; transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease; } /* ========================================================= CARD STAGGER ========================================================= */ .av-product-card:nth-child(1) { animation-delay: .75s; } .av-product-card:nth-child(2) { animation-delay: .9s; } .av-product-card:nth-child(3) { animation-delay: 1.05s; } .av-product-card:nth-child(4) { animation-delay: 1.2s; } /* ========================================================= CARD REVEAL ========================================================= */ @keyframes avCardReveal { from { opacity: 0; transform: translateY(55px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= CARD HOVER ========================================================= */ .av-product-card:hover { transform: translateY(-10px); border-color: rgba(181,138,69,.7); box-shadow: 0 18px 40px rgba(75,48,18,.16); } /* ========================================================= PRODUCT IMAGE AREA ========================================================= */ .av-product-image { position: relative; width: 100%; height: 195px; min-height: 195px; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; padding: 0; box-sizing: border-box; animation: avProductFloat1 5s ease-in-out infinite; transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease; } /* ========================================================= ACTUAL PRODUCT IMAGE ========================================================= */ .av-product-image img { display: block; width: auto !important; height: 175px !important; max-width: 100% !important; max-height: 175px !important; object-fit: contain; margin: 0 auto; transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .5s ease; } /* ========================================================= IMAGE HOVER ========================================================= */ .av-product-card:hover .av-product-image { transform: translateY(-8px) scale(1.055) rotate(-1deg); filter: drop-shadow( 0 12px 12px rgba(67,45,16,.15) ); } /* ========================================================= DIFFERENT FLOATING SPEED ========================================================= */ .av-product-card:nth-child(1) .av-product-image { animation: avProductFloat1 5s ease-in-out infinite; } .av-product-card:nth-child(2) .av-product-image { animation: avProductFloat2 5.5s ease-in-out infinite; } .av-product-card:nth-child(3) .av-product-image { animation: avProductFloat1 6s ease-in-out infinite; } .av-product-card:nth-child(4) .av-product-image { animation: avProductFloat2 5.2s ease-in-out infinite; } @keyframes avProductFloat1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes avProductFloat2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ========================================================= PRODUCT TITLE ========================================================= */ .av-product-title { width: 100%; margin: 5px 0 8px; padding: 0; text-align: center; transition: color .3s ease, transform .3s ease; } .av-product-card:hover .av-product-title { color: #285B45; transform: translateY(-2px); } /* ========================================================= PRODUCT DESCRIPTION ========================================================= */ .av-product-description { width: 100%; max-width: 245px; margin: 0 auto; text-align: center; line-height: 1.6; } /* ========================================================= SHOP BUTTON AREA ========================================================= */ .av-product-button { margin-top: auto; padding-top: 12px; padding-bottom: 2px; } /* ========================================================= SHOP BUTTON ========================================================= */ .av-product-button .elementor-button { position: relative; background: transparent !important; color: #5b421f !important; border: none !important; box-shadow: none !important; padding: 5px 0 !important; transition: color .3s ease, transform .3s ease; } .av-product-button .elementor-button:hover { color: #173F32 !important; transform: translateX(5px); } /* ========================================================= BUTTON GOLD UNDERLINE ========================================================= */ .av-product-button .elementor-button::after { content: ""; position: absolute; left: 0; bottom: 1px; width: 0; height: 1px; background: #B58A45; transition: width .4s ease; } .av-product-button .elementor-button:hover::after { width: 100%; } /* ========================================================= REMOVE THE OLD DIAGONAL SHINE ========================================================= */ /* THIS IS THE IMPORTANT FIX. Your previous ::before creates the diagonal line visible across the cards. */ .av-product-card::before { content: none !important; } .av-product-card::after { content: none !important; } /* ========================================================= ARROWS ========================================================= */ .av-product-prev, .av-product-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px !important; height: 38px !important; min-width: 38px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; transition: transform .3s ease, background .3s ease, box-shadow .3s ease; } /* LEFT */ .av-product-prev { left: 5px; animation: avArrowPulse 3s ease-in-out infinite; } /* RIGHT */ .av-product-next { right: 5px; animation: avArrowPulse 3s ease-in-out infinite 1.5s; } /* ========================================================= ARROW HOVER ========================================================= */ .av-product-prev:hover, .av-product-next:hover { transform: translateY(-50%) scale(1.12); background: #173F32; color: #fff5d8; box-shadow: 0 8px 20px rgba(65,42,15,.18); } /* ========================================================= ARROW PULSE ========================================================= */ @keyframes avArrowPulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.06); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .av-products-slider { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-left: 50px; padding-right: 50px; } .av-product-card { min-height: 430px; height: 430px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .av-products { padding-left: 20px !important; padding-right: 20px !important; } .av-products-title { font-size: 36px !important; line-height: 1.15 !important; } .av-products-slider { display: grid; grid-template-columns: 1fr; gap: 18px; padding-left: 35px; padding-right: 35px; } .av-product-card { width: 100%; min-height: 410px; height: 410px; padding: 18px 18px 22px; } .av-product-image { height: 175px; min-height: 175px; } .av-product-image img { height: 160px !important; max-height: 160px !important; } .av-product-prev { left: 0; } .av-product-next { right: 0; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .av-products *, .av-products::before { animation: none !important; transition: none !important; } }/* End custom CSS */