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

.page-header {
    padding-top: 13rem;
    padding-bottom: 7rem;
}

.header-background {
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.header-btn-consult {
    background: #EFA029;
    border-radius: 5px;
    padding: 8px 24px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 19.2px;
    color: #FFFFFF;
}

.header-btn-consult-white {
    background: transparent;
    border: 1px solid var(--white);
    border-radius: 5px;
    padding: 8px 24px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 19.2px;
    color: #FFFFFF;
}

/* Service */
.service-card {
    border: 2px solid var(--primary-light);
}

.service-border-vertical {
    border-color: var(--primary-lightest);
}

/* Portofolio */
#portofolio {
    padding-bottom: 4rem;
}

.portofolio-img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}

.portofolio-video {
    width: 880px;
    height: 380px;
    margin-bottom: 16px;
    border: 2px solid var(--primary-base);
    padding: 8px;
    border-radius: 8px;
}

.portofolio-video-item {
    margin-left: 8px;
    margin-right: 8px;
}

.portofolio-photo-item {
    margin-left: 8px;
    margin-right: 8px;
}

.portofolio-photo-img {
    width: 280px;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
}

.portofolio-design-img {
    width: 100%;
    height: 200px;
    border: 2px solid var(--primary-base);
    border-radius: 8px;
    object-fit: cover;
}

.portofolio-design-item {
    margin-right: 8px;
}

.portofolio-arrow {
    cursor: pointer;
}

/* Price */
.price-card .card-footer.first {
    background-color: var(--primary-lightest);
    padding: .5rem;
}

.price-card .card-footer.second {
    background-color: var(--primary-light);
    padding: .5rem;
}

.price-card .card-footer.third {
    background-color: var(--primary-dark);
    padding: .5rem;
}

.price-card .card-footer.fourth {
    background-color: var(--primary-darkest);
    padding: .5rem;
}

.price-table th {
    background-color: var(--primary-darkest) !important;
    border-color: var(--primary-darkest) !important;
    color: var(--white) !important;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 19.2px;
}

.price-table td {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--black) !important;
}

.price-btn {
    background: var(--secondary-base);
    border-radius: 5px;
    padding: 8px 24px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    color: var(--white);
}

.price-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Advantages */
#advantages {
    background: var(--primary-lighter);
    padding: 48px 0;
}

.advantages-arrow {
    cursor: pointer;
}

.horizontal-scrollable.row {
    overflow-x: hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 24px;
}

.horizontal-scrollable.row:hover {
    overflow-x: scroll;
}

/* testimony */
#testimony {
    padding-top: 48px;
}

.testimony-accent {
    width: 12%;
    top: 30%;
    height: auto;
    position: absolute;
    right: 0;
}

.testimony-hr {
    border-color: var(--primary-lightest);
}

/* Call us */
#call {
    margin-bottom: 48px;
}

.call-btn {
    background: var(--secondary-base);
    border-radius: 5px;
    padding: 8px 24px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 19.2px;
    color: var(--white);
}

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

    .mobile-marginT-0 {
        margin-top: 0 !important;
    }

    .service-border-horizontal {
        border: 0;
    }

    #price {
        margin-bottom: 5rem;
    }

    #advantages {
        margin-bottom: 5rem;
    }

    #call {
        margin-bottom: 5rem;
    }

    .horizontal-scrollable.row {
        overflow-x: hidden;
        flex-wrap: wrap;
        white-space: normal;
        padding-bottom: 0;
    }

    .portofolio-img {
        height: 65vw;
    }
}

@media only screen and (max-width: 767.98px) {

    .page-header {
        padding-top: 15rem;
        padding-bottom: 2rem;
    }

    .horizontal-scrollable.row {
        overflow-x: hidden;
        flex-wrap: wrap;
        white-space: normal;
        padding-bottom: 0;
    }

    .header-mobile-btn {
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-bottom: 24px;
    }

    .service-border-horizontal {
        border: 0;
    }

    #price {
        margin-bottom: 5rem;
    }

    #advantages {
        margin-bottom: 5rem;
    }

    .testimony-img {
        width: 75px;
        height: 75px;
        object-fit: contain;
    }

    #call {
        margin-bottom: 5rem;
    }

    .portofolio-img {
        height: 60vw;
    }
}