/*
 Theme Name: Hello Elementor Child
 Theme URI: https://bynazar.com/
 Description: A custom child theme for Hello Elementor, created for bynazar.com. This child theme allows safe customizations without affecting the parent theme.
 Author: Nazar Abbas Khan
 Author URI: https://bynazar.com/
 Template: hello-elementor
 Version: 1.0.0
 License: GNU General Public License v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: hello-elementor-child
 Tags: child-theme, elementor, custom
*/

/*--------------------------------------------------------------
>>> CHILD THEME CUSTOM STYLES
>>> Add your custom CSS below this line
--------------------------------------------------------------*/

/*--------------------------------------------------------------
>>> ANIMATED GRADIENT BORDER (2px)
>>> Use class: .gradient-border
>>> Inherits border-radius from Elementor settings
--------------------------------------------------------------*/

/* CSS Property for animating the border angle */
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

/* Keyframe animation for rotating gradient */
@keyframes gradient-border-spin {
    to {
        --border-angle: 1turn;
    }
}

/* Gradient border styles */
.gradient-border {
    --border-angle: 0turn;
    position: relative !important;
    overflow: visible !important;
    border: none !important;
    isolation: isolate;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: conic-gradient(from var(--border-angle),
            transparent 25%,
            #3a0ca3 50%,
            transparent 75%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    animation: gradient-border-spin 3s linear infinite;
}