/* Utilities (kebutuhan yang berdiri sendiri tanpa section) */

/* End Utilities */

/* Header */
.main-header {
    padding-top: 130px;
    padding-bottom: 56px;
    background-image: url(../../../images/pages/home/header-bg.png);
    height: max-content;
}

.main-header .header-content-container .header-display {
    font-size: 38px;
    font-weight: 700;
    line-height: calc(38px * 1.5);
    color: var(--dark);
}

.main-header .header-content-container .animation-header-display {
    color: var(--primary);
    margin-bottom: 24px;
    height: 52px;
}

.main-header .header-content-container .header-deskripsi {
    font-size: 18px;
    font-weight: 500;
}

.header-carousel-container {
    margin-top: 24px;
}

.header-carousel .slick-list {
    margin: 0 -8px;
}

.header-carousel .slick-slide > div {
    padding: 0 8px;
}

.header-carousel .header-img {
    width: 100%;
    height: 250px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
}

.header-carousel-btn {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px !important;
    color: var(--white);
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background-color: var(--primary);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 10%);
}
.header-carousel-btn:hover {
    background-color: var(--white);
}

.header-carousel-btn.prev {
    left: -25px;
}

.header-carousel-btn.next {
    right: -25px;
}
/* End Header */

/* Tentang Kami - teka */
#tentangKami {
    margin-top: 56px;
    scroll-margin-top: 120px;
}

.teka-header {
    margin-bottom: 32px;
}

.teka-header .teka-subtitle {
    color: var(--grey);
    margin-bottom: 8px;
}

.teka-header .teka-title {
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 16px;
}

.teka-header .body-1 {
    margin-bottom: 0;
    color: var(--grey);
}

.teka-img {
    width: 100%;
    height: 367px;
    border-radius: 8px;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.10);
}

.teka-header .btn-contact-us {
    background-color: var(--primary);
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 32px;
    margin-top: 24px;
}
/* End Tentang Kami */

/* project */
#project {
    background-color: var(--dark-lightest);
    margin-top: 56px;
    padding-top: 56px;
    padding-bottom: 56px;
}

.project-header {
    margin-bottom: 32px;
}

.project-header .project-subtitle {
    color: var(--grey-lightest);
    margin-bottom: 8px;
}

.project-header .project-title {
    color: var(--white);
    margin-bottom: 16px;
    font-weight: 700;
}

.project-header .body-1 {
    color: var(--white);
    margin-bottom: 0;
}

.project-body .nav-pills {
    column-gap: 32px;
}

.project-body .nav-pills .nav-link {
    padding: 0;
    background-color: transparent;
    font-size: 16px;
    font-weight: bold;
    color: var(--grey-lightest);
    border: none;
    transition: var(--transition);
    outline: none;
}
.project-body .nav-pills .nav-link:hover,
.project-body .nav-pills .nav-link.active {
    color: var(--white);
}

.project-body .tab-content {
    margin-top: 32px;
}

.project-body .project-item .card {
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 10%);
    transition: all 0.2s ease;
}

.project-body .project-item .card .card-body {
    padding: 12px;
}

.project-body .project-item .card .card-img-container {
    border-bottom: 1px solid var(--border-color);
    height: 228px;
}

.project-body .project-item .card .card-img-container img {
    width: 100%;
    object-fit: contain;
    height: 207px;
}

.project-body .project-item .card .card-body .product-name {
    color: var(--grey);
    font-weight: 500;
}

.project-body .project-item .card .card-body .product-category {
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 16px;
}

.project-body .project-item .card .card-body .product-discount-wrapper {
    margin-bottom: 16px;
}

.project-body .project-item .card .card-body .discount-percent {
    background-color: #ECFBFF;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.project-body .project-item .card .card-body .discount-percent p {
    font-weight: 600;
}

.project-body .project-item .card .card-body .product-discount-wrapper .body-2:nth-child(2) {
    text-decoration: line-through;
}

.project-body .project-item .card .card-footer {
    background-color: transparent;
}

.project-body .project-item .card .card-footer .btn-buy-product {
    background-color: var(--primary);
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 24px;
    width: 100%;
    transition: all 0.2s ease;
}

