:root {
    --bg-color: #050505;
    --card-bg: #111111;
    --primary-color: #d02fe1;
    /* Magenta/Purple base */
    --gradient-main: linear-gradient(90deg, #aa36f3, #ef3893);
    --text-white: #ffffff;
    --text-gray: #b3b3b3;
    --sidebar-bg: #000000;
    --sidebar-width-collapsed: 240px;
    --sidebar-width-expanded: 240px;
    --transition-speed: 0.3s;
    --font-main: 'Outfit', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    font-family: var(--font-main);
    color: var(--text-white);
    overflow-x: hidden;
}

/* Page Transition Animation */
.content {
    animation: pageSlideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

@keyframes pageSlideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width-collapsed);
    background: rgba(5, 5, 5, 0.85);
    /* Glassmorphism base */
    backdrop-filter: blur(12px);
    /* Glass blur */
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Stack items at the top */
    padding: 2rem 0;
    transition: width var(--transition-speed) ease;
    z-index: 1000;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
}

/* Sidebar Footer (Pushes to bottom) */
.sidebar-footer {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
}

.btn-resume {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid #ef3893;
    color: #ef3893;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 200px;
}

.btn-resume:hover {
    background: #ef3893;
    color: white;
    box-shadow: 0 5px 15px rgba(239, 56, 147, 0.3);
    transform: translateY(-2px);
}

.copyright {
    color: var(--text-gray);
    font-size: 0.7rem;
    text-align: center;
    opacity: 0.6;
}


/* Profile Card Styles */
.logo {
    display: none !important;
    /* Force hide old logo */
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0.5rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    margin: 0 0 1rem 0;
}

.profile-img-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 1rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(239, 56, 147, 0.5);
    background: #000;
    box-shadow: 0 0 20px rgba(239, 56, 147, 0.2);
    animation: breathing-glow 4s ease-in-out infinite;
    /* Breathing animation */
}

@keyframes breathing-glow {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(239, 56, 147, 0.3);
        transform: scale(1);
        border-color: rgba(239, 56, 147, 0.5);
    }

    50% {
        box-shadow: 0 0 30px rgba(239, 56, 147, 0.6);
        transform: scale(1.02);
        border-color: rgba(239, 56, 147, 0.8);
    }
}

/* Removed hover styles */

.profile-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.status-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    bottom: 5px;
    right: 5px;
    background-color: #ef3893;
    border: 3px solid var(--sidebar-bg);
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Removed hover styles */

.profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    max-height: 200px;
    width: 100%;
    transition: all 0.3s ease;
    visibility: visible;
    transform: translateY(0);
}

/* Removed hover styles */

.profile-name {
    color: var(--text-white);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Text shadow */
}

.profile-role {
    color: var(--text-gray);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    margin-bottom: 1rem;
    white-space: nowrap;
    opacity: 0.8;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(239, 56, 147, 0.08);
    border: 1px solid rgba(239, 56, 147, 0.2);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    color: #ef3893;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.profile-badge:hover {
    background: rgba(239, 56, 147, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(239, 56, 147, 0.2);
}

.label-dot {
    width: 6px;
    height: 6px;
    background-color: #ef3893;
    border-radius: 50%;
    box-shadow: 0 0 8px #ef3893;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.nav-links {
    list-style: none;
    width: 100%;
}

.nav-links li {
    width: 100%;
    margin-bottom: 0.5rem;
}

.nav-links a {
    display: flex;
    align-items: center;
    padding: 0.8rem 2rem;
    color: var(--text-gray);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    border-left: 3px solid transparent;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Sliding background effect */
.nav-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(239, 56, 147, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}

.nav-links a:hover::before,
.nav-links a.active::before {
    transform: translateX(0);
}

.nav-links a:hover,
.nav-links a.active {
    color: #fff;
    border-left: 3px solid #ef3893;
}

.nav-links i {
    font-size: 1.3rem;
    min-width: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Glowing icon effect */
.nav-links a:hover i,
.nav-links a.active i {
    color: #ef3893;
    text-shadow: 0 0 10px rgba(239, 56, 147, 0.6);
    transform: scale(1.1);
}

.link-text {
    margin-left: 1.5rem;
    opacity: 1;
    transition: opacity 0.2s;
}

/* Removed hover styles */

.socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    padding-bottom: 2rem;
    transition: flex-direction 0.3s;
}

/* Removed hover styles */

.socials a {
    color: var(--text-gray);
    font-size: 1.2rem;
    transition: color 0.2s;
}

.socials a:hover {
    color: #ef3893;
}

/* Main Content */
.content {
    margin-left: var(--sidebar-width-collapsed);
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: margin-left var(--transition-speed) ease;
}

/* Home Page Specific (No Scroll) */
.home-content {
    padding: 0;
    height: 100vh;
    overflow: hidden;
    justify-content: space-between;
}

/* Simple Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Removed hover margin adjustment */

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0 8%;
    flex: 1;
    min-height: 0;
    position: relative;
    padding-top: 2rem;
    gap: 2rem;
}

.hero-text {
    flex: 1;
    max-width: 650px;
    z-index: 2;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align start */
}

.greeting {
    display: inline-block;
    color: var(--text-white);
    margin-bottom: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
}

h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--text-white);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Initial depth */
}

