.elementor-kit-6{--e-global-color-primary:#221E1F;--e-global-color-secondary:#616161;--e-global-color-text:#7A7A7A;--e-global-color-accent:#E31E26;--e-global-color-3feda50:#E6B221;--e-global-color-580bc2b:#FFDD74;--e-global-color-462f05a:#FFCB00;--e-global-color-da85d4b:#AD0007;--e-global-color-34572e8:#8B0006;--e-global-color-a3c3a95:#720005;--e-global-color-db69647:#FFFBF0;--e-global-color-4192842:#E9DDD0;--e-global-color-491f6a4:#570004;--e-global-color-a70da0e:#570004;--e-global-color-b18217f:#FFE600;--e-global-color-e0016c4:#B27C32;--e-global-color-3338255:#F6E380;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Faro Display";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Put the class "btn-gold" on the Elementor Button widget (Advanced → CSS Classes) */ /* ===== GOLD BUTTON (anchor only) ===== */ .btn-gold .elementor-button, .btn-gold .elementor-button-link, .elementor-widget-button .elementor-button.btn-gold, .elementor-widget-button .elementor-button-link.btn-gold{ position: relative; display: inline-block; padding: 18px 48px; border: 0; border-radius: 999px; color: #5a3e00; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; overflow: hidden; /* layered metallic gradients */ background: linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,0) 55%) top/100% 55% no-repeat, linear-gradient(to bottom, #ffe680, #ffd633 40%, #e6ac00 70%, #b37400) no-repeat; box-shadow: inset 2px 2px 4px rgba(255,255,255,.75), inset -2px -3px 6px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.30); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; animation: goldFlow 6s ease-in-out infinite alternate; filter: saturate(110%) contrast(105%); } /* Hover / Active (anchor only) */ .btn-gold .elementor-button:hover, .btn-gold .elementor-button-link:hover, .elementor-widget-button .elementor-button.btn-gold:hover, .elementor-widget-button .elementor-button-link.btn-gold:hover{ transform: translateY(-2px); box-shadow: inset 2px 2px 4px rgba(255,255,255,.78), inset -2px -3px 6px rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.35); } .btn-gold .elementor-button:active, .btn-gold .elementor-button-link:active, .elementor-widget-button .elementor-button.btn-gold:active, .elementor-widget-button .elementor-button-link.btn-gold:active{ transform: translateY(1px); box-shadow: inset 2px 2px 4px rgba(255,255,255,.78), inset -2px -3px 6px rgba(0,0,0,.22), 0 3px 6px rgba(0,0,0,.35); } /* Reflective sweep (anchor only) */ .btn-gold .elementor-button::after, .btn-gold .elementor-button-link::after, .elementor-widget-button .elementor-button.btn-gold::after, .elementor-widget-button .elementor-button-link.btn-gold::after{ content: ""; position: absolute; top: -200%; left: -120%; width: 180%; height: 520%; clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 100%); transform: rotate(18deg) translateX(-260%); animation: sweep 5.6s cubic-bezier(.25,.1,.25,1) infinite; pointer-events: none; } /* Motion accessibility */ @media (prefers-reduced-motion: reduce){ .btn-gold .elementor-button, .btn-gold .elementor-button::after, .btn-gold .elementor-button-link, .btn-gold .elementor-button-link::after, .elementor-widget-button .elementor-button.btn-gold, .elementor-widget-button .elementor-button.btn-gold::after, .elementor-widget-button .elementor-button-link.btn-gold, .elementor-widget-button .elementor-button-link.btn-gold::after{ animation: none !important; } } /* Keyframes */ @keyframes goldFlow{ 0% { background-position: top, 0% 0%; } 100% { background-position: top, 0% 20%; } } @keyframes sweep{ 0% { transform: rotate(18deg) translateX(-260%); opacity: 0; } 10% { opacity: 1; } 50% { transform: rotate(18deg) translateX(0%); opacity: 1; } 90% { opacity: 1; } 100% { transform: rotate(18deg) translateX(260%); opacity: 0; } } /* Put the class "btn-red" on the Elementor Button widget (Advanced → CSS Classes) */ /* ===== FLAT RED BUTTON ===== */ .btn-red .elementor-button, .btn-red .elementor-button-link, .elementor-widget-button .elementor-button.btn-red, .elementor-widget-button .elementor-button-link.btn-red{ display: inline-block; padding: 16px 44px; border: 0; border-radius: 999px; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; overflow: hidden; /* simple red gradient (flat look) */ background: linear-gradient(to bottom, #ff4d4d, #cc0000); /* softer shadow just for subtle lift */ box-shadow: 0 3px 6px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; } /* Hover / Active */ .btn-red .elementor-button:hover, .btn-red .elementor-button-link:hover, .elementor-widget-button .elementor-button.btn-red:hover, .elementor-widget-button .elementor-button-link.btn-red:hover{ transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0,0,0,.3); } .btn-red .elementor-button:active, .btn-red .elementor-button-link:active, .elementor-widget-button .elementor-button.btn-red:active, .elementor-widget-button .elementor-button-link.btn-red:active{ transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,.25); }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Faro Display'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://redeagle.com.my/wp-content/uploads/2025/08/faro.ttf') format('truetype'); } /* End Custom Fonts CSS */