/**
 * Custom Header
 */

/* .header-container {
    position: absolute;
}

.header-container.active {
    position: fixed;
} */

.header-logo-img {
    background: url('../../img/front/pt_sarana_nikoteknik_red_logo.svg') no-repeat;
}

.home-nav-group.active {
    position: fixed;
    z-index: 11;
}

.home-nav-group {
    height: 72px;
    border-bottom: 1px solid #ff0000;
}

.home-nav-group:before {
    top: -0.5px;
    height: calc(100% + 2px);
    background: url(../../img/front/header_3.svg) no-repeat;
}

.home-nav-group:after {
    width: calc(354px + 0px);
    height: 100%;
    border-top: 1px solid #ff0000;
    right: calc(100% + 51px);
    top: 0px;
    background: transparent !important;
}

.bl-container {
    position: relative;
    display: block;
    font-size: 0px;
    /* width: calc((100% - (16px * 2)) + (32px * 2)); */
    width: calc((100% - (16px * 2)));
    max-width: calc(1408px + (32px));
    margin: 0px auto calc(115px - 90px);
    padding-top: 175px;
}

.bl-container > * {
    font-size: 14px;
}

.bl-title {
    position: relative;
    display: table;
    font-size: 38px;
    line-height: 33px;
    margin: 0px auto 90px;
    letter-spacing: 1px;
}

.home-bl-item {
    margin: 0px 16px 90px;
    width: calc((100% / 4) - 32px);
}

.bl-back {
    position: absolute;
    display: block;
    left: 55px;
    top: 135px;
    font-size: 14px;
    line-height: 16px;
    color: #222;

    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    transition: color 0.4s;
}

.bl-back:hover {
    color: #ff0000;

    -webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    transition: color 0.4s;
}

.bl-back:before {
    content: "\F12F";
    font-family: "bootstrap-icons";
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 6px;
}

.bl-detail-container {
    position: relative;
    display: block;
    font-size: 0px;
    /* width: calc((100% - (16px * 2)) + (32px * 2)); */
    width: calc((100% - (16px * 2)));
    max-width: 875px;
    margin: 0px auto 120px;
    padding-top: 190px;
}

.bl-detail-title {
    position: relative;
    display: block;
    font-size: 38px;
    line-height: 48px;
    text-align: center;
    margin: 0px auto 17px;
    font-weight: normal;
}

.bl-detail-date {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin: 0px auto 20px;
}

.bl-detail-img {
    position: relative;
    display: block;
    width: 100%;
    margin: 0px auto 40px;
}

.bl-detail-desc {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 24px;
    margin: 0px auto 60px;
}

.bl-detail-desc p {
    padding-top: 25px;
    margin: 0px;
}

.bl-detail-desc p:first-child {
    padding-top: 0px;
}

.bl-detail-share {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0px;
    text-align: center;
}

.bl-detail-share > * {
    font-size: 16px;
    line-height: 16px;
}

.bl-detail-share:before {
    content: '';
    position: relative;
    display: block;
    width: 145px;
    height: 2px;
    background: #222;
    margin: 0px auto 30px;
}

.bl-detail-share-text {
    position: relative;
    display: block;
    margin: 0px auto 20px;
}

.bl-detail-socmed {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: #222;
    color: #fff;
    text-align: center;
    margin: 0px 6px;

    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    transition: background 0.4s;
}

.bl-detail-socmed:hover {
    background: #ff0000;

    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    transition: background 0.4s;
}

.bl-detail-socmed:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 100%;
    height: 100%;
}

.bl-detail-socmed.facebook:before {
    background: url('../../img/front/facebook-icon-white.png') no-repeat;
    background-size: auto 14px !important;
    background-position: 50% !important;
}

.bl-detail-socmed.linkedin:before {
    background: url('../../img/front/linkedin-icon-white.png') no-repeat;
    background-size: auto 14px !important;
    background-position: 50% !important;
}

.bl-detail-socmed.mail:before {
    background: url('../../img/front/email_white_icon.svg') no-repeat;
    background-size: 21px 14px !important;
    background-position: 50% !important;
}

.pagination {
    justify-content: center;
    align-items: center;
    text-align: center;
}


@media screen and (max-width : 1024px) {
    .home-bl-item {
        margin: 0px 16px 90px;
        width: calc((100% / 3) - 32px);
    }
}

@media screen and (max-width : 768px) {
    .home-bl-item {
        margin: 0px auto 50px;
        width: calc((100% / 3) - 16px);
    }
}

@media screen and (max-width : 500px) {
    .home-bl-item {
        width: 100%;
        /* left: -16px !important; */
        /* border-radius: 0px !important; */
    }

    .bl-detail-img {
        width: calc(100% + 32px);
        margin: 0px -16px 40px;
        max-width: unset;
        border-radius: 0px;
    }

    .bl-back {
        left: 16px;
    }
}