.elementor-98 .elementor-element.elementor-element-8a307cb{--display:flex;--position:fixed;--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;top:0px;--z-index:1000;}body:not(.rtl) .elementor-98 .elementor-element.elementor-element-8a307cb{left:0px;}body.rtl .elementor-98 .elementor-element.elementor-element-8a307cb{right:0px;}.elementor-98 .elementor-element.elementor-element-95781ec{--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:space-between;--align-items:center;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:var( --e-global-color-text );--border-color:var( --e-global-color-text );--border-radius:200px 200px 200px 200px;}.elementor-98 .elementor-element.elementor-element-9717052.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-98 .elementor-element.elementor-element-9717052 img{width:100%;}.elementor-98 .elementor-element.elementor-element-84fd13b{--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:space-around;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-98 .elementor-element.elementor-element-84fd13b.e-con{--align-self:center;}.elementor-98 .elementor-element.elementor-element-fd1e535.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-98 .elementor-element.elementor-element-fd1e535 .elementor-menu-toggle{margin-left:auto;background-color:#02010100;}.elementor-98 .elementor-element.elementor-element-fd1e535 .elementor-nav-menu .elementor-item{font-size:25px;}.elementor-98 .elementor-element.elementor-element-fd1e535 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-98 .elementor-element.elementor-element-fd1e535 div.elementor-menu-toggle{color:var( --e-global-color-text );}.elementor-98 .elementor-element.elementor-element-fd1e535 div.elementor-menu-toggle svg{fill:var( --e-global-color-text );}.elementor-98 .elementor-element.elementor-element-4538823 .elementor-button{background-color:transparent;background-image:linear-gradient(292deg, #662D91 52%, #EE3124 100%);transition-duration:400ms;border-radius:200px 200px 200px 200px;padding:30px 60px 30px 60px;}.elementor-98 .elementor-element.elementor-element-4538823 .elementor-button:hover, .elementor-98 .elementor-element.elementor-element-4538823 .elementor-button:focus{background-color:transparent;background-image:linear-gradient(78deg, #471E67 0%, #f2295b 100%);}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-98 .elementor-element.elementor-element-95781ec{--width:100%;}.elementor-98 .elementor-element.elementor-element-84fd13b{--width:52%;}}@media(max-width:767px){.elementor-98 .elementor-element.elementor-element-8a307cb{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-98 .elementor-element.elementor-element-9717052{width:var( --container-widget-width, 125px );max-width:125px;--container-widget-width:125px;--container-widget-flex-grow:0;}.elementor-98 .elementor-element.elementor-element-9717052 img{width:100%;}.elementor-98 .elementor-element.elementor-element-84fd13b{--width:50%;--justify-content:center;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-98 .elementor-element.elementor-element-fd1e535.elementor-element{--align-self:flex-end;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-framed .elementor-item:before{border-width:0px;}.elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 0px 0px;}.elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:0px 0px 0 0;}.elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:0px 0 0 0px;}.elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 0px 0px 0;}.elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-underline .elementor-item:after,
					 .elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-overline .elementor-item:before,
					 .elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-double-line .elementor-item:before,
					 .elementor-98 .elementor-element.elementor-element-fd1e535 .e--pointer-double-line .elementor-item:after{height:0px;}.elementor-98 .elementor-element.elementor-element-fd1e535{--nav-menu-icon-size:32px;}}

/* Start custom CSS for button, class: .elementor-element-4538823 */export default function App() {
  return (
    <div className="size-full flex items-center justify-center bg-gray-100 p-8">
      <div className="flex flex-col gap-8 items-center">
        <div className="text-center">
          <h2 className="mb-4">CSS Transitions Version</h2>
          <div className="w-[200px] h-[60px]">
            <AnimatedGradientButton />
          </div>
        </div>
        
        <div className="text-center">
          <h2 className="mb-4">GSAP Version</h2>
          <div className="w-[200px] h-[60px]">
            <GSAPGradientButton />
          </div>
        </div>
      </div>
    </div>
  );
}/* End custom CSS */


/* Start custom CSS for container, class: .elementor-element-95781ec */.frosted-glass {
        background-color: rgba(255, 255, 255, 0.5); /* White background with transparency */
        backdrop-filter: blur(20px); /* Apply blur to the background behind the element */
        -webkit-backdrop-filter: blur(25px); /* For Safari compatibility */
        border-radius: 20px; /* Optional: Rounded corners */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Optional: Subtle shadow */
        border: 1px solid rgba(255, 255, 255, 0.3); /* Optional: Light border */
        padding: 20px; /* Optional: Add padding for content */
    }/* End custom CSS */


/* Start custom CSS for container, class: .elementor-element-8a307cb */.frosted-glass {
        background-color: rgba(255, 255, 255, 0.5); /* White background with transparency */
        backdrop-filter: blur(10px); /* Apply blur to the background behind the element */
        -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
        border-radius: 10px; /* Optional: Rounded corners */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Optional: Subtle shadow */
        border: 1px solid rgba(255, 255, 255, 0.3); /* Optional: Light border */
        padding: 20px; /* Optional: Add padding for content */
    }/* End custom CSS */