@tailwind base;
@tailwind components;
@tailwind utilities;

 /* Rotate arrow with a delay when details are open */
details[open] .arrow {
    transition-delay: 0.05s; /* Delay before rotation starts */
    transform: rotate(90deg);
}

/* Initial state with a transition setting that includes delay */
.arrow svg {
    transition: transform 0.2s ease 0.3s; /* Delay at the end of the first state */
}

/* Hide the paragraph initially */
details:not([open]) .details-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease 0.2s;
}

/* Show the paragraph when details are open */
details[open] .details-content {
    max-height: 1000px; /* Arbitrary large value to accommodate content */
    opacity: 1;
    transition: max-height 0.5s ease 0.5s, opacity 0.5s ease;
}