/* Header */
.page-header {
    padding-top: 122px;
    padding-bottom: 0;
}

.card {
    background-color: white;
    box-shadow: var(--shadow);
}

.header-card .card-body {
    padding: 32px;
}

.header-title {
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    color: var(--black);
    margin-bottom: 8px;
}

.header-divider {
    border-color: var(--primary);
    margin: 24px 0;
}

.header-gutter {
    margin-left: -8px;
    margin-right: -8px;
}

.header-middle-border {
    border-left: 1px solid var(--primary);
    border-right: 1px solid var(--primary);
}

.header-gutter > [class^="col-"],
.header-gutter > [class^=" col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.header-button {
    background: var(--accent);
    border-radius: 8px;
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    transition: var(--transition);
}

.header-button:hover {
    filter:brightness(.9);
    color: var(--white);
}

.header-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.header-carousel .slick-dots li button:before {
    color: #C4C4C4;
    opacity: 1 ;
}

.header-carousel .slick-dots li.slick-active button:before {
    color: var(--primary) ;
    opacity: 1 ;
}
/* End Header */

/* Divider */
.divider hr {
    border-color: var(--primary);
    margin-top: 64px;
    margin-bottom: 64px;
}
/* End Divider */

/* Detail */
.detail-card {
    background-color: white;
    box-shadow: var(--shadow);
}

.detail-card .card-body {
    padding: 32px;
}

.detail-title {
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    color: var(--black);
    margin-bottom: 16px;
}

.detail-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
/* End Detail */

/* Information Card */
.information-card {
    background-color: white;
    box-shadow: var(--shadow);
}

.information-card .card-body {
    padding: 32px;
}

.information-title {
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    color: var(--black);
    margin-bottom: 4px;
}
/* End Information Card */

/* Donatur Card */
.donatur-card {
    background-color: white;
    box-shadow: var(--shadow);
}

.donatur-card .card-body {
    padding: 32px;
}

.donatur-title {
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    color: var(--black);
    margin-bottom: 4px;
}

.donatur-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--primary);
}

.donatur-item:last-child {
    margin-bottom: 0;
}
/* End Donatur Card */

@media (min-width: 768px) and (max-width: 997.98px) {

    /* Header */
    .header-img {
        height: 240px;
    }

    .header-button {
        width: 100%;
    }
    /* End Header */

}

@media (max-width: 767.98px) {

    /* Header */
    .header-card .card-body {
        padding: 16px;
    }

    .header-img {
        height: 200px;
    }

    .header-title {
        font-size: 24px;
    }

    .header-middle-border {
        padding-top: 16px;
        margin-top: 16px;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--primary);
        border-bottom: 1px solid var(--primary);
    }

    .header-button {
        width: 100%;
    }
    /* End Header */

    /* Divider */
    .divider hr {
        margin-top: 48px;
        margin-bottom: 48px;
    }
    /* End Divider */

    /* Detail */
    .detail-title {
        font-size: 24px;
    }

    .detail-card .card-body {
        padding: 16px;
    }

    .detail-img {
        height: 300px;
    }
    /* End Detail */

    /* Information */
    .information-card .card-body {
        padding: 16px;
    }

    .information-title {
        font-size: 24px;
    }
    /* End Information */

    /* Donatur */
    .donatur-card .card-body {
        padding: 16px;
    }

    .donatur-title {
        font-size: 24px;
    }
    /* End Donatur */

}