.elementor-1436 .elementor-element.elementor-element-c91d753{--display:flex;--padding-top:40px;--padding-bottom:40px;--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-1436 .elementor-element.elementor-element-50b1802 img{width:24%;}.elementor-1436 .elementor-element.elementor-element-51c2217{--display:flex;--padding-top:20px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-1436 .elementor-element.elementor-element-987787c{--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;--gap:0px 9px;--row-gap:0px;--column-gap:9px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1436 .elementor-element.elementor-element-987787c.e-con{--align-self:center;}.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-1436 .elementor-element.elementor-element-8c7cf59 .elementor-button{background-color:var( --e-global-color-43f10c9 );fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-8c7cf59 .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-8c7cf59 .elementor-button:focus{background-color:transparent;color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-8c7cf59{border-style:none;}.elementor-1436 .elementor-element.elementor-element-8c7cf59 .elementor-button:hover svg, .elementor-1436 .elementor-element.elementor-element-8c7cf59 .elementor-button:focus svg{fill:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-0387983 .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-0387983 .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-0387983 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-0387983{border-style:none;}.elementor-1436 .elementor-element.elementor-element-73533bc .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-73533bc .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-73533bc .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-73533bc{margin:0px 6px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;border-style:none;}.elementor-1436 .elementor-element.elementor-element-eab32d1 .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-eab32d1 .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-eab32d1 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-eab32d1{border-style:none;}.elementor-1436 .elementor-element.elementor-element-c0be655 .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-c0be655 .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-c0be655 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-c0be655{border-style:none;}.elementor-1436 .elementor-element.elementor-element-5bed59f .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-5bed59f .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-5bed59f .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-5bed59f{border-style:none;}.elementor-1436 .elementor-element.elementor-element-b7d12ad .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-b7d12ad .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-b7d12ad .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-b7d12ad{border-style:none;}.elementor-1436 .elementor-element.elementor-element-4d9f927 .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-4d9f927 .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-4d9f927 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-4d9f927{border-style:none;}.elementor-1436 .elementor-element.elementor-element-0f1fa56 .elementor-button{background-color:transparent;fill:var( --e-global-color-43f10c9 );color:var( --e-global-color-43f10c9 );background-image:linear-gradient(290deg, var( --e-global-color-43f10c9 ) 2%, var( --e-global-color-5dfdd02 ) 82%);border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-43f10c9 );}.elementor-1436 .elementor-element.elementor-element-0f1fa56 .elementor-button:hover, .elementor-1436 .elementor-element.elementor-element-0f1fa56 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(290deg, var( --e-global-color-5dfdd02 ) 2%, var( --e-global-color-43f10c9 ) 82%);}.elementor-1436 .elementor-element.elementor-element-0f1fa56{border-style:none;}.elementor-1436 .elementor-element.elementor-element-9c0d289{--display:flex;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1436 .elementor-element.elementor-element-5959c17{text-align:center;}.elementor-1436 .elementor-element.elementor-element-5959c17 img{border-radius:12px 12px 12px 12px;}.elementor-1436 .elementor-element.elementor-element-348d64e{--display:flex;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-1436 .elementor-element.elementor-element-d807234{--display:flex;}.elementor-1436 .elementor-element.elementor-element-ddeffa7{--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;}.elementor-widget-flip-box .elementor-flip-box__front .elementor-flip-box__layer__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-flip-box .elementor-flip-box__front .elementor-flip-box__layer__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-flip-box .elementor-flip-box__back .elementor-flip-box__layer__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-flip-box .elementor-flip-box__back .elementor-flip-box__layer__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-flip-box .elementor-flip-box__button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-flip-box__front{background-image:url("https://newtestweb.shop/wp-content/uploads/2026/08/slot-deposit1000.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-flip-box__back{background-color:#E6D726;}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-flip-box{height:351px;}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-icon i{transform:rotate(0deg);}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-icon svg{transform:rotate(0deg);}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1436 .elementor-element.elementor-element-7e66ba4 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-flip-box__front{background-image:url("https://newtestweb.shop/wp-content/uploads/2026/05/images-4.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-flip-box__back{background-color:#E6D726;}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-flip-box{height:351px;}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-icon i{transform:rotate(0deg);}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-icon svg{transform:rotate(0deg);}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1436 .elementor-element.elementor-element-1f023c4 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-flip-box__front{background-image:url("https://newtestweb.shop/wp-content/uploads/2026/05/20250721-1.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-flip-box__back{background-color:#E6D726;}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-flip-box{height:351px;}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-flip-box__front .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-icon i{transform:rotate(0deg);}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-icon svg{transform:rotate(0deg);}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-flip-box__back .elementor-flip-box__layer__overlay{text-align:center;}.elementor-1436 .elementor-element.elementor-element-84675b7 .elementor-flip-box__button{margin-inline-center:0;}.elementor-1436 .elementor-element.elementor-element-964a3aa{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}body.elementor-page-1436:not(.elementor-motion-effects-element-type-background), body.elementor-page-1436 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5dfdd02 );}@media(max-width:1024px){.elementor-1436 .elementor-element.elementor-element-50b1802 img{width:31%;}.elementor-1436 .elementor-element.elementor-element-987787c{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1436 .elementor-element.elementor-element-348d64e{--padding-top:30px;--padding-bottom:30px;--padding-left:20px;--padding-right:20px;}.elementor-1436 .elementor-element.elementor-element-964a3aa{--e-n-carousel-swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-1436 .elementor-element.elementor-element-50b1802 img{width:49%;}.elementor-1436 .elementor-element.elementor-element-964a3aa{--e-n-carousel-swiper-slides-to-display:1;}}/* Start custom CSS for button, class: .elementor-element-8c7cf59 */.animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 25px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-0387983 *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 20px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-73533bc *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 20px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-eab32d1 *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 20px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c0be655 *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 20px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5bed59f *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 20px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b7d12ad *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 25px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4d9f927 *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 25px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-0f1fa56 *//* ========================================= BASE BUTTON YELLOW + RED THEME ========================================= */ .animated-btn .elementor-button { position: relative; isolation: isolate; overflow: hidden; padding: 15px 25px !important; border-radius: 14px !important; color: #fff !important; font-weight: 700; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; } .animated-btn .elementor-button-content-wrapper { position: relative; z-index: 5; } .animated-btn .elementor-button-text { color: #fff !important; } /* ========================================= CYBER RED + YELLOW ROTATING BORDER ========================================= */ .btn-cyber .elementor-button { background: #250505 !important; box-shadow: 0 7px 0 #9b1600, 0 12px 25px rgba(255, 70, 0, .3); } .btn-cyber .elementor-button::before { content: ""; position: absolute; inset: -3px; z-index: -2; background: conic-gradient( #ffcc00, #ff3d00, #ff0000, #ffe600, #ff3d00, #ffcc00 ); animation: cyberSpin 1.8s linear infinite; } .btn-cyber .elementor-button::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 11px; background: linear-gradient( 145deg, #451000, #180303 ); } .btn-cyber .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #a51b00, 0 0 35px rgba(255, 205, 0, .45); } @keyframes cyberSpin { to { transform: rotate(360deg); } } /* ========================================= ELECTRIC YELLOW + RED LIGHT SWEEP ========================================= */ .btn-electric .elementor-button { background: linear-gradient( 135deg, #280400, #650900 ) !important; border: 1px solid #ffcc00; box-shadow: inset 0 0 15px rgba(255, 190, 0, .18), 0 7px 0 #a71900, 0 0 15px rgba(255, 70, 0, .3); } .btn-electric .elementor-button::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 225, 50, .85), rgba(255, 70, 0, .55), transparent ); animation: electricSweep 1.4s linear infinite; } .btn-electric .elementor-button::after { content: ""; position: absolute; right: 12px; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: .5; animation: electricPulse .8s ease-in-out infinite; } .btn-electric .elementor-button:hover { transform: translateY(-7px) scale(1.03); box-shadow: 0 14px 0 #a71900, 0 0 35px #ffcc00, inset 0 0 25px rgba(255, 60, 0, .3); } @keyframes electricSweep { 0% { left: -120%; } 100% { left: 120%; } } @keyframes electricPulse { 0%,100% { opacity: .3; transform: translateY(-50%) scale(.8); } 50% { opacity: 1; transform: translateY(-50%) scale(1.2); } } /* ========================================= FIRE RED + YELLOW FIRE EFFECT ========================================= */ .btn-fire .elementor-button { background: linear-gradient( 145deg, #ffcc00, #ff5a00 45%, #9b0000 100% ) !important; box-shadow: inset 0 -7px 15px rgba(80, 0, 0, .5), 0 7px 0 #720000, 0 10px 25px rgba(255, 60, 0, .4); animation: fireShake 2s ease-in-out infinite; } .btn-fire .elementor-button::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: 60%; background: radial-gradient( circle, rgba(255, 245, 70, .9), rgba(255, 120, 0, .65), rgba(255, 0, 0, .35), transparent 65% ); filter: blur(12px); animation: fireMove 1.5s ease-in-out infinite; } .btn-fire .elementor-button:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 15px 0 #720000, 0 0 40px #ffcc00, 0 0 70px rgba(255, 60, 0, .55); } @keyframes fireMove { 0%,100% { transform: translateY(8px) scale(1); } 50% { transform: translateY(-8px) scale(1.15); } } @keyframes fireShake { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* ========================================= GLASS RED + YELLOW GLASS ========================================= */ .btn-glass .elementor-button { background: linear-gradient( 135deg, rgba(255, 190, 0, .20), rgba(180, 0, 0, .18) ) !important; backdrop-filter: blur(12px); border: 1px solid rgba(255, 205, 0, .55); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 8px 0 rgba(120,0,0,.35), 0 15px 30px rgba(255,60,0,.18); } .btn-glass .elementor-button::before { content: ""; position: absolute; width: 80px; height: 180px; top: -50px; left: -100px; background: rgba(255, 220, 80, .55); filter: blur(20px); transform: rotate(25deg); animation: glassShine 2.5s ease-in-out infinite; } .btn-glass .elementor-button:hover { transform: translateY(-8px) perspective(500px) rotateX(8deg); border-color: #ffcc00; box-shadow: 0 16px 0 rgba(120,0,0,.35), 0 20px 40px rgba(255,190,0,.25); } @keyframes glassShine { 0%,20% { left: -120px; } 70%,100% { left: 130%; } } /* ========================================= NEON RED + YELLOW NEON ========================================= */ .btn-neon .elementor-button { background: #190300 !important; border: 2px solid #ffcc00; box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255, 70, 0, .3); animation: neonPulse 1.8s ease-in-out infinite; } .btn-neon .elementor-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 205, 0, .30), rgba(255, 50, 0, .25), transparent ); animation: neonSweep 1.5s linear infinite; } .btn-neon .elementor-button:hover { transform: translateY(-7px); border-color: #fff000; box-shadow: 0 0 8px #ffe000, 0 0 25px #ff4500, 0 0 50px rgba(255, 60, 0, .5); } @keyframes neonPulse { 0%,100% { box-shadow: 0 0 5px #ffcc00, 0 0 15px #ff4500, inset 0 0 10px rgba(255,70,0,.3); } 50% { box-shadow: 0 0 10px #ffe000, 0 0 30px #ff4500, inset 0 0 20px rgba(255,70,0,.45); } } @keyframes neonSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ========================================= GOLD SHIMMER YELLOW + RED ========================================= */ .btn-shimmer .elementor-button { background: linear-gradient( 145deg, #fff08a, #ffbf00 40%, #c72c00 100% ) !important; color: #300600 !important; box-shadow: inset 0 2px rgba(255,255,255,.65), inset 0 -5px rgba(80,0,0,.35), 0 7px 0 #720000, 0 15px 25px rgba(255,120,0,.35); } .btn-shimmer .elementor-button::before { content: ""; position: absolute; top: -100%; left: -80%; width: 45%; height: 300%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.95), transparent ); transform: rotate(25deg); animation: goldShimmer 2.2s ease-in-out infinite; } .btn-shimmer .elementor-button:hover { transform: translateY(-8px); box-shadow: 0 15px 0 #720000, 0 20px 35px rgba(255,190,40,.5), 0 0 25px rgba(255,60,0,.35); } @keyframes goldShimmer { 0%,20% { left: -100%; } 65%,100% { left: 160%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .animated-btn .elementor-button { padding: 13px 18px !important; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-7e66ba4 */.flip-3d-hologram { position: relative; isolation: isolate; border-radius: 22px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; animation: hologramFloat 4s ease-in-out infinite; } /* ========================================= 3D GLOW BEHIND CARD ========================================= */ .flip-3d-hologram::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient( 120deg, #7c3cff, #00eaff, #00ff9d, #ff00cc, #7c3cff ); background-size: 300% 300%; filter: blur(14px); opacity: .55; z-index: -2; animation: holoGradient 4s ease infinite; } /* ========================================= MOVING 3D BORDER ========================================= */ .flip-3d-hologram::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; background: linear-gradient( 110deg, transparent 10%, rgba(255,255,255,.9) 25%, #00eaff 35%, transparent 50%, #ff00cc 70%, transparent 85% ); background-size: 300% 100%; z-index: -1; animation: holoBorder 3s linear infinite; } /* ========================================= FLIP BOX INNER DEPTH ========================================= */ .flip-3d-hologram .elementor-flip-box__layer { border-radius: 20px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -12px 25px rgba(0,0,0,.25); transform-style: preserve-3d; } /* ========================================= HOVER 3D TILT ========================================= */ .flip-3d-hologram:hover { transform: perspective(900px) translateY(-12px) rotateX(6deg) rotateY(-6deg) scale(1.025); filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)) drop-shadow(0 0 25px rgba(0,234,255,.25)); } /* ========================================= HOVER CONTENT DEPTH ========================================= */ .flip-3d-hologram:hover .elementor-flip-box__layer__inner { transform: translateZ(25px); transition: transform .5s ease; } /* ========================================= FLOATING ANIMATION ========================================= */ @keyframes hologramFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= GRADIENT GLOW ========================================= */ @keyframes holoGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= BORDER LIGHT TRAVEL ========================================= */ @keyframes holoBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .flip-3d-hologram:hover { transform: translateY(-6px) scale(1.01); } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-1f023c4 */.flip-3d-hologram { position: relative; isolation: isolate; border-radius: 22px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; animation: hologramFloat 4s ease-in-out infinite; } /* ========================================= 3D GLOW BEHIND CARD ========================================= */ .flip-3d-hologram::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient( 120deg, #7c3cff, #00eaff, #00ff9d, #ff00cc, #7c3cff ); background-size: 300% 300%; filter: blur(14px); opacity: .55; z-index: -2; animation: holoGradient 4s ease infinite; } /* ========================================= MOVING 3D BORDER ========================================= */ .flip-3d-hologram::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; background: linear-gradient( 110deg, transparent 10%, rgba(255,255,255,.9) 25%, #00eaff 35%, transparent 50%, #ff00cc 70%, transparent 85% ); background-size: 300% 100%; z-index: -1; animation: holoBorder 3s linear infinite; } /* ========================================= FLIP BOX INNER DEPTH ========================================= */ .flip-3d-hologram .elementor-flip-box__layer { border-radius: 20px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -12px 25px rgba(0,0,0,.25); transform-style: preserve-3d; } /* ========================================= HOVER 3D TILT ========================================= */ .flip-3d-hologram:hover { transform: perspective(900px) translateY(-12px) rotateX(6deg) rotateY(-6deg) scale(1.025); filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)) drop-shadow(0 0 25px rgba(0,234,255,.25)); } /* ========================================= HOVER CONTENT DEPTH ========================================= */ .flip-3d-hologram:hover .elementor-flip-box__layer__inner { transform: translateZ(25px); transition: transform .5s ease; } /* ========================================= FLOATING ANIMATION ========================================= */ @keyframes hologramFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= GRADIENT GLOW ========================================= */ @keyframes holoGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= BORDER LIGHT TRAVEL ========================================= */ @keyframes holoBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .flip-3d-hologram:hover { transform: translateY(-6px) scale(1.01); } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-84675b7 */.flip-3d-hologram { position: relative; isolation: isolate; border-radius: 22px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; animation: hologramFloat 4s ease-in-out infinite; } /* ========================================= 3D GLOW BEHIND CARD ========================================= */ .flip-3d-hologram::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient( 120deg, #7c3cff, #00eaff, #00ff9d, #ff00cc, #7c3cff ); background-size: 300% 300%; filter: blur(14px); opacity: .55; z-index: -2; animation: holoGradient 4s ease infinite; } /* ========================================= MOVING 3D BORDER ========================================= */ .flip-3d-hologram::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; background: linear-gradient( 110deg, transparent 10%, rgba(255,255,255,.9) 25%, #00eaff 35%, transparent 50%, #ff00cc 70%, transparent 85% ); background-size: 300% 100%; z-index: -1; animation: holoBorder 3s linear infinite; } /* ========================================= FLIP BOX INNER DEPTH ========================================= */ .flip-3d-hologram .elementor-flip-box__layer { border-radius: 20px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -12px 25px rgba(0,0,0,.25); transform-style: preserve-3d; } /* ========================================= HOVER 3D TILT ========================================= */ .flip-3d-hologram:hover { transform: perspective(900px) translateY(-12px) rotateX(6deg) rotateY(-6deg) scale(1.025); filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)) drop-shadow(0 0 25px rgba(0,234,255,.25)); } /* ========================================= HOVER CONTENT DEPTH ========================================= */ .flip-3d-hologram:hover .elementor-flip-box__layer__inner { transform: translateZ(25px); transition: transform .5s ease; } /* ========================================= FLOATING ANIMATION ========================================= */ @keyframes hologramFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= GRADIENT GLOW ========================================= */ @keyframes holoGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= BORDER LIGHT TRAVEL ========================================= */ @keyframes holoBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .flip-3d-hologram:hover { transform: translateY(-6px) scale(1.01); } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-7e66ba4 */.flip-3d-hologram { position: relative; isolation: isolate; border-radius: 22px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; animation: hologramFloat 4s ease-in-out infinite; } /* ========================================= 3D GLOW BEHIND CARD ========================================= */ .flip-3d-hologram::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient( 120deg, #7c3cff, #00eaff, #00ff9d, #ff00cc, #7c3cff ); background-size: 300% 300%; filter: blur(14px); opacity: .55; z-index: -2; animation: holoGradient 4s ease infinite; } /* ========================================= MOVING 3D BORDER ========================================= */ .flip-3d-hologram::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; background: linear-gradient( 110deg, transparent 10%, rgba(255,255,255,.9) 25%, #00eaff 35%, transparent 50%, #ff00cc 70%, transparent 85% ); background-size: 300% 100%; z-index: -1; animation: holoBorder 3s linear infinite; } /* ========================================= FLIP BOX INNER DEPTH ========================================= */ .flip-3d-hologram .elementor-flip-box__layer { border-radius: 20px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -12px 25px rgba(0,0,0,.25); transform-style: preserve-3d; } /* ========================================= HOVER 3D TILT ========================================= */ .flip-3d-hologram:hover { transform: perspective(900px) translateY(-12px) rotateX(6deg) rotateY(-6deg) scale(1.025); filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)) drop-shadow(0 0 25px rgba(0,234,255,.25)); } /* ========================================= HOVER CONTENT DEPTH ========================================= */ .flip-3d-hologram:hover .elementor-flip-box__layer__inner { transform: translateZ(25px); transition: transform .5s ease; } /* ========================================= FLOATING ANIMATION ========================================= */ @keyframes hologramFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= GRADIENT GLOW ========================================= */ @keyframes holoGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= BORDER LIGHT TRAVEL ========================================= */ @keyframes holoBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .flip-3d-hologram:hover { transform: translateY(-6px) scale(1.01); } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-1f023c4 */.flip-3d-hologram { position: relative; isolation: isolate; border-radius: 22px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; animation: hologramFloat 4s ease-in-out infinite; } /* ========================================= 3D GLOW BEHIND CARD ========================================= */ .flip-3d-hologram::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient( 120deg, #7c3cff, #00eaff, #00ff9d, #ff00cc, #7c3cff ); background-size: 300% 300%; filter: blur(14px); opacity: .55; z-index: -2; animation: holoGradient 4s ease infinite; } /* ========================================= MOVING 3D BORDER ========================================= */ .flip-3d-hologram::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; background: linear-gradient( 110deg, transparent 10%, rgba(255,255,255,.9) 25%, #00eaff 35%, transparent 50%, #ff00cc 70%, transparent 85% ); background-size: 300% 100%; z-index: -1; animation: holoBorder 3s linear infinite; } /* ========================================= FLIP BOX INNER DEPTH ========================================= */ .flip-3d-hologram .elementor-flip-box__layer { border-radius: 20px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -12px 25px rgba(0,0,0,.25); transform-style: preserve-3d; } /* ========================================= HOVER 3D TILT ========================================= */ .flip-3d-hologram:hover { transform: perspective(900px) translateY(-12px) rotateX(6deg) rotateY(-6deg) scale(1.025); filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)) drop-shadow(0 0 25px rgba(0,234,255,.25)); } /* ========================================= HOVER CONTENT DEPTH ========================================= */ .flip-3d-hologram:hover .elementor-flip-box__layer__inner { transform: translateZ(25px); transition: transform .5s ease; } /* ========================================= FLOATING ANIMATION ========================================= */ @keyframes hologramFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= GRADIENT GLOW ========================================= */ @keyframes holoGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= BORDER LIGHT TRAVEL ========================================= */ @keyframes holoBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .flip-3d-hologram:hover { transform: translateY(-6px) scale(1.01); } }/* End custom CSS */ /* Start custom CSS for flip-box, class: .elementor-element-84675b7 */.flip-3d-hologram { position: relative; isolation: isolate; border-radius: 22px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease; animation: hologramFloat 4s ease-in-out infinite; } /* ========================================= 3D GLOW BEHIND CARD ========================================= */ .flip-3d-hologram::before { content: ""; position: absolute; inset: -8px; border-radius: 28px; background: linear-gradient( 120deg, #7c3cff, #00eaff, #00ff9d, #ff00cc, #7c3cff ); background-size: 300% 300%; filter: blur(14px); opacity: .55; z-index: -2; animation: holoGradient 4s ease infinite; } /* ========================================= MOVING 3D BORDER ========================================= */ .flip-3d-hologram::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; background: linear-gradient( 110deg, transparent 10%, rgba(255,255,255,.9) 25%, #00eaff 35%, transparent 50%, #ff00cc 70%, transparent 85% ); background-size: 300% 100%; z-index: -1; animation: holoBorder 3s linear infinite; } /* ========================================= FLIP BOX INNER DEPTH ========================================= */ .flip-3d-hologram .elementor-flip-box__layer { border-radius: 20px !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -12px 25px rgba(0,0,0,.25); transform-style: preserve-3d; } /* ========================================= HOVER 3D TILT ========================================= */ .flip-3d-hologram:hover { transform: perspective(900px) translateY(-12px) rotateX(6deg) rotateY(-6deg) scale(1.025); filter: drop-shadow(0 25px 30px rgba(0,0,0,.35)) drop-shadow(0 0 25px rgba(0,234,255,.25)); } /* ========================================= HOVER CONTENT DEPTH ========================================= */ .flip-3d-hologram:hover .elementor-flip-box__layer__inner { transform: translateZ(25px); transition: transform .5s ease; } /* ========================================= FLOATING ANIMATION ========================================= */ @keyframes hologramFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================= GRADIENT GLOW ========================================= */ @keyframes holoGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================= BORDER LIGHT TRAVEL ========================================= */ @keyframes holoBorder { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .flip-3d-hologram:hover { transform: translateY(-6px) scale(1.01); } }/* End custom CSS */