/* Utilities */
html {
    scroll-behavior: smooth;
}

.modal-iframe {
    width: 100%;
    height: 80vh;
}
/* End Utilities */

/* Navbar */
.navbar {
    background-color: #0391df;
}

.navbar-marketing.navbar-light.navbar-scrolled {
    background-color: #0391df !important;
}

.navbar-public {
    display: none;
}
/* End navbar */


/* Header */
header {
    background-color: #0391df;
}

.page-header {
    padding-top: 9rem;
    padding-bottom: 4rem;
}

.header-desc {
    width: 75%;
}
/* End Header */


/* Promotion Banner */
#promotionBanner {
    background: linear-gradient(180deg, rgba(242, 242, 242, 0.2) -59.22%, rgba(196, 196, 196, 0.2) 215.22%);
}

.proba-image {
    width: 100%;
    height: 268px;
    object-fit: cover;
    border: 3px solid var(--secondary);
    border-radius: 15px;
}

.proba-carousel-1 .slick-dots li.slick-active button::before,
.proba-carousel-2 .slick-dots li.slick-active button::before {
    color: var(--accent) !important;
    font-size: 16px !important;
}

.proba-carousel-1 .slick-dots li button::before,
.proba-carousel-2 .slick-dots li button::before {
    font-size: 12px !important;
}
/* End Promotion Banner */

/* Website Packages */
#websitePackages {
    background: linear-gradient(180deg, rgba(242, 242, 242, 0.2) -22.86%, rgba(3, 145, 223, 0.2) 215.22%);
}

.wepa-nav-link {
    border: #6c757d;
    color: var(--grey);
    border-radius: 50rem !important;
    width: 324px;
}

.wepa-nav-link.active {
    background-color: #fd6a02 !important;
    color: white;
    border-radius: 50rem;
}

.wepa-button {
    background-color: #e5dbdb;
    color: var(--black);
}

.wepa-button.active {
    background-color: #fd6a02 !important;
    color: white;
}

.wepa-package-price {
    color: #fd6a02;
}

.wepa-package-button {
    background-color: #fd6a02;
    color: white;
    font-family: 'Open Sans', sans-serif;
}

.wepa-package-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wepa-pills-container {
    border-radius: 50rem;
    width: fit-content;
    background-color: #cdedff;
}
/* End Website Packages */


/* Video Testimony */
#videoTestimony {
    background: linear-gradient(180deg, rgba(242, 242, 242, 0.2) -22.86%, rgba(3, 145, 223, 0.2) 215.22%);
}

.vites-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: left top;
}

.vites-button {
    font-family: "Open Sans", sans-serif !important;
    background: #0e4d92 !important;
    border: 1px solid #0e4d92;
    color: #ffffff !important;
}
/* End Video Testimony */


/* Our Portofolio */
#ourPortofolio {
    background-color: #0391df;
}

.ourport-image {
    width: 100%;
    height: 60vh;
    object-fit: contain;
}
/* End Our Portofolio */


/* Website Steps */
#websiteSteps {
    background: linear-gradient(180deg, rgba(3, 145, 223, 0.01) -23.9%, rgba(3, 145, 223, 0.02) -23.85%, rgba(3, 145, 223, 0.2) 443.14%, rgba(3, 145, 223, 0.01) 443.14%);
}
/* End Website Steps */


/* Up Omzet */
#upOmzet {
    background-color: #0391df;
}

.upOmzet-link {
    width: fit-content;
}
/* end Up Omzet */


/* Whatsapp Testimony */
#testimonyWhatsapp {
    background: linear-gradient( 180deg , rgba(242, 242, 242, 0.2) -59.22%, rgba(196, 196, 196, 0.2) 215.22%);
}

.testwa-image {
    width: 100%;
    object-fit: cover;
}
/* End Whatsapp Testimony */


/* Our Client */
.ourclient-image {
    width: 100% !important;
    height: 100px !important;
    object-fit: contain;
}

.ourclient-carousel .slick-slide{
    opacity: .5;
    transition: all 400ms ease;
}

.ourclient-carousel .slick-center {
    opacity: 1;
    transition: all 400ms ease;
}
/* End Our Client */


