body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    /* شاشة التحميل */
    #loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
    }

    /* من كودك */
    .cls-1 {
        fill: #f15a24;
        animation: cls1 4s ease infinite both;
    }

    @keyframes cls1 {
        0% {
            fill: #f15a24;
        }

        34% {
            fill: #ed1c24;
        }

        66% {
            fill: #f7931e;
        }

        100% {
            fill: #f15a24;
        }
    }

    .cls-1,
    .cls-2,
    .cls-3 {
        stroke-width: 0px;
    }

    .cls-2 {
        fill: #f7931e;
        animation: cls2 4s ease infinite both;
    }

    @keyframes cls2 {
        0% {
            fill: #f7931e;
        }

        34% {
            fill: #f15a24;
        }

        66% {
            fill: #ed1c24;
        }

        100% {
            fill: #f7931e;
        }
    }

    .cls-3 {
        fill: #ed1c24;
        animation: cls3 4s ease infinite both;
    }

    @keyframes cls3 {
        0% {
            fill: #ed1c24;
        }

        34% {
            fill: #f7931e;
        }

        66% {
            fill: #f15a24;
        }

        100% {
            fill: #ed1c24;
        }
    }

    #triangle {
        height: 200px;
        width: 200px;
        animation: triangle 4s both infinite;
    }

    @keyframes triangle {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(15px);
        }

        100% {
            transform: translateY(0px);
        }
    }

    /* المحتوى الرئيسي */
    #content {
        display: none;
        padding: 20px;
        text-align: center;
    }