@font-face {
    font-family: 'dinarbold';
    src: url('fonts/alfont_com_GE-Dinar-One-Bold-1.otf') format('opentype');

}

@font-face {
    font-family: 'dinarlight';
    src: url('fonts/dinar-light.otf') format('opentype');

}

@font-face {
    font-family: 'dinarmedium';
    src: url('fonts/dinar-medium.otf') format('opentype');

}


.font-dinarbold {
    font-family: 'dinarbold';
}

.font-dinarlight {
    font-family: 'dinarlight';
}

.font-dinarmedium {
    font-family: 'dinarmedium';
}

.timeline {
    margin: 4em auto;
    position: relative;
    max-width: 50em;


}

.timeline:before {
    background-color: #000;
    content: "";
    margin-left: 108%;
    position: absolute;
    top: 0;
    left: 2em;
    width: 1.4px;
    height: 100%;
}


.timeline-event {
    position: relative;

}

.timeline-event:hover .timeline-event-icon {
    transform: rotate(-45deg);
    background-color: #0590D2;
}

.timeline-event:hover .timeline-event-thumbnail {
    box-shadow: inset 40em 0 0 0 #000;
}

.timeline-event-copy {
    /* padding: 2em; */
    /* position: relative; */
    top: -1.875em;
    /* left: 4em; */
    /* width: 80%; */
}


.timeline-event-copy strong {
    font-weight: 700;
}

.timeline-event-copy p:not(.timeline-event-thumbnail) {
    padding-bottom: 1.4em;
}

.timeline-event-icon {
    transition: transform 0.2s ease-in;
    transform: rotate(45deg);
    background-color: #ffff;
    outline: 13px solid #0590D2;
    display: block;
    margin: 0.7em 0.5em 0.5em -0.5em;
    position: absolute;
    top: 0;
    left: 2em;
    width: 2px;
    height: 2px;
    margin-left: 110px;
}


.timeline-event-thumbnail {
    transition: box-shadow 0.5s ease-in 0.1s;
    color: #fff;
    font-size: 1.1em;
    background-color: #0590D2;
    box-shadow: inset 0 0 0 0em #0590D2;
    display: inline-block;
    margin-bottom: 1.2em;
    padding: 0.25em 1em 0.2em 1em;
}

/* Adjustments for larger screens */
@media (min-width: 768px) {
    .timeline {
        left: 10%;
    }

    .timeline:before {
        margin-left: 107%;
        width: 2px;
    }

    .timeline-event-copy {
        left: 4em;
    }

    .timeline-event-icon {
        margin-left: 107%;
    }
}

/* Adjustments for iPad screens */
@media (min-width: 768px) and (max-width: 1024px) {
    .timeline {
        right: 1%;
    }

    .timeline:before {
        margin-left: 106%;
    }

    .timeline-event-copy {
        left: 2em;
        width: 90%;
    }

    .timeline-event-icon {
        margin-left: 106%;
    }
}

/* Adjustments for smaller screens */
@media (max-width: 767px) {
    .timeline {
        max-width: 100%;
        left: 0;
    }

    .timeline:before {
        margin-left: 0;
        margin-right: 2%;
        right: 2em;
    }

    .timeline-event-copy {
        right: 4em;
        width: 100%;
    }

    .timeline-event-icon {
        margin-left: 0;
        margin-right: 2%;
        right: 2em;
    }
}

.timeline-event-copy {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

.timeline-event-copy.show {
    opacity: 1;
    transform: translateY(0);
}


/**/
/* تأثيرات الحركة */
.animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

.animate.show {
    opacity: 1;
    transform: translateY(0);
}

@keyframes typing {
    0% {
        width: 0;
    }
    50% {
        width: 50%;
    }
    100% {
        width: 100%;
    }
}

.typing-animation {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 4s steps(27, end) infinite;
}