/* Modal Testimony Video */
.assistance-close-button {
    position: absolute;
    top: 24px;
    position: absolute;
    z-index: 100;
    right: 24px;
    color: white;
    font-size: 52px;
}

.assistance-link-button {
    width: fit-content;
    position: absolute;
    left: 36%;
    bottom: 13%;
    z-index: 100;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    border: 4px solid white;
}

@media (max-width: 767.98px) {

    /* Navbar */
    .navbar-ahlinyaweb {
        visibility: hidden;
        transition: all .4s ease;
        opacity: 0;
    }

    .navbar.navbar-mobile {
        visibility: visible;
        transition: all .4s ease;
        opacity: 1;
    }

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

    .navbar-header {
        border-bottom: 1px solid white;
    }
    /* End Navbar */


    /* Header */
    .page-header {
        padding-top: 1rem;
        padding-bottom: .5rem;
    }

    .header-img {
        height: 30vh;
        width: 100%;
        object-fit: contain;
    }

    .header-login {
        border: 1px solid white;
        padding: 8px 16px;
        border-radius: .35rem;
        color: white;
    }

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


    /* Promotion Banner */
    .proba-image {
        width: 100%;
        height: 12vh;
        object-fit: cover;
    }
    /* End Promotion Banner */


    /* Website Packages */
    .wepa-pills-container {
        border-radius: 2rem;
        width: 100%;
        background-color: unset;
    }

    .wepa-nav-link {
        width: 100%;
        background-color: #e5dbdb;
    }

    .wepa-package-image {
        height: 100%;
    }
    /* End Website Packages */


    /* Our Portofolio */
    .ourport-image {
        width: 100%;
        height: 30vh;
        object-fit: contain;
    }
    /* End Our Portofolio */


    /* Website Steps */
    .webstep-list li::marker {
        color: #0391df !important;
        font-size: 1.266rem;
    }
    /* End Website Steps */


    /* Video Testimony */
    .vites-image {
        height: 200px;
    }
    /* End Video testimony */


    #assistanceModal .modal-dialog {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        min-height: calc(100% - 3.5rem);
    }

    #assistanceModal .modal-dialog::before {
        height: calc(100vh - 3.5rem);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
    }

    .assistance-close-button {
        top: 4px;
        right: 16px;
        font-size: 32px;
    }
}

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

    /* Header */
    .page-header {
        padding-top: 4rem;
    }

    .header-img {
        width: 100%;
        height: 35vh;
        object-fit: contain;
    }
    /* End Header */


    /* Promotion Banner */
    .proba-image {
        height: 17vh;
    }
    /* Promotion Banner */


    /* Website Packages */
    .wepa-pills-container {
        border-radius: 2rem;
        background-color: unset;
    }
    /* End Website Packages */


    /* Our Client */
    .ourclient-carousel .slick-slide {
        opacity: 1 !important;
    }

    .ourclient-carousel .slick-slide img{
        opacity: 1 !important;
    }

    .ourclient-carousel .slick-list {
        height: 20vh;
    }

    .ourclient-carousel .slick-active img {
        transform: scale(1) !important;
        opacity: 1 !important;
        transition: .3s ease;
    }

    .ourclient-carousel .slick-center img {
        transform: scale(1) !important;
        opacity: 1 !important;
    }
    /* End Our Client */

}

@media (max-width: 997.92px) {

    /* Our Client */
    .ourclient-carousel .slick-slide img{
        opacity: .5;
    }

    .ourclient-carousel .slick-list {
        height: 20vh;
    }

    .ourclient-carousel .slick-active img {
        transform: scale(.8);
        opacity: .5;
        transition: .3s ease;
    }

    .ourclient-carousel .slick-center img {
        transform: scale(1.1);
        opacity: 1;
    }

    .ourclient-image {
        width: 100px !important;
        height: 13vh !important;
        object-fit: contain;
    }
    /* End Our Client */

}

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Promotion Banner */
    .proba-image {
        height: 20vw;
    }
    /* End Promotion Banner */

    .assistance-link-button {
        left: 34.5%;
        bottom: 10%;
        z-index: 100;
        font-size: 16px;
    }

}

@media (min-width: 1200px) {

    /* Promotion Banner */
    .proba-image {
        height: 17.5vw;
    }
    /* End Promotion Banner */

}