.elementor-989534 .elementor-element.elementor-element-ecb0fca{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-7eb3251 *//* Custom styles for the page */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0D0B14; /* Very dark purple/black background */
            color: #E5E7EB;
            overflow-x: hidden; /* Prevents horizontal scrolling */
        }

        /* Keyframes for the slow rotation of the outer ring */
        @keyframes spin {
            to {
                transform: rotate(1turn);
            }
        }

        /* Base container for the animated ring and the flippable avatar */
        .avatar-container {
            position: relative;
            width: 192px;
            height: 192px;
            margin-left: auto;
            margin-right: auto;
            /* This creates the 3D space for the flip effect */
            perspective: 1000px; 
        }

        /* Container for the animated border effect */
        .animated-ring-container {
            position: absolute;
            z-index: 0; 
            width: 100%;
            height: 100%;
            border-radius: 9999px; /* rounded-full */
            overflow: hidden;
            padding: 2px; /* Creates the border thickness */
            filter: drop-shadow(0 0 5px rgba(10, 132, 255, 0.5));
            pointer-events: none; /* Allows clicks to go through to the button */
        }

        /* The rotating conic gradient for the border */
        .animated-ring-container::before {
            content: '';
            position: absolute;
            z-index: -2;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-color: #1a1a2e;
            background-repeat: no-repeat;
            background-position: 0 0;
            background-image: conic-gradient(transparent, #0a84ff, transparent 30%);
            animation: spin 8s linear infinite; /* Slow 8-second rotation */
        }

        /* Creates the "hole" in the middle, making it a ring */
        .animated-ring-container::after {
            content: '';
            position: absolute;
            z-index: -1;
            left: 4px;
            top: 4px;
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            background: #0D0B14; /* Must match the body background */
            border-radius: 9999px;
        }

        /* The core flipper element */
        .flipper {
            position: relative;
            width: 100%;
            height: 100%;
            /* Updated transition for a more professional, minimalist animation */
            transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
            transform-style: preserve-3d;
            z-index: 1; 
        }

        /* Flipped state for the flipper */
        .is-flipped {
            transform: rotateY(180deg);
        }

        /* Shared styles for front and back panels of the card */
        .front, .back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden; /* Safari */
            backface-visibility: hidden;
            border-radius: 9999px;
            overflow: hidden; /* Ensures image corners are clipped */
        }

        /* Back panel is pre-rotated */
        .back {
            transform: rotateY(180deg);
        }
        
        /* Added a drop shadow for a more realistic, floating effect */
        .avatar-image {
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
        }

        /* Switch button styles */
        .switch-button {
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 2; 
            background-color: rgba(13, 11, 20, 0.7); /* Semi-transparent background */
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 9999px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .switch-button:hover {
            background-color: rgba(10, 132, 255, 0.7);
            transform: scale(1.1);
        }/* End custom CSS */