body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background-color: #010d17;
}

::-webkit-scrollbar-thumb {
    background-color: #0355cc;
}

* {
    box-sizing: border-box;
}


.container {
    padding: 0.5rem 1rem;
    margin: 0 auto;
}

@media(min-width: 1280px) {
    .container {
        padding: 0.5rem 10rem;
    }
}



/* Shape in hero section */
.custom-shape-divider-bottom-1728248260 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1728248260 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 129px;
}

.custom-shape-divider-bottom-1728248260 .shape-fill {
    fill: #FFFFFF;
}


/* ********** Start Animation ********** */
.animate-top-bottom {
    animation: top-and-bottom 4s linear infinite;
}

@keyframes top-and-bottom {
    0%, 100% {
        transform: translateY(0);
    }

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

/* ********** End Animation ********** */