@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap");

html, body {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    scroll-behavior: smooth;
}

@keyframes float-once {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.float-animation-once {
    animation: float-once 2s ease-out forwards;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-to-animate {
    opacity: 0; /* Hidden initially */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate {
    animation: fade-in-up 1s ease forwards; /* Apply fade-in-up when visible */
}

.tooltip {
    position: absolute;
    bottom: 150%; /* Adjusted for better spacing */
    left: 50%;
    transform: translateX(-50%);
    background-color: #e2e8f0; /* Navy blue for a modern feel */
    color: #0c0c0c; /* Soft white with a hint of blue for readability */
    padding: 10px 12px; /* Enhanced padding for better spacing */
    border-radius: 8px; /* Softer rounded corners */
    font-size: 0.875rem; /* Base font size */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    white-space: normal; /* Allows multi-line text */
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    max-width: 200px; /* Restricts the tooltip width */
    text-align: center;
    width: 140px;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #222222 transparent transparent transparent;
}

.group:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Smooth Rotation Animation */
.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in;
}

details summary {
    list-style: none; /* Removes default arrow */
}

details[open] summary::before, /* Removes any pseudo-elements used for the arrow */
details summary::before {
    display: none;
}

/* Remove default arrow from <details> */
details summary::-webkit-details-marker {
    display: none; /* For Safari and WebKit browsers (like iPhone) */
}

details summary {
    list-style: none; /* Removes marker for other browsers */
}