.highlight {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.subtitle {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 1.8rem;
    /* Reserve space for typing */
    display: inline-flex;
    align-items: center;
}

.description {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 600px;
    font-size: 1rem;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0;
}

.btn {
    padding: 0.9rem 2.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 1rem;
}

.btn.primary {
    background: var(--gradient-main);
    color: white;
    box-shadow: 0 10px 25px rgba(210, 47, 225, 0.3);
    border: none;
}

.btn.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn.secondary:hover {
    border-color: #ef3893;
    background: rgba(239, 56, 147, 0.1);
}

.hero-image {
    display: flex;
    flex: 1;
    justify-content: center;
    position: relative;
    height: auto;
    max-height: 60vh;
    align-items: center;
}

.avatar-3d {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    /* animation: float 6s ease-in-out infinite; */
    border-radius: 20px;
}

.blob-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(170, 54, 243, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.floating-item {
    position: absolute;
    background: var(--primary-color);
    opacity: 0.8;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 3;
    /* Above avatar if needed, or 1 to be behind? Reference shows some in front. Let's do 3. */
}

/* Cube 1 (Right Top) */
.cube-1 {
    width: 45px;
    height: 45px;
    top: 10%;
    right: 10%;
    border-radius: 8px;
    background: linear-gradient(135deg, #ef3893, #aa36f3);
    animation: float 6s ease-in-out infinite, rotate-3d 10s linear infinite;
}

/* Cube 2 (Left Bottom) */
.cube-2 {
    width: 35px;
    height: 35px;
    bottom: 15%;
    left: 5%;
    border-radius: 6px;
    background: linear-gradient(135deg, #aa36f3, #ef3893);
    animation: float 7s ease-in-out infinite 1s, rotate-3d 12s linear infinite reverse;
}

/* Cube 3 (Left Top - small) */
.cube-3 {
    width: 25px;
    height: 25px;
    top: 20%;
    left: 15%;
    border-radius: 4px;
    background: linear-gradient(135deg, #aa36f3, #ef3893);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: float 5s ease-in-out infinite 0.5s;
}

/* Sphere 1 (Right Bottom - Large) */
.sphere-1 {
    width: 60px;
    height: 60px;
    bottom: 25%;
    right: 0%;
    border-radius: 50%;
    background: linear-gradient(135deg, #aa36f3, #ef3893);
    /* Dark sphere like reference */
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: float 8s ease-in-out infinite 2s;
}

/* Sphere 2 (Top Center - Small) */
.sphere-2 {
    width: 20px;
    height: 20px;
    top: -3%;
    left: 35%;
    border-radius: 50%;
    background: linear-gradient(135deg, #aa36f3, #ef3893);
    animation: float 4s ease-in-out infinite 1.5s;
}

.sphere-3 {
    width: 10px;
    height: 10px;
    top: 50%;
    left: 5%;
    border-radius: 50%;
    background: linear-gradient(135deg, #aa36f3, #ef3893);
    animation: float 4s ease-in-out infinite 1.5s;
}

@keyframes rotate-3d {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(180deg) translateY(-20px);
    }

    100% {
        transform: rotate(360deg) translateY(0);
    }
}

/* Stats Section */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 1.5rem 0 2rem;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 80%;
    margin: 0 auto;
    flex-wrap: wrap;
    /* Allow wrapping */
}

.stat-item h3 {
    font-size: 2.5rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.stat-item p {
    color: var(--text-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-item {
    text-align: center;
}

/* Responsiveness */
@media (max-width: 992px) {
    .home-content {
        height: auto;
        overflow: visible;
        padding: 2rem;
        justify-content: flex-start;
    }

    .hero {
        flex-direction: column-reverse;
        /* Text on top usually, or bottom? Let's do Text Bottom if image is hero, but standard is Text Top. Let's do Column (Image top? No, Text top is better for SEO/Reading). 
        Actually, for "Personality", Image first is nice, but text usually conveys "Who I am". 
        Let's try Column: Text First. */
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 2rem;
        height: auto;
        min-height: 100vh;
    }

    .hero-text {
        align-items: center;
        margin-top: 2rem;
    }

    .hero-image {
        height: auto;
        width: 100%;
        margin-bottom: 2rem;
    }

    .avatar-3d {
        max-width: 300px;
    }

    h1 {
        font-size: 3rem;
    }
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width-collapsed: 0px;
    }

    .sidebar {
        position: fixed;
        width: 100% !important;
        height: 60px;
        bottom: 0;
        top: auto;
        left: 0;
        flex-direction: row;
        border-right: none;
        border-top: 1px solid #222;
        padding: 0;
        background: rgba(0, 0, 0, 0.9);
        /* Slight transparency for premium feel */
        backdrop-filter: blur(10px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
        z-index: 2000;
        justify-content: center;
    }

    .sidebar:hover {
        width: 100% !important;
    }

    /* Resume button on bottom nav for tablet/mobile */
    .sidebar-footer {
        display: none !important;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        /* Better spacing */
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .nav-links li {
        width: auto;
        margin: 0;
        display: flex;
        justify-content: center;
        flex: 1;
    }

    .nav-links a {
        padding: 0;
        height: 60px;
        width: 100%;
        justify-content: center;
        border: none;
        background: transparent !important;
        flex-direction: column;
        /* Icon top, maybe? No keep centered */
    }

    .nav-links a:hover {
        border-left: none;
        border-bottom: 2px solid #ef3893;
    }

    .nav-links i {
        font-size: 1.4rem;
        color: var(--text-gray);
        margin-bottom: 0;
    }

    .nav-links a.active i,
    .nav-links a:hover i {
        color: #ef3893;
    }

    .logo,
    .link-text,
    .logo-text,
    .socials,
    .profile-card {
        display: none !important;
    }

    .content {
        margin-left: 0 !important;
        padding-bottom: 100px;
        /* More space for nav */
        width: 100%;
        padding-top: 2rem;
    }
}

@media (max-width: 768px) {

    .stats-bar {
        gap: 2.5rem;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .stat-item {
        text-align: center;
        /* specific fix for alignment */
        width: 100%;
    }

    h1 {
        font-size: 3rem;
        text-align: center;
    }

    .cta-buttons {
        width: 100%;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
        /* Allow wrapping */
    }

    .btn {
        padding: 0.8rem 1.5rem;
        /* Slightly reduced padding */
        flex: 1 1 40%;
        /* split row */
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 140px;
        /* Ensure text doesn't squash */
        max-width: none;
        /* Let them fill */
        white-space: nowrap;
    }
}

/* Responsiveness */
@media (max-width: 968px) {
    .hero {
        flex-direction: column-reverse;
        /* Text on bottom on mobile if we want */
        text-align: center;
        justify-content: center;
        padding-top: 100px;
        height: auto;
    }

    .hero-text {
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .hero-image {
        height: 400px;
    }

    .sidebar {
        width: 0;
        /* Hide sidebar on mobile or use a hamburger */
    }

    .content {
        margin-left: 0;
    }

    /* Mobile specific adjustments would be needed here, 
       but keeping simple as per request for "like this" (desktop view) 
    */
}

/* Scroll Animation Utilities */
section.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Moving Background Orbs */
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.orb-1 {
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(88, 28, 135, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
    /* Deep Violet/Indigo */
    animation: swap-position-1 10s infinite alternate ease-in-out;
}

.orb-2 {
    bottom: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
    /* Vibrant Pink/Magenta */
    animation: swap-position-2 10s infinite alternate ease-in-out;
}

@keyframes swap-position-1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(60vw, 50vh) scale(1.1);
        /* Move to bottom right */
    }
}

@keyframes swap-position-2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-60vw, -50vh) scale(1.1);
        /* Move to top left */
    }
}

/* Magnetic Button Effects */
.magnetic-btn {
    display: inline-block;
    cursor: pointer;
    border-radius: 50px;
    position: relative;
    z-index: 5;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform;
}

.magnetic-content {
    display: block;
    pointer-events: none;
    transition: transform 0.2s linear;
    /* Smooth internal movement */
}

/* Typing Cursor Effect */
.typing-cursor {
    border-right: 2px solid #ef3893;
    animation: blink-cursor 0.75s step-end infinite;
    padding-right: 4px;
    color: #ef3893;
    /* Fill color since it's gradient text usually, but cursor needs solid */
    -webkit-text-fill-color: #ef3893;
}

@keyframes blink-cursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #ef3893;
    }
}

/* Mobile Resume Button */
.mobile-resume-btn {
    display: none;
    /* Hidden by default */
}

@media (max-width: 1024px) {
    .mobile-resume-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        /* Slight bg */
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        padding: 0.8rem 1.5rem;
        /* Match btn padding */
        border-radius: 50px;
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        width: 100%;
        /* Full width */
        justify-content: center;
        flex-basis: 100%;
        /* Force new line in flex wrap */
        margin-top: 0.5rem;
        transition: all 0.3s ease;
    }

    .mobile-resume-btn:active {
        background: rgba(239, 56, 147, 0.2);
        border-color: #ef3893;
    }
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #050505;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Creative Loader */
.loader-container {
    position: relative;
    width: 80px;
    height: 80px;
}

.loader-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color);
    animation: pulse-glow 2s ease-in-out infinite;
}

.loader-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ef3893;
    animation: spin-ring 1.5s linear infinite;
}

.loader-ring:nth-child(3) {
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-bottom-color: #aa36f3;
    /* Second color */
    animation: spin-ring 2s linear infinite reverse;
}

@keyframes pulse-glow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 1;
    }
}

@keyframes spin-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}