/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */


/* Button Base Styles - Add GSAP effect support */
.kt-button,
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    border-radius: 100px;
    /* Pill shape like GSAP */
}

/* The flair element */
.button__flair {
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    transform-origin: 0 0;
    will-change: transform;
    z-index: 0;
}

/* The circular fill effect */
.button__flair::before {
    aspect-ratio: 1/1;
    background-color: #fff;
    /* Default white fill */
    border-radius: 50%;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    width: 170%;
}

/* Dark variant - black circle */
.kt-dark .button__flair::before {
    background-color: #000;
}

/* Ensure button text stays on top */
.kt-button .kt-btn-inner-text,
.wp-block-button__link strong,
.kt-button>*:not(.button__flair),
.wp-block-button__link>*:not(.button__flair) {
    position: relative;
    z-index: 1;
}


/* Hover color transition */
.kt-button .kt-btn-inner-text,
.wp-block-button__link strong {
    transition: color 150ms ease-in-out;
}

/* Change text color on hover - customize these colors */
.kt-button:hover .kt-btn-inner-text,
.wp-block-button__link:hover strong {
    color: #000;
    /* Text color when hovered - default black */
}

/* Dark variant - white text on hover */
.kt-dark:hover .kt-btn-inner-text,
.kt-dark:hover strong {
    color: #fff;
}


.services-grid {
    grid-gap: 35px;
}

.col-span-3 {
    grid-column: span 3;
}

@media (max-width: 767px) {
    .col-span-3 {
        grid-column: span 12;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .col-span-3 {
        grid-column: span 12;
    }
}

.col-span-4 {
    grid-column: span 4;
}

@media (max-width: 767px) {
    .col-span-4 {
        grid-column: span 12;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .col-span-4 {
        grid-column: span 6;
    }
}

.col-span-5 {
    grid-column: span 5;
}

@media (max-width: 767px) {
    .col-span-5 {
        grid-column: span 12;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .col-span-5 {
        grid-column: span 6;
    }
}