body {
    font-family: sofia-pro, sans-serif;
    line-height: 1.6;
}

.header,
footer {
    background-color: #391643;
    color: white;
}

.header {
    /*background-image: url('img/1.jpg');*/
    background-position: center;
    background-repeat: no-repeat;
    height: 650px;
}

.content_img_colum {
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.page_content {
    letter-spacing: 0.5px;
}

.content_img_colum {
    background-position-y: center;
    background-position-x: center;
    min-height: 650px;
}

.nav-link {
    color: white;
}

.nav,
.navbar-nav {
    --bs-nav-link-hover-color: #FDE000;
}

.gradient_bar {
    height: 8px;
    background-color: #FD6C0F;
    /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #FD6C0F, #FDE000, #FF0058, #391643);
}


.bg-red {
    background-color: #fcdce7 !important;
}

.bg-orange {
    background-color: #fcb98d !important;
}

.bg-purple {
    background-color: #391643 !important;
}

.bg-purple-80 {
    background-color: #39164380 !important;
}

.bg-yellow {
    background-color: #FDE000 !important;
}

.bg-grey{
    background-color: #f7f7f7f7;
}

.color-red {
    color: #FF0058;
}

.color-orange {
    color: #FD6C0F;
}

.color-purple {
    color: #391643;
}

.color-yellow {
    color: #FDE000;
}


.border-yellow {
    border: 1px solid #FDE000;
}

.btn-yellow {
    color: black;
    background-color: #FDE000;
}

.btn-yellow:hover {
    color: white;
    background-color: #FD6C0F;
}

table {
    --bs-table-border-color: #39164340 !important;
    --bs-table-hover-bg: #FDE00010 !important;
}


.img-team {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.header-content-left {
    width: 50%;
}

.header-content-right {
    width: 22rem;
}
.a-bg-purple{
    color:white !important;
}

.a-bg-purple:hover{
    color: #FDE000 !important;
}

@media (max-width: 767.98px) {
    .header,
    .content_img_colum {
        background-size: auto 100%;
    }

    .img-chart {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .header {
        height: 100%;
    }
}

@media (max-width: 992px) {

    .header {
        height: 100%;
    }

    .header-content-left{
        margin-bottom: 30px;
    }

    .header-content-left,
    .header-content-right{
        width: 100%;
    }
}