/* utils */
body,
html {
    scroll-behavior: smooth;
}

.fit-width {
    display: block;
    width: fit-content;
}
/* End utils */

/* Header */
.header-carousel-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.header-navbar {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 100%;
}

.header-container {
    padding: 0 8px;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.header-button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.header-carousel-next,
.header-carousel-prev {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    font-size: 16px;
    color: var(--white);
    text-align: center;
    opacity: .25;
    transition: var(--transition);
}

.header-carousel-next:hover,
.header-carousel-prev:hover {
    opacity: 1;
    color: var(--white);
}
/* End Header */

/* History */
#history {
    margin-top: 80px;
}

.history-container {
    padding: 0 8px;
}

.history-img-big,
.history-img-small {
    width: 100%;
    height: 328px;
    object-fit: cover;
}
/* End History */

/* Our Services */
#ourServices {
    margin-top: 80px;
}

.service-gutter {
    margin-left: -12px;
    margin-right: -12px;
}

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

.service-items {
    margin-left: 12px;
    margin-right: 12px;
}

.service-item-container {
    width: 100%;
    height: auto;
    position: relative;
}

.service-item-img {
    width: 818px;
    height: 420px;
    object-fit: cover;
}

.service-item-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, rgba(75, 78, 83, 0.5) 0%, rgba(0, 0, 0, 0) 197.37%);
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px;
    display: flex;
    align-items: end;
}

.service-carousel .slick-slide {
    opacity: .1;
    transition: var(--transition);
}

.service-carousel .slick-slide.slick-center {
    opacity: 1;
}

.service-carousel-next,
.service-carousel-prev {
    padding: 0;
    color: var(--primary);
    font-size: 24px;
    line-height: normal;
}
/* End Our Services */

/* Advantages */
#advantages {
    margin-top: 80px;
    padding-top: 48px;
    padding-bottom: 48px;
    background: rgba(136, 149, 142, 0.85);
}

.advantages-container {
    padding: 0 24px;
}

.advantages-item-container {
    padding: 48px;
    border: 1px solid var(--white);
    height: 100%;
}

.advantages-item-img {
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    object-fit: contain;
    display: block;
}

.advantages-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* End Advantages */

/* Why Choose Us */
#whyChooseUs {
    margin-top: 80px;
}

.why-choose-container {
    padding: 0 24px;
}

.why-choose-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.why-choose-gutter {
    margin-left: -4px;
    margin-right: -4px;
}

.why-choose-gutter > [class^="col-"],
.why-choose-gutter > [class^=" col-"] {
    padding-left: 4px;
    padding-right: 4px;
}
/* End Why Choose Us */

/* Products */
#products {
    background-color: #88958E;
    padding-top: 48px;
    padding-bottom: 24px;
    margin-top: 80px;
}

.products-container {
    padding: 0 16px;
}

.products-nav {
    position: sticky;
    top: 24px;
    border-right: 1px solid white;
    width: 100%;
}

.products-nav .nav-link {
    font-family: var(--font-2);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: var(--white);
    background-color: transparent !important;
    border: 0;
    padding: 0;
    text-align: left;
    margin-bottom: 28px;
    transition: var(--transition);
    opacity: .25;
    outline: 0;
    width: fit-content;
}

.products-nav .nav-link:last-of-type {
    margin-bottom: 0;
}

.products-nav .nav-link.active {
    opacity: 1;
}

.products-gutter {
    margin-left: -12px;
    margin-right: -12px;
}

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

.products-item-container {
    width: 100%;
    height: auto;
    position: relative;
}

.products-item-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.products-item-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, #4B4E53 0%, rgba(0, 0, 0, 0) 197.37%);
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 24px;
    opacity: 0;
    transition: var(--transition);
}

.products-item-container:hover .products-item-content {
    opacity: 1;
}
/* End Products proses */

/* Founder */
#founder {
    margin-top: 80px;
}

.founder-container {
    padding: 0 8px;
}

.founder-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.founder-description {
    white-space: pre-line;
}
/* End Founder */

/* Testimoni */
#followOurInstagram {
    margin-top: 80px;
}

.follow-container {
    padding: 0 8px;
}

.follow-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
/* End Testimoni */

@media (max-width: 767.98px) {

    .section-divider {
        margin-top: 64px;
    }

    /* Header */
    .header-navbar {
        position: static;
    }

    .header-carousel-img {
        width: 100%;
        height: 300px;
    }

    .header-navbar {
        background-color: var(--primary);
    }

    .heeder-container {
        transform: translateY(50%);
    }
    /* End Header */

    /* history */
    #history {
        margin-top: 64px;
    }

    .history-img-big,
    .history-img-small {
        height: 200px;
    }
    /* End history */

    /* Our Services */
    #ourServices {
        margin-top: 64px;
    }

    .service-items {
        margin-left: 2px;
        margin-right: 2px;
    }

    .service-item-img {
        width: 80vw;
        height: 220px;
    }
    /* End Our Services */

    /* products */
    .products-nav {
        border-right: 0;
        border-bottom: 1px solid white;
        margin-bottom: 32px;
        width: 100%;
    }

    .products-nav .nav-link {
        margin-bottom: 24px;
        margin-right: 8px;
        margin-left: 8px;
    }

    .products-nav .nav-link:last-of-type {
        margin-bottom: 24px;
    }
    /* End products */
}

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

    /* Header */
    .header-navbar {
        position: static;
    }

    .header-carousel-img {
        width: 100%;
        height: 300px;
    }

    .header-navbar {
        background-color: var(--primary);
    }

    .heeder-container {
        transform: translateY(50%);
    }
    /* End Header */

    /* History */
    .history-img-big,
    .history-img-small {
        height: 240px;
    }
    /* End History */

    /* Our Services */
    .service-item-img {
        width: 80vw;
        height: 220px;
    }
    /* End Our Services */

    /* products */
    .products-nav {
        border-right: 0;
        border-bottom: 1px solid white;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }
    /* End products */

}