.circle-left {
    top: 120px;
    left: -250px;
    background: linear-gradient(135deg, #fde4b5 0%, #f46858 25%, #419ddf 50%, #0c4a81 75%, #040914 100%);
}

.circle-right {
    bottom: -400px;
    right: -121px;
    background: linear-gradient(135deg, #d89eb9 0%, #ce7f9c 25%, #ede99a 50%, #5f537b 75%, #1a1317 100%);
    ;
}


body.dark-mode .lo-card {
    color: #F0F0F0;
}

body.dark-mode .lo-card:hover {
    color: #D8A25E;
}

.hero-section {
    min-height: 160vh;
}



.lo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px;
}

.lo-card {
    position: relative;
    padding: 1.5rem 2rem;
    font-weight: bold;
    font-size: 1.25rem;
    color: #0c0c0c;
    text-decoration: none;
    display: block;
}

.lo-card:hover {
    transform: translateY(-5px);
    color: #D8A25E;
}

.lo1-card {
    top: 183px;
    left: 249px;
}


.lo2-card {
    top: 323px;
    left: 70px;
}


.lo3-card {
    top: 492px;
    left: 4px;
}

.lo4-card {
    top: 627px;
    left: 71px;
}

.lo5-card {
    top: 765px;
    left: -64px;
}