.elementor-1377 .elementor-element.elementor-element-0e075e7{--display:flex;--overlay-opacity:0.5;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-1377 .elementor-element.elementor-element-0e075e7:not(.elementor-motion-effects-element-type-background), .elementor-1377 .elementor-element.elementor-element-0e075e7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://keptcodesign.com/wp-content/uploads/2026/08/hero1.webp");background-size:cover;}.elementor-1377 .elementor-element.elementor-element-0e075e7::before, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .elementor-background-video-container::before, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .e-con-inner > .elementor-background-video-container::before, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .elementor-background-slideshow::before, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#6027AD7D;--background-overlay:'';}.elementor-1377 .elementor-element.elementor-element-0e075e7 > .elementor-shape-bottom .elementor-shape-fill, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:#FFFFFF;}.elementor-1377 .elementor-element.elementor-element-0e075e7 > .elementor-shape-bottom svg, .elementor-1377 .elementor-element.elementor-element-0e075e7 > .e-con-inner > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:29px;}.elementor-1377 .elementor-element.elementor-element-9bf3068{width:var( --container-widget-width, 50% );max-width:50%;margin:16em 0em calc(var(--kit-widget-spacing, 0px) + 1em) 0em;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1377 .elementor-element.elementor-element-9bf3068.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-9bf3068 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:3em;line-height:1em;letter-spacing:-3.5px;color:#F8F7F4;}.elementor-1377 .elementor-element.elementor-element-40ec966{width:var( --container-widget-width, 72% );max-width:72%;margin:-24px 0px calc(var(--kit-widget-spacing, 0px) + -46px) 0px;--container-widget-width:72%;--container-widget-flex-grow:0;font-family:"Inter Tight", Sans-serif;font-size:1.5em;color:#F8F7F4;}.elementor-1377 .elementor-element.elementor-element-40ec966.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-7d0f5fb{--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;--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-1377 .elementor-element.elementor-element-d9323e4 .elementor-button{background-color:#EA9010;font-family:"Inter", Sans-serif;font-size:24px;font-weight:700;line-height:23px;letter-spacing:0px;word-spacing:0px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);fill:#FFFFFF;color:#FFFFFF;}.elementor-1377 .elementor-element.elementor-element-d9323e4 .elementor-button:hover, .elementor-1377 .elementor-element.elementor-element-d9323e4 .elementor-button:focus{background-color:#E98C09;}.elementor-1377 .elementor-element.elementor-element-d9323e4{margin:48px 16px calc(var(--kit-widget-spacing, 0px) + 16px) 16px;}.elementor-1377 .elementor-element.elementor-element-d9323e4.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-6c5e03f{--display:flex;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.elementor-1377 .elementor-element.elementor-element-6c5e03f:not(.elementor-motion-effects-element-type-background), .elementor-1377 .elementor-element.elementor-element-6c5e03f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1377 .elementor-element.elementor-element-4c698bd{margin:2em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;text-align:center;}.elementor-1377 .elementor-element.elementor-element-4c698bd.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-4c698bd .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:2em;font-weight:600;letter-spacing:-1.5px;color:#2B292C;}.elementor-1377 .elementor-element.elementor-element-2777596{margin:-1em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;text-align:center;}.elementor-1377 .elementor-element.elementor-element-2777596.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-2777596 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.5em;font-weight:600;font-style:italic;letter-spacing:-1.5px;color:#2B292C;}.elementor-1377 .elementor-element.elementor-element-51720d4{width:var( --container-widget-width, 48% );max-width:48%;--container-widget-width:48%;--container-widget-flex-grow:0;text-align:center;}.elementor-1377 .elementor-element.elementor-element-51720d4.elementor-element{--align-self:center;}.elementor-1377 .elementor-element.elementor-element-51720d4.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-8dca09f{margin:-3em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;}.elementor-1377 .elementor-element.elementor-element-8dca09f.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-dd9730b{--display:flex;--min-height:421px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--border-radius:0px 0px 0px 0px;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:4em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;--z-index:3;}.elementor-1377 .elementor-element.elementor-element-dd9730b:not(.elementor-motion-effects-element-type-background), .elementor-1377 .elementor-element.elementor-element-dd9730b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEF4F1;}.elementor-1377 .elementor-element.elementor-element-dd9730b::before, .elementor-1377 .elementor-element.elementor-element-dd9730b > .elementor-background-video-container::before, .elementor-1377 .elementor-element.elementor-element-dd9730b > .e-con-inner > .elementor-background-video-container::before, .elementor-1377 .elementor-element.elementor-element-dd9730b > .elementor-background-slideshow::before, .elementor-1377 .elementor-element.elementor-element-dd9730b > .e-con-inner > .elementor-background-slideshow::before, .elementor-1377 .elementor-element.elementor-element-dd9730b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-1377 .elementor-element.elementor-element-4a82136{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--border-radius:1em 1em 1em 1em;--margin-top:0em;--margin-bottom:16em;--margin-left:0em;--margin-right:0em;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-1377 .elementor-element.elementor-element-8bde690{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;text-align:start;}.elementor-1377 .elementor-element.elementor-element-8bde690.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-8bde690 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:3em;font-weight:800;line-height:55px;letter-spacing:-1px;word-spacing:0px;}.elementor-1377 .elementor-element.elementor-element-79087ee{width:var( --container-widget-width, 93.998% );max-width:93.998%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:93.998%;--container-widget-flex-grow:0;font-size:1.5em;letter-spacing:-1.4px;}.elementor-1377 .elementor-element.elementor-element-79087ee.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1377 .elementor-element.elementor-element-79087ee.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-6d3a519 .elementor-button{background-color:#EA9010;font-family:"Inter", Sans-serif;font-size:24px;font-weight:700;line-height:23px;letter-spacing:0px;word-spacing:0px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);fill:#FFFFFF;color:#FFFFFF;}.elementor-1377 .elementor-element.elementor-element-6d3a519 .elementor-button:hover, .elementor-1377 .elementor-element.elementor-element-6d3a519 .elementor-button:focus{background-color:#E98C09;}.elementor-1377 .elementor-element.elementor-element-6d3a519{margin:0em 0em calc(var(--kit-widget-spacing, 0px) + 5em) 0em;}.elementor-1377 .elementor-element.elementor-element-6d3a519.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-a2feb1d{--spacer-size:5.1rem;}.elementor-1377 .elementor-element.elementor-element-a2feb1d.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-e82a6bf{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--border-radius:1em 1em 1em 1em;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-1377 .elementor-element.elementor-element-1515307{--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;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-1377 .elementor-element.elementor-element-29cec86{width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;text-align:start;}.elementor-1377 .elementor-element.elementor-element-29cec86.elementor-element{--align-self:center;}.elementor-1377 .elementor-element.elementor-element-29cec86.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-29cec86 img{width:100%;}.elementor-1377 .elementor-element.elementor-element-5a1bb89{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0rem;--margin-bottom:-1rem;--margin-left:0rem;--margin-right:0rem;}.elementor-1377 .elementor-element.elementor-element-6a07916{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-1377 .elementor-element.elementor-element-6a07916.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-6a07916 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.8rem;}.elementor-1377 .elementor-element.elementor-element-53773a0.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-be3ba06{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-1377 .elementor-element.elementor-element-be3ba06.elementor-element{--align-self:flex-end;}.elementor-1377 .elementor-element.elementor-element-be3ba06.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-63f49f5{--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;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-1377 .elementor-element.elementor-element-ac1aa86{width:var( --container-widget-width, 40% );max-width:40%;--container-widget-width:40%;--container-widget-flex-grow:0;text-align:start;}.elementor-1377 .elementor-element.elementor-element-ac1aa86.elementor-element{--align-self:center;}.elementor-1377 .elementor-element.elementor-element-ac1aa86.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-ac1aa86 img{width:100%;}.elementor-1377 .elementor-element.elementor-element-b09601b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0rem;--margin-bottom:-1rem;--margin-left:0rem;--margin-right:0rem;}.elementor-1377 .elementor-element.elementor-element-2ea7e22{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-1377 .elementor-element.elementor-element-2ea7e22.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-2ea7e22 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.8rem;}.elementor-1377 .elementor-element.elementor-element-9cca0cd.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-186237e{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;}.elementor-1377 .elementor-element.elementor-element-186237e.elementor-element{--align-self:flex-end;}.elementor-1377 .elementor-element.elementor-element-186237e.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-ec140d2{--display:flex;}.elementor-1377 .elementor-element.elementor-element-ec140d2:not(.elementor-motion-effects-element-type-background), .elementor-1377 .elementor-element.elementor-element-ec140d2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1377 .elementor-element.elementor-element-b2845b7{margin:2em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;text-align:center;}.elementor-1377 .elementor-element.elementor-element-b2845b7.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-b2845b7 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:40px;font-weight:600;letter-spacing:-1.5px;color:#2B292C;}.elementor-1377 .elementor-element.elementor-element-f3af42b{margin:-1.5em 0em calc(var(--kit-widget-spacing, 0px) + 0em) 0em;text-align:center;}.elementor-1377 .elementor-element.elementor-element-f3af42b.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-1377 .elementor-element.elementor-element-f3af42b .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:24px;font-weight:600;}.elementor-1377 .elementor-element.elementor-element-b65f1a8 .elementor-button{background-color:#EA9010;font-family:"Inter", Sans-serif;font-size:24px;font-weight:700;line-height:23px;letter-spacing:0px;word-spacing:0px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);fill:#FFFFFF;color:#FFFFFF;}.elementor-1377 .elementor-element.elementor-element-b65f1a8 .elementor-button:hover, .elementor-1377 .elementor-element.elementor-element-b65f1a8 .elementor-button:focus{background-color:#E98C09;}.elementor-1377 .elementor-element.elementor-element-b65f1a8{margin:16px 16px calc(var(--kit-widget-spacing, 0px) + 16px) 16px;}.elementor-1377 .elementor-element.elementor-element-b65f1a8.xpro-widget-bg-overlay:before{transition:background 0.3s;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-1377 .elementor-element.elementor-element-8bde690 .elementor-heading-title{font-size:35px;letter-spacing:-1.8px;}}@media(min-width:768px){.elementor-1377 .elementor-element.elementor-element-7d0f5fb{--width:46%;}.elementor-1377 .elementor-element.elementor-element-dd9730b{--content-width:80%;}}/* Start custom CSS for button, class: .elementor-element-d9323e4 *//* Button Wrapper */
.my-btn .elementor-button-wrapper {
    position: relative; /* Ensures elements inside can use absolute positioning relative to this wrapper */
    display: inline-block; /* Ensures the wrapper behaves like a button */
    overfow: hidden; /* Prevents pseudo-elements or overflowed content from showing outside the button */
}

/* Fill box */
.my-btn .elementor-button::before {
    content: ''; /* Creates a pseudo-element used as the hover background */
    position: absolute; /* Allows it to cover the entire button */
    background: #3f3f3f; /* <-- Hover background color */
    top: 0; /* Positions the pseudo-element at the top of the button */
    left: 0; /* Positions the pseudo-element at the left edge */
    right: 0; /* Ensures it stretches to the right edge */
    bottom: 0; /* Ensures it stretches to the bottom edge */
    transform: scaleX(0); /* Initially invisible, scaled down horizontally */
    transform-origin: right; /* Animation starts from the right edge */
    transition: transform 0.4s ease-in-out; /* Sets animation duration and timing */
    z-index: -1; /* Places the pseudo-element behind text and icon */

}

/* Hover Effect */
.my-btn .elementor-button:hover::before {
    transform: scaleX(1); /* Fully scales the background horizontally on hover */
    transform-origin: left; /* Expands from the left edge */
}

/* Button Text and Icon */
.my-btn .elementor-button-text, 
.my-btn .elementor-button-icon {
    position: relative; /* Keeps text and icon above the pseudo-element */
    z-index: 1; /* Ensures they remain visible above the background animation */
    transition: color 0.1s ease; /* Smooth transition for color changes */
}

/* Hover Effect for Text and Icon */
.my-btn .elementor-button:hover .elementor-button-text, 
.my-btn .elementor-button:hover .elementor-button-icon {
    color: #ffffff; /* Changes text and icon color to white on hover */
}

/* Ensure Button Retains Shape and Styling */
.my-btn .elementor-button {
    position: relative; /* Enables proper positioning of pseudo-elements */
    display: inline-flex; /* Aligns text and icon horizontally */
    align-items: center; /* Vertically centers text and icon */
    justify-content: center; /* Horizontally centers content */
    background-color: #ffffff; /* Default button background */
    padding: 10px 20px; /* Adds padding inside the button */
    z-index: 0; /* Places text and icon above the pseudo-element */
    overflow: hidden; /* Prevents animated elements from spilling out */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions for background and text color */
}

/* Icon Size */
.my-btn .elementor-button-icon {
    transform: scale(1.3); /* Scales the icon for better visibility */
    padding-left: 5px; /* Adds space between the icon and text */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8dca09f */.svc-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 60px;
    background: #ffffff;
    transition: transform .35s ease;
}

/* Gradient sits on its own layer so it can fade independently */
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #eaf7e3, #7cc45f);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 0;
}

.svc-card > * {
    position: relative;
    z-index: 1;
}

/* --- Hover states --- */

.svc-card:hover,
.svc-card:focus-within {
    transform: translateY(25px);
}

.svc-card:hover::before,
.svc-card:focus-within::before {
    opacity: 1;
}

/* Icon: black to white, drops toward the bottom of the gradient */
.svc-icon img {
    width: 77px;
    height: 77px;
    transition: filter .35s ease, transform .35s ease;
}

.svc-card:hover .svc-icon img,
.svc-card:focus-within .svc-icon img {
    filter: brightness(0) invert(1);
    transform: translateY(85px);
}

/* "Web Design" fades out */
.svc-label {
    transition: opacity .3s ease;
}

.svc-card:hover .svc-label,
.svc-card:focus-within .svc-label {
    opacity: 0;
}

/* "Learn More" fades in where the label was */
.svc-hover {
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    color: #ffffff;
    opacity: 0;
    transition: opacity .3s ease;
}

.svc-card:hover .svc-hover,
.svc-card:focus-within .svc-hover {
    opacity: 1;
}

/* Kill the whole effect on touch */
@media (max-width: 767px) {
    .svc-card:hover { transform: none; }
    .svc-card::before { display: none; }
    .svc-hover { display: none; }
    .svc-label { opacity: 1 !important; }
    .svc-card:hover .svc-icon img {
        filter: none;
        transform: none;
    }
}

.hc-grid a.hc-card,
.hc-grid a.hc-card:link,
.hc-grid a.hc-card:visited,
.hc-grid a.hc-card:hover,
.hc-grid a.hc-card:focus,
.hc-grid a.hc-card:active {
	text-decoration: none;
	border-bottom: 0;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6d3a519 *//* Button Wrapper */
.my-btn .elementor-button-wrapper {
    position: relative; /* Ensures elements inside can use absolute positioning relative to this wrapper */
    display: inline-block; /* Ensures the wrapper behaves like a button */
    overfow: hidden; /* Prevents pseudo-elements or overflowed content from showing outside the button */
}

/* Fill box */
.my-btn .elementor-button::before {
    content: ''; /* Creates a pseudo-element used as the hover background */
    position: absolute; /* Allows it to cover the entire button */
    background: #3f3f3f; /* <-- Hover background color */
    top: 0; /* Positions the pseudo-element at the top of the button */
    left: 0; /* Positions the pseudo-element at the left edge */
    right: 0; /* Ensures it stretches to the right edge */
    bottom: 0; /* Ensures it stretches to the bottom edge */
    transform: scaleX(0); /* Initially invisible, scaled down horizontally */
    transform-origin: right; /* Animation starts from the right edge */
    transition: transform 0.4s ease-in-out; /* Sets animation duration and timing */
    z-index: -1; /* Places the pseudo-element behind text and icon */

}

/* Hover Effect */
.my-btn .elementor-button:hover::before {
    transform: scaleX(1); /* Fully scales the background horizontally on hover */
    transform-origin: left; /* Expands from the left edge */
}

/* Button Text and Icon */
.my-btn .elementor-button-text, 
.my-btn .elementor-button-icon {
    position: relative; /* Keeps text and icon above the pseudo-element */
    z-index: 1; /* Ensures they remain visible above the background animation */
    transition: color 0.1s ease; /* Smooth transition for color changes */
}

/* Hover Effect for Text and Icon */
.my-btn .elementor-button:hover .elementor-button-text, 
.my-btn .elementor-button:hover .elementor-button-icon {
    color: #ffffff; /* Changes text and icon color to white on hover */
}

/* Ensure Button Retains Shape and Styling */
.my-btn .elementor-button {
    position: relative; /* Enables proper positioning of pseudo-elements */
    display: inline-flex; /* Aligns text and icon horizontally */
    align-items: center; /* Vertically centers text and icon */
    justify-content: center; /* Horizontally centers content */
    background-color: #ffffff; /* Default button background */
    padding: 10px 20px; /* Adds padding inside the button */
    z-index: 0; /* Places text and icon above the pseudo-element */
    overflow: hidden; /* Prevents animated elements from spilling out */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions for background and text color */
}

/* Icon Size */
.my-btn .elementor-button-icon {
    transform: scale(1.3); /* Scales the icon for better visibility */
    padding-left: 5px; /* Adds space between the icon and text */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-b65f1a8 *//* Button Wrapper */
.my-btn .elementor-button-wrapper {
    position: relative; /* Ensures elements inside can use absolute positioning relative to this wrapper */
    display: inline-block; /* Ensures the wrapper behaves like a button */
    overfow: hidden; /* Prevents pseudo-elements or overflowed content from showing outside the button */
}

/* Fill box */
.my-btn .elementor-button::before {
    content: ''; /* Creates a pseudo-element used as the hover background */
    position: absolute; /* Allows it to cover the entire button */
    background: #3f3f3f; /* <-- Hover background color */
    top: 0; /* Positions the pseudo-element at the top of the button */
    left: 0; /* Positions the pseudo-element at the left edge */
    right: 0; /* Ensures it stretches to the right edge */
    bottom: 0; /* Ensures it stretches to the bottom edge */
    transform: scaleX(0); /* Initially invisible, scaled down horizontally */
    transform-origin: right; /* Animation starts from the right edge */
    transition: transform 0.4s ease-in-out; /* Sets animation duration and timing */
    z-index: -1; /* Places the pseudo-element behind text and icon */

}

/* Hover Effect */
.my-btn .elementor-button:hover::before {
    transform: scaleX(1); /* Fully scales the background horizontally on hover */
    transform-origin: left; /* Expands from the left edge */
}

/* Button Text and Icon */
.my-btn .elementor-button-text, 
.my-btn .elementor-button-icon {
    position: relative; /* Keeps text and icon above the pseudo-element */
    z-index: 1; /* Ensures they remain visible above the background animation */
    transition: color 0.1s ease; /* Smooth transition for color changes */
}

/* Hover Effect for Text and Icon */
.my-btn .elementor-button:hover .elementor-button-text, 
.my-btn .elementor-button:hover .elementor-button-icon {
    color: #ffffff; /* Changes text and icon color to white on hover */
}

/* Ensure Button Retains Shape and Styling */
.my-btn .elementor-button {
    position: relative; /* Enables proper positioning of pseudo-elements */
    display: inline-flex; /* Aligns text and icon horizontally */
    align-items: center; /* Vertically centers text and icon */
    justify-content: center; /* Horizontally centers content */
    background-color: #ffffff; /* Default button background */
    padding: 10px 20px; /* Adds padding inside the button */
    z-index: 0; /* Places text and icon above the pseudo-element */
    overflow: hidden; /* Prevents animated elements from spilling out */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions for background and text color */
}

/* Icon Size */
.my-btn .elementor-button-icon {
    transform: scale(1.3); /* Scales the icon for better visibility */
    padding-left: 5px; /* Adds space between the icon and text */
}/* End custom CSS */