@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-3rem); }
    100% { transform: translateY(0px); }
}

/* Mobile menu toggle styles */
@media (max-width: 768px) {
    .mobile-menu-active .nav-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

@keyframes float-triangle {
    0% { 
        transform: translateY(0px) rotate(15deg); 
    }
    33% { 
        transform: translateY(-8px) rotate(12deg); 
    }
    66% { 
        transform: translateY(5px) rotate(18deg); 
    }
    100% { 
        transform: translateY(0px) rotate(15deg); 
    }
}

@keyframes float-square {
    0% { 
        transform: translateY(0) rotate(0deg);
    }
    50% { 
        transform: translateY(20rem) translateX(15rem) rotate(125deg);
    }
    75% { 
        transform: translateY(20rem) translateX(0rem) rotate(30deg);
    }
    100% { 
        transform: translateY(0) rotate(0deg);
    }
}

.mentor-image {
    /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+CiAgPGNpcmNsZSBjeD0iMjUwIiBjeT0iMjUwIiByPSIyNTAiIGZpbGw9IiNGRjZCOTgiLz4KICA8Y2lyY2xlIGN4PSIyNTAiIGN5PSIxODAiIHI9IjEwMCIgZmlsbD0iI2YwZjBmMCIvPgogIDxwYXRoIGQ9Ik0xNTAsMzIwIEMxNTAsNDIwIDM1MCw0MjAgMzUwLDMyMCBDMzUwLDMyMCAzMDAsMzgwIDI1MCwzODAgQzIwMCwzODAgMTUwLDMyMCAxNTAsMzIwIFoiIGZpbGw9IiNmMGYwZjAiLz4KPC9zdmc+Cg=='); */
    background-size: cover;
    background-position: center;
}

/* Custom animation and shapes that can't be easily converted to Tailwind */
.hero-circle {
    width: 650px;
    height: 650px;
    border-radius: 50%;
    /* background-color: #FF6B98; */
    position: absolute;
    right: -150px;
    top: -100px;
    z-index: 0;
}

.accent-square {
    width: 69px;
    height: 69px;
    border-radius: 10%;
    /* background-color: #9BEF6A; */
    position: absolute;
    top: 2rem;
    left: 10rem;
    z-index: 0;
}

.accent-square {
    animation: float-square 5s ease-in-out infinite;
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}