.project-body .project-item .card .card-footer .btn-buy-product:hover {
    background-color: var(--primary-darkest);
}

.flash-sale-product-container {
    margin-top: 42px;
}

.flash-sale-product-container .project-header-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flash-sale-product-container .project-header-information .flash-sale-count-wrapper {
    display: flex;
    align-items: center;
    column-gap: 16px;
}

.flash-sale-product-container .project-header-information .flash-sale-count-wrapper .hours .body-1,
.flash-sale-product-container .project-header-information .flash-sale-count-wrapper .minutes .body-1,
.flash-sale-product-container .project-header-information .flash-sale-count-wrapper .seconds .body-1,
.flash-sale-product-container .project-header-information .flash-sale-count-wrapper .divider {
    color: var(--secondary);
    font-size: 24px;
    font-weight: 700;
}

.flash-sale-product-container .project-title::before {
    content: '';
    display: block;
    width: 6%;
    height: 3px;
    margin-bottom: 8px;
    background-color: var(--white);
}
/* project - end */

/* follow-us */
#follow-us {
    margin-top: 56px;
}

.follow-content .header-1 {
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 16px;
}

.follow-content .body-1 {
    color: var(--grey);
    margin-bottom: 0;
}

.follow-image img {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.button-visit-instagram {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding: 16px 32px;
    background-color: var(--secondary);
    color: var(--dark) !important;
    font-weight: 700;
    border-radius: 8px;
    margin-top: 24px;
    text-decoration: none;
}

#followUs .body-1 {
    font-size: 16px;
    color: var(--grey);
    line-height: calc(16px * 1.5);
}
/* follow-us - end */

@media (max-width: 767.98px) {
    .other-team .row > [class^="col-"],
    .other-team .row > [class^="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    #tentangKami .teka-body .row > [class^="col-"],
    #tentangKami .teka-body .row > [class^="col-"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .main-header .header-carousel .header-carousel-img {
        object-fit: cover;
    }

    #tentangKami .row {
        row-gap: 24px;
    }

    #tentangKami .teka-header {
        order: 2;
        text-align: center;
        margin-bottom: 0;
    }
    #tentangKami .teka-body {
        order: 1;
    }

    #tentangKami .teka-body img {
        height: 100%;
    }

    .flash-sale-product-container .row,
    .common-product-container .row {
        row-gap: 32px;
    }

    .project-header-information {
        text-align: center;
    }

    .project-body .project-datas .row .project-img {
        height: 250px;
        object-fit: cover;
    }

    .project-body .nav-project-wrapper {
        overflow-x: scroll;
    }

    .project-body .nav-project-wrapper .nav-pills {
        flex-direction: row;
        column-gap: 22px;
        justify-content: flex-start;
        width: max-content;
    }
    .project-body .nav-project-wrapper .nav-pills .nav-item {
        border-right: 1px solid #575757;
        padding-right: 22px;
    }
    .project-body .nav-project-wrapper .nav-pills .nav-item:last-child {
        border-right: none;
    }
    .project-body .nav-project-wrapper::-webkit-scrollbar {
        height: 5px;
    }
    .project-body .nav-project-wrapper::-webkit-scrollbar-track {
        background-color: transparent;
        border: none;
    }
    .project-body .nav-project-wrapper::-webkit-scrollbar-thumb {
        background-color: var(--primary);
        transition: all 300ms ease;
        cursor: pointer;
        border-radius: 30px;
    }
    .project-body .nav-project-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: var(--primary-darkest);
    }

    .project-body .nav-project-wrapper .nav-pills .nav-link {
        font-size: 16px;
    }

    #follow-us .row {
        row-gap: 32px;
    }

    #follow-us .follow-content {
        text-align: center;
    }

    .team-ceo-container img {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 997.98px) {
    .main-header .header-carousel .header-carousel-img {
        object-fit: cover;
    }

    #tentangKami .teka-img {
        height: 310px;
    }

    .flash-sale-product-container .row,
    .common-product-container .row {
        row-gap: 32px;
    }

    .project-body .project-overlay .img-information {
        row-gap: 8px;
    }

    #follow-us .row {
        row-gap: 32px;
    }
}