/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */



/* Core Button Styles */
.button-88 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    padding: 0.7em 1.4em;
    color: white !important;
    background: linear-gradient(135deg, #216CFF 0%, #1F8FEE 100%);
    border: none;
    box-shadow: 0 0.7em 1.5em -0.5em #216CFF98;
    letter-spacing: 0.05em;
    border-radius: 50px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hover Effects */
.button-88:hover {
    background: linear-gradient(135deg, #1F8FEE 0%, #216CFF 100%);
    box-shadow: 0 0.5em 2em -0.5em rgba(33, 108, 255, 0.7);
    transform: scale(1.05);
}

.button-88:active {
    transform: scale(0.98);
    box-shadow: 0 0.3em 1em -0.5em rgba(33, 108, 255, 0.5);
}

/* SVG Arrow Styling */
.arrow-svg {
    fill: none;
    stroke: white;
    transition: transform 0.3s ease;
}

.button-88:hover .arrow-svg {
    transform: translateX(5px); /* Animate arrow on hover */
}

/* Ripple Effect */
.button-88::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
    background-position: center;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
    pointer-events: none;
}

.button-88:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

.service-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}
.service-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1.5rem;
	flex: 1 1 calc(33.333% - 2rem);
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.service-card h3 {
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
}