@import url('https://fonts.googleapis.com/css2?family=Tajawal&display=swap');


/* font color 
green
#31724e
#49a370
#1a3f26

gold
#ecc65b
#d19f47
#b78242

*/

/* general styling */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background-color: #fcfbf6
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.accordion .card {
    background-color: #fcfbf6
}

.accordion .card .card-body {
    font-size: 18px
}


.carousel-caption {
    top: 30%;
}

.view video {
    max-width: 100%;
    width:-webkit-fill-available;
}


    .carousel-caption h1 {
        font-size: 8rem;
        font-weight: 600;
    }


.timeline {
    position: relative;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

    .timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        margin-left: -1px;
        background-color: #49a370;
    }

.timeline-element {
    position: relative;
    width: 50%;
    padding: 1rem 0;
    padding-right: 2.5rem;
    text-align: right;
    direction: rtl
}

    .timeline-element::before {
        content: '';
        position: absolute;
        right: -16px;
        top: 1.35rem;
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #31724e;
        background-color: #fcfbf6;
        box-shadow: 0 0 0 rgba(204,169,44, 0.4);
        -webkit-animation: pulse 2s infinite;
        animation: pulse 2s infinite;
    }

    .timeline-element:nth-child(odd)::before {
        right: auto;
        left: -16px;
    }

    .timeline-element:nth-child(odd) {
        margin-left: 50%;
        padding-left: 2.5rem;
        padding-right: 0;
        text-align: left;
    }


    .timeline-element i {
        color: #d19f47;
        animation-name: change-color;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

@keyframes change-color {
    from {
        color: #31724e;
    }

    to {
        color: #497c59;
    }
}


@media (max-width: 767.98px) {

    #logo {
        width: 50px;
    }

    .carousel .carousel-inner .active h1 {
        font-size: 40px;
    }
    .carousel .carousel-inner .active h3 {
        font-size: 16px;
    }
    .carousel .carousel-inner .active span {
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    .timeline::before {
        left: 8px;
    }
}

@media (max-width: 767.98px) {
    .timeline-element {
        width: 100%;
        text-align: left;
        padding-left: 2.5rem;
        padding-right: 0;
    }
}

@media (max-width: 767.98px) {
    .timeline-element::before {
        top: 1.25rem;
        right: 93.5%;
    }
}

@media (max-width: 767.98px) {
    .timeline-element:nth-child(odd) {
        margin-left: 0rem;
    }
}

@media (max-width: 767.98px) {
    .timeline-element {
        width: 100%;
        text-align: left;
        padding-left: 2.5rem;
        padding-right: 0;
    }
}

@media (max-width: 767.98px) {
    .timeline-element:nth-child(odd)::before {
        right: 93.5%;
    }
}

@media (max-width: 767.98px) {
    .timeline-element::before {
        top: 1.25rem;
    }
}


.page-footer {
    background-color: #49a370 !important;
}

.footer-copyright {
    background-color: #31724e !important;
}