body {
    background-image: url("https://images6.alphacoders.com/317/thumb-1920-317353.jpg");
    background-color: rgb(0, 0, 0);
    background-repeat: no-repeat;
    margin: 0;
    font-family: sans-serif;
    color: #fff;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Dark overlay */
    z-index: -1;
}

/* Custom CSS for Dropdown */
.group:hover .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown {
    transition: opacity 0.2s ease-in-out, visibility 0.2s linear;
    visibility: hidden;
    opacity: 0;
}

.group:hover .dropdown {
    visibility: visible;
    transition-delay: 0.2s;
}

/* Remove gap between button and dropdown */
.dropdown {
    top: 100%; /* Ensure dropdown is flush with button */
    margin-top: 0; /* Remove any margin */
}

/* Optional: Add a pseudo-element to bridge any remaining gap */
.group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 8px; /* Adjust height to cover gap */
    background: transparent;
    z-index: 10;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    width: 300px;
    animation: float 3s ease-in-out infinite;
}

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

.typing-container {
    text-align: center;
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.typing-text {
    font-size: 40px;
    font-weight: bold;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    margin: 0 auto;
    gap: 10px;
}

.static-text {
    display: inline-block;
}

.typing-word {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.typing-word::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 0.15em;
}

.highlight {
    background-color: rgba(107, 183, 255, 0.466);
    color: #ffffff;
}

.typing-word {
    color: rgb(99, 102, 255);
}

.wave-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wave {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113.64,28.29,1200,28.29V0H0Z' fill='%2343707C'/%3E%3C/svg%3E");
    background-size: cover;
    top: 0;
    transform: scaleY(-1);
}

.wave-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113.64,28.29,1200,28.29V0H0Z' fill='%2343707C'/%3E%3C/svg%3E");
    background-size: cover;
}

.cate {
    padding: 0;
    margin: 0;
    background-color: #43707C;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 30px;
}

#pack {
    background-color: #00353D;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 240px;
    max-width: 240px;
}

#pack h1, h2, h3, h4, p {
    margin: 0;
    text-align: center;
}

#pack img {
    border-radius: 50%;
    filter: drop-shadow(0px 0px 5px rgb(255, 255, 255));
    width: 96px;
}

#pack button {
    display: inline-block;
    outline: 0;
    border: none;
    box-shadow: none;
    cursor: pointer;
    padding: 10px 24px;
    font-size: 20px;
    height: 50px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: normal;
    background: linear-gradient(90deg,#5522fa 0,#0074e4 100%);
    border-radius: 50px;
    transition: color .2s ease,background-color .2s ease,box-shadow .2s ease;
    :hover{
        box-shadow: 0 0 0 0.15rem #5ceace;
    }
}

#detail p {
    text-align: left;
}

#img img {
    height: 350px;
}
#min {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
#min div {
    color: #d8d8d8;
}

.ping-selection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.ping {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #43707C;
    width: 200px;
    max-width: 200px;
    border-radius: 12px;
    padding: 10px;
}

.ping img {
    border-radius: 20px;
}

.ping h2 {
    color: #f0f0f0;
}