@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* font familly */
* {
    font-family: "Inter", sans-serif;
    scroll-margin-top: 100px;
}

.whatsapp-btn {
    background: rgba(13, 174, 24, 1);
    position: fixed;
    right: 15px;
    bottom: 80px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    z-index: 10000;
    color: white;
    font-size: 30px;
    font-weight: bold;
}

/* text orange */
.text-orange {
    color: #f97316;
}

.text-orange:hover {
    color: #f97316;
}

/* text 333 */
.text-dark-3 {
    color: #333;
}

/* text 555 */
.text-dark-5 {
    color: #555;
}

/* text 888 */
.text-dark-8 {
    color: #888;
}

/* background-orange */
.bg-orange {
    background-color: #F97316;
}

/* background purple */
.bg-purple {
    background-color: #002A38;
}

/* font weight */
.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

/* width fit-content */
.fit-content {
    width: fit-content;
}

/* button orange active */
.btn.bg-orange-active {
    background: rgba(249, 115, 22, 0.2);
    color: #f46a35;
    font-weight: 600;
    text-decoration: underline;
}

.btn.bg-orange-active:hover,
.btn.bg-orange-active:active,
.btn.bg-orange-active:focus {
    background: rgba(249, 115, 22, 0.2);
    color: #f46a35;
    font-weight: 600;
    text-decoration: underline;
}

/* button orange */
.btn.btn-orange {
    background-color: #f46a35;
    color: #fff;
}

.btn.btn-orange:hover,
.btn.btn-orange:active,
.btn.btn-orange:focus {
    background-color: #ef4a08;
    color: #fff;
}

/* button purple active */
.btn.bg-purple-active {
    background: rgba(249, 115, 22, 0.2);
    color: #002A38;
    font-weight: 600;
    text-decoration: underline;
}

.btn.bg-purple-active:hover,
.btn.bg-purple-active:active,
.btn.bg-purple-active:focus {
    background: rgba(249, 115, 22, 0.2);
    color: #002A38;
    font-weight: 600;
    text-decoration: underline;
}

/* button purple */
.btn.btn-purple {
    background-color: #002A38;
    color: #fff;
}

.btn.btn-purple:hover,
.btn.btn-purple:active,
.btn.btn-purple:focus {
    background-color: #001e38;
    color: #fff;
}

/* nav style */
.navbar {
    z-index: 999;
}

.navbar-nav .nav-link {
    color: #333;
}

.navbar-nav .nav-link:hover {
    color: #f46a35;
}

.navbar-nav .nav-link.active {
    color: #f46a35;
    font-weight: 600;
}

/* dropdwown navbar */
.navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    color: #f46a35;
}

