:root {
    --color-1: #0F4A5E;
    --color-2:#308ACA;
    --color-3:#6DBF6B;
    --color-4:#FFEEC7;
    --color-5:#E14B4B;
    --color-6:#454C52;
    --shadow-1: rgba(0, 0, 0, 0.25);
}

/* ------------ text -------------------- */
.text-color1 {
    color: var(--color-1) !important
}
.text-color2 {
    color: var(--color-2) !important
}
.text-color3 {
    color: var(--color-3) !important
}
.text-color5 {
    color: var(--color-5) !important
}
.text-color6 {
    color: var(--color-6) !important
}
.font-24 {
    font-size: 24px !important
}
/* ------------ end text -------------------- */

/* ------------ background -------------------- */
.bg-color1{
    background-color: var(--color-1) !important;
}
.bg-color4{
    background-color: var(--color-4) !important;
}

/* ------------ end background -------------------- */

/* ------------ border -------------------- */
.border-rd5px {
    border-radius: 5px !important
}

/* ------------ end border -------------------- */

/* ------------ banner -------------------- */
.breadcrumbs .breadcrumb-blog h1 {
    color: var(--color-1) !important;
    font-weight: var(--font-weight-semibold)
}

.breadcrumbs .breadcrumb-blog h2 {
    color: var(--black-color) !important;
    font-size: var(--h6-font-size)
}

.breadcrumbs .breadcrumb-blog {
    text-align: center;
    padding-top: 5px !important;
    padding-bottom: 20px !important
}

#banner-content {
    background-image: url(../images/finance/banner-content-financ-lg.webp);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 320px
}
#img_promote{
    width: 100%;
    height: auto;
}
/* ------------ end banner -------------------- */
/* ------------ other -------------------- */
.shadow1 {
    box-shadow: 0 4px 4px var(--shadow-1) !important
}
.mw-200px {
    max-width: 200px;
    width: 100%
}
.mw-1000px {
    max-width: 1000px;
    width: 100%;
}
.mw-1080px {
    max-width: 1080px;
    width: 100%
}
.w-fitcontent{
    width: fit-content;
}

/* ------------ end other -------------------- */
/* ------------ screen -------------------- */
@media only screen and (max-width:768px) {
    #banner-content {
        background-image: url(../images/finance/banner-content-financ-mb.webp);
        background-position: top 0 center;
        max-width: 750px !important;
        width: 100%;
        height: 220px !important;
        object-fit: contain;
        object-position: 50% 0;
        aspect-ratio: 4/3
    }

    .breadcrumbs .breadcrumb-blog h1 {
        padding-top: 50px
    }

}
@media only screen and (max-width:623px) {
    .colhl1{
        display: none !important;
    }
  .colhl2{
        width:  100% !important;
    }


}

@media only screen and (max-width:576px) {
    .breadcrumbs .breadcrumb-blog h1 {
        font-size: var(--h4-font-size)
    }

}
@media only screen and (max-width:575px) {
    #lineadd1 {
        display: block !important;
    }

    #lineadd2 {
        display: none;
    }
}