/* dropdown navbar menu program */
.dropdown-menu-program {
    background: url("/storage/img/background-menu-program.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 99;
    top: -800px;
    left: 0;
    right: 0;
    transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -webkit-transition: .5s ease-in-out;
}

.dropdown-menu-program.show {
    top: 100%;
}

.menu-item-program .card {
    background-color: transparent;
}

.menu-item-program:hover .card {
    background-color: #F4F4F4;
}

.menu-item-program.active .card {
    background-color: #F4F4F4;
}

/* footer style */
footer .nav-link {
    color: #fff;
}

footer .nav-link:hover {
    color: #f46a35;
}

/* background hero homepage */
.background-hero-home {
    background: url("/storage/img/homepage/background-hero.png");
    background-position: center;
    background-repeat: no-repeat;
}

/* background help homepage */
.background-help-home {
    background: url("/storage/img/homepage/background-help.png");
    background-position: center;
    background-repeat: no-repeat;
}

/* background article homepage */
.background-article-home {
    background: url("/storage/img/homepage/background-article.png");
    background-position: center;
    background-repeat: no-repeat;
}

/* background banner homepage */
.background-banner-home {
    background: url("/storage/img/homepage/background-banner.png");
    background-position: center;
    background-repeat: no-repeat;
}

/* background hero about */
.background-hero-about {
    background: url("/storage/img/about/background-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* background contact about */
.background-contact-about {
    background: url("/storage/img/about/background-contact.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* background banner about */
.background-banner-about {
    background: url("/storage/img/about/background-banner.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* background banner portfolio */
.background-hero-portfolio {
    background: url("/storage/img/portfolio/background-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* background banner media */
.background-hero-media {
    background: url("/storage/img/media/background-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* background banner mitra */
.background-hero-mitra {
    background: url("/storage/img/mitra/background-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* text header detail portfolio */
.text-header-portfolio {
    top: 15%;
}

/* nav link content detail portfolio */
#content-detail-portfolio .nav-link {
    padding: .6em 1em;
}

#content-detail-portfolio .nav-link:hover,
#content-detail-portfolio .nav-link.active {
    background-color: #F4F4F4;
    border-radius: 4px;
    padding: .6em 1em;
    font-weight: 600;
}

/* menu detail portfolio */
#menu-detail-portfolio {
    position: -webkit-sticky;
    position: sticky;
    top: 10%;
}

/* other portfolio */
#other-portfolio {
    background-color: #F2F4F7;
}

/* list reason */
#list-reason {
    list-style-type: none;
    padding-left: 0;
}

#list-reason li {
    margin-bottom: 1.2em;
}

#list-reason .row div.text-end {
    width: fit-content;
}

/* custom icon navigation swiper */
.swiper-button-prev,
.swiper-button-next {
    background-color: #fff;
    padding: 1.2em;
    border-radius: 100%;
    height: 10px;
    width: 10px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #ff8a00;
}

/* alert width fit content */
.alert.alert-fit-content {
    width: fit-content;
}

/* accordion style */
.accordion .accordion-item button.accordion-button {
    color: #333;
    font-weight: 600;
    background-color: transparent;
}

ul.pagination li.page-item.active span {
    background-color: #f46a35;
    border-color: #f46a35;
    color: #fff;
}

ul.pagination li.page-item a.page-link {
    color: #555;
}

/* Tab portfolio style */
ul.nav.nav-tabs.tab-porfolio,
ul.nav.nav-tabs.tab-porfolio li.nav-item a.nav-link {
    border: none;
    border-radius: 5px;
}

ul.nav.nav-tabs.tab-porfolio li.nav-item a.nav-link {
    padding: 5px 15px;
    color: #333;
}

ul.nav.nav-tabs.tab-porfolio li.nav-item a.nav-link.active-link,
ul.nav.nav-tabs.tab-porfolio li.nav-item a.nav-link.active {
    background: rgba(249, 115, 22, 0.2);
    color: #f46a35;
    font-weight: 600;
}

#detail-program-pendampingan {
    background: url('../../../storage/img/background-patern.svg');
    height: 250px;
    width: 100%;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
}

#detail-program-pendampingan::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.309);
}

#detail-program-pendampingan .title-program {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    width: fit-content;
}

/* breakpoints responsive */
@media (min-width: 576px) {
    #list-reason .row div.text-end {
        width: fit-content;
    }

    .text-header-portfolio {
        top: 20%;
    }
}

@media (min-width: 768px) {
    #list-reason .row div.text-end {
        width: fit-content;
        height: 70px;
    }

    .text-header-portfolio {
        top: 30%;
    }
}

@media (min-width: 992px) {
    #list-reason .row div.text-end {
        width: fit-content;
        height: 70px;
    }

    .text-header-portfolio {
        top: 40%;
    }
}

@media (min-width: 1200px) {
    #list-reason .row div.text-end {
        width: fit-content;
        height: 70px;
    }

    .text-header-portfolio {
        top: 40%;
    }
}

@media (min-width: 1400px) {
    #list-reason .row div.text-end {
        width: fit-content;
        height: 70px;
    }

    #list-reason {
        list-style-type: none;
        padding-left: 0;
        margin-left: -1.6em;
    }

    .text-header-portfolio {
        top: 40%;
    }
}