@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Inter");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
    font-family: "Montserrat", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}
.container {
    max-width: 1920px;
    width: 90%;
}
.row {
    padding: 0;
}
/* .col-md-4 {
    padding: 0;
}
.col-md-6 {
    padding: 0;
}
.col-md-12 {
    padding: 0;
} */
.section-content {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.text-blue {
    color: #0279ff;
}

.text-red {
    color: #ff0054;
}

.text-black {
    color: #292930;
}

.text-secondary {
    color: #555555;
}

.text-white {
    color: #ffffff;
}

.w-max-content {
    width: max-content;
}

.btn-konsul {
    background-color: #0279ff;
    border-radius: 7px;
    color: #ffffff;
    padding: 14px 26px;
    border: 0;
}

a.btn-konsul {
    background-color: #0279ff;
    border-radius: 7px;
    color: #ffffff;
    padding: 14px 26px;
    border: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

a.btn-konsul:hover {
    color: #ffffff;
    text-decoration: none;
}

.btn-konsul-white {
    background-color: #fff;
    border-radius: 7px;
    color: #0279ff;
    padding: 14px 26px;
    border: 0;
}

a.btn-konsul-white {
    background-color: #fff;
    border-radius: 7px;
    color: #0279ff;
    padding: 14px 26px;
    border: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

a.btn-konsul-white:hover {
    color: #0279ff;
    text-decoration: none;
}

.btn-red {
    background-color: #ff0054;
    border-radius: 7px;
    color: #ffffff;
    padding: 14px 26px;
    border: 0;
}

.font-noto {
    font-family: "Noto Sans", sans-serif;
}

.font-w-600 {
    font-weight: 600;
}

.mt-8 {
    margin-top: 7rem !important;
}

.mb-100 {
    margin-bottom: 100px;
}

.mg-l-auto {
    margin-left: auto;
}

.active-link {
    color: red !important;
}

/* navbar */
header {
    /* top: 16px; */
    z-index: 10000000;
    visibility: visible;
    opacity: 1;
    transition: opacity 600ms, visibility 600ms;
}
header.hide-header {
    opacity: 0;
    visibility: hidden;
}

.justify-center {
    justify-content: center;
}

.width-100p {
    width: 100% !important;
}

nav {
    background: #ffffff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Inter';
    /* border-radius: 10px; */
}

.navbar-nav-custom {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    position: absolute;
    left: 0;
    justify-content: center;
}

nav .nav-item {
    margin-right: 2rem;
    font-weight: 500;
}
nav .nav-item-konsul {
    position: absolute;
    right: .7rem;
}

.nav-link {
    cursor: pointer;
}

/* banner */
.banner {
    min-height: 100vh !important;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding-top: 75px;
}

.banner .banner-desc h4 {
    font-size: 40px;
    font-weight: bold;
}

.banner .banner-desc h1 {
    font-weight: bold;
}

.banner .banner-desc h2 {
    font-weight: bold;
}

.banner .banner-desc p {
    font-size: 18px;
    font-weight: 400;
}

.banner .banner-desc h3 {
    font-weight: bold; 
    text-transform: uppercase; 
    margin-top: .5rem;
    margin-bottom: 1.5rem;
}

.image-banner {
    width: 85%;
    margin: 2rem 0;
}

.bg-section-dark {
    background-image: url("../assets/images/bg-section.png");
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

/* why us */
.why-us {
    /* background-image: url("../assets/images/bg-section.png");
    background-position: center;
    background-size: cover;
    min-height: 100vh; */
}

.why-us .content .title h4 {
    font-size: 30px;
    font-weight: 700;
}

.why-us .content .content-detail h4 {
    font-size: 20px;
    font-weight: 600;
}

.why-us .content .content-detail p {
    font-size: 14px;
    font-weight: 300;
}

.why-us .content .content-wrap {
    margin-top: calc(2rem + 90px);
}

/* kebutuhan */
.kebutuhan {
    min-height: 100vh;
}

.kebutuhan .content-list h4 {
    font-weight: 600;
    font-size: 20px;
}

.kebutuhan .content-list p {
    font-size: 14px;
}

.kebutuhan .right-content .title {
    z-index: -1;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 60px;
    justify-content: center;
    text-align: center;
}

/* layanan */
.layanan {
    display: inline-flex;
    flex-wrap: wrap;
    margin: 2rem 0 0;
    position: relative;
}

.layanan .layanan-card {
    border-radius: 10px;
    box-shadow: 0 0 2px 0 black;
    min-width: 300px;
    aspect-ratio: 290/172;
    padding: 20px;
    width: var(--widthCard);
    margin: 1%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-color: white;
    transition: background-color .5s;
}

.layanan .layanan-card .layanan-image {
    width: 20%;
}

.layanan .layanan-card .overlay-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    min-height: 40%;
    max-height: 50%;
    height: 100%;
    z-index: 2;
    color: #000;
    overflow: hidden;
    transition: all .3s .01s;
}

.layanan .layanan-card .overlay-text h3 {
    font-size: calc(1rem + .5vw) !important;
    font-family: "Montserrat";
    font-weight: bold !important;
}
.layanan .layanan-card .overlay-text .layanan-summary {
    overflow: hidden;
    max-height: 0;
    height: 100%;
}

.layanan-summary p {
    margin: 0
}

.layanan .layanan-card:hover {
    background-color: #0279ff;
}

.layanan .layanan-card:hover .overlay-text .layanan-summary {
    overflow: hidden;
    max-height: 100%;
}

.layanan .layanan-card:hover .overlay-text {
    width: 100%;
    max-height: 100%;
    color: white;
}

.layanan-arrow {
    width: 40px !important;
    height: 60px !important;
}

.layanan-arw-left {
    left: -50px !important;
}

.layanan-arw-right {
    right: -50px !important;
}

/* client */
.client {
    min-height: 100vh;
}

.client .client-content {
    margin-top: 3rem;
}

.client .client-list {
    padding: 2rem;
    background-color: #ffffff;
    width: 80%;
    margin: 3rem auto;
    border-radius: 20px;
}

.client .client-list img {
    width: 80%;
    height: auto;
}

/* portfolio */
.portfolio {
    /* background-image: url("../assets/images/bg-section.png");
    background-position: center;
    background-size: cover;
    min-height: 100vh; */
}

.portfolio .portfolio-content {
    margin-top: 0;
}

.portfolio .wrapper-slider {
    padding: 4rem 0 !important;
    overflow-x: hidden;
}

.portfolio h2 {
    font-size: 30px;
}
h2 {
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: calc(2.5rem + .5vw);
}
h3 {
    font-family: 'Montserrat';
    font-size: calc(1.2rem + .75vw);
}
.portfolio .action,
#service-web-section-5 .action {
    margin-top: 3rem;
}

.portfolio .portfolio-img-content {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 10px;
}

/* testimoni */
.testimoni {
    min-height: 100vh;
}

.testimoni .wrapper-slider {
    padding: 5rem 0 !important;
    overflow-x: hidden;
}


.testimoni .testimoni-card,
#service-e-commerce-section-7 .testimoni-card {
    background: linear-gradient(151.16deg, #fff8f8 10.38%, #f5f7ff 95.44%);
    border-radius: 6px !important;
    padding: 20px;
    margin: 0 14px;
    width: 600px;
}

.testimoni .testimoni-card .testimoni-card-content,
#service-e-commerce-section-7 .testimoni-card .testimoni-card-content {
    background: #ffff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 2px 4px rgba(146, 146, 146, 0.25);
}

/* about_us */
.about_us {
    /* background-image: url("../assets/images/bg-section.png");
    background-position: center;
    background-size: cover;
    min-height: 100vh; */
}

.about_us-wrapper {
    padding-top: 4rem;
}

.about_us .content-list h5 {
    font-size: 18px;
    font-family: "Monserrat", sans-serif;
}

/* footer */
footer {
    /* background: #ffffff;
    box-shadow: 0px 0px 58px #0279ff; */
    background: #111827;
    /* box-shadow: 0px 0px 58px rgba(2, 121, 255, 0.5); */
    padding: 60px 0;
}

footer .footer-bottom-left {
    background-image: url("../assets/images/degrade-left.png");
    background-position: right;
    background-size: cover;
    position: absolute;
    width: 100px;
    height: 100%;
    left: 0;
    top: 0;
}

footer .footer-bottom-right {
    background-image: url("../assets/images/degrade-right.png");
    background-position: left;
    background-size: cover;
    position: absolute;
    width: 200px;
    height: 100%;
    right: 0;
    top: 0;
}

footer .circle-top-left-dark {
    position: absolute;
    width: calc(624px / 2);
    height: calc(620px / 2);
    /* left: 201.49px; */
    left: calc(-455.51px / 2);
    top: calc(-149.85px / 2);

    background: radial-gradient(
        50% 50% at 50% 50%,
        #0279ff 0%,
        rgba(18, 18, 20, 0) 100%
    );
    transform: rotate(80.11deg);
}

footer .circle-bottom-left-dark {
    position: absolute;
    width: calc(624px / 2);
    height: calc(620px / 2);
    /* left: 201.16px; */
    left: calc(-455.51px / 2);
    top: calc(29.15px / 2);

    background: radial-gradient(
        50% 50% at 50% 50%,
        #ff3d6e 0%,
        rgba(18, 18, 20, 0) 100%
    );
    transform: rotate(80.11deg);
    z-index: 1;
}

footer .circle-top-right-dark {
    position: absolute;
    width: calc(624px / 2);
    height: calc(620px / 2);
    right: calc(-455.51px / 2);
    top: calc(-149.85px / 2);

    background: radial-gradient(
        50% 50% at 50% 50%,
        #0279ff 0%,
        rgba(18, 18, 20, 0) 100%
    );
    transform: rotate(80.11deg);
}

footer .circle-bottom-right-dark {
    position: absolute;
    width: calc(624px / 2);
    height: calc(620px / 2);
    /* left: 201.16px; */
    right: calc(-455.51px / 2);
    top: calc(29.15px / 2);

    background: radial-gradient(
        50% 50% at 50% 50%,
        #ff3d6e 0%,
        rgba(18, 18, 20, 0) 100%
    );
    transform: rotate(80.11deg);
    z-index: 1;
}

footer a.privacy-policy {
    text-decoration: none;
    color: #ffffff;
}
footer a.privacy-policy:hover {
    text-decoration: underline;
    color: #ffffff;
}

footer .social-media img {
    width: 30px;
    height: auto;
}

.navbar-nav-custom-footer {
    list-style: none;
    color: #fff;
    padding: 0;
}

.nav-item-footer {
    margin: 1rem 0;
}

.circle-top-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bfdcfd;
    clip-path: circle(20% at right -10%);
    z-index: -1;
}

.circle-bottom-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bfdcfd;
    clip-path: circle(16% at left bottom);
    z-index: -1;
}

.circle-bottom-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bfdcfd;
    clip-path: circle(16% at right bottom);
    z-index: -1;
}

.img-slider-service {
    width: 100px;
}

/* slider */
.wrap-banner {
    overflow-x: hidden;
}

.slider-banner .slick-dots {
    bottom: 12px;
}

.slider-banner .slick-dots button::before {
    font-size: 16px;
}

.slider-banner .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ff0054;
}

.wrapper-slider {
    padding: 7rem 0;
    overflow-x: hidden;
}

.my-slider {
    padding: 0 70px;
}

.slick-initialized .slick-slide.layanan-card,
.slick-initialized .slick-slide.portfolio-slide {
    background-color: #b32532;
    height: 340px;
    margin: 0 20px 0 30px;
    /* display: flex;
  align-items: center;
  justify-content: center; */
    border-radius: 20px;
}

.slick-slide .img-slider-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.slick-next,
.slick-prev {
    z-index: 5;
}

.slick-next {
    right: 15px !important;
}

.slick-prev {
    left: 15px !important;
}

.icon-arrow {
    width: 30px !important;
    height: 40px !important;
}

.slick-disabled img {
    filter: invert(1);
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before,
.slick-next:before,
.slick-prev:before {
    display: none;
}

/* slider testimoni */
.slick-disabled.testimoni-arw-left,
.slick-disabled.testimoni-arw-right {
    background: #454545 !important;
}

.testimoni-arrow {
    height: 45px !important;
    width: 45px !important;
    border-radius: 50%;
    display: flex !important;
    background: #ffffff !important;
    border: 0.5px solid #f1f1f1 !important;
    box-shadow: 0px 10px 12px rgba(198, 198, 198, 0.25);
}

.testimoni-arrow img {
    margin: auto;
    width: 8px;
}

.testimoni-arw-right,
.testimoni-arw-left {
    top: -46px !important;
}

.testimoni-arw-left {
    left: unset !important;
    right: 70px;
}

/* support wa */
.support {
    width: 70px;
    height: 70px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    position: fixed;
    z-index: 5;
    bottom: -20%;
    left: 1rem;
    transition: 0.4s;
    opacity: 0.9;
    border: 0;
}

.show-support {
    bottom: 5rem;
}

.icon-absolute {
    bottom: -30px;
}

.content-desc {
    font-size: 16px;
}

.title-content {
    font-size: 24px;
}

/* page service website*/
#page-layanan .layanan-card {
    width: 100%;
    max-width: 340px;
}

.service-bg-1 {
    background-image: url("../assets/images/bg-service-section-1.png");
    background-size: contain;
    background-position-x: right;
    background-position-y: unset;
    background-repeat: no-repeat;
}

img.ic-back {
    width: 32.32px;
    height: 48px;
}
img.icon {
    margin-right: 40px;
}
.tx-40 {
    font-size: 40px;
}
.tx-60 {
    font-size: 60px;
}
.tx-18 {
    font-size: 18px;
}
.tx-36 {
    font-size: 36px;
}
.tx-32 {
    font-size: 32px;
}
.h-100vh {
    height: 100vh;
    overflow: hidden;
}
.mh-100vh {
    min-height: 100vh;
    overflow: hidden;
}
a.btn-back {
    color: #000;
    text-decoration: none;
    padding-top: 79px;
    margin-left: 0px;
}
a.btn-back:hover {
    color: #000000d1;
}
.service-section-1-header {
    margin-top: 80px;
}
#service-web-section-1 .list,
#service-web-section-4 .list,
#service-bisnis-section-1 .list {
    margin-top: 70px;
}
#service-web-section-1 .right,
#service-web-section-4 .right {
    margin-left: calc(54% - 66.66666667%);
    margin-bottom: -100px;
}

/* #service-web-section-1 .content{
    margin-top: -100px;
} */

.service-bg-2 {
    background-image: url("../assets/images/bg-section.png");
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}

#service-web-section-2 .wrapper-icon,
#service-web-section-6 .wrapper-icon,
#service-e-commerce-section-2 .wrapper-icon {
    margin-bottom: 60px;
}
.btn-service-red {
    font-size: 24px;
}

#service-web-section-3 .right {
    margin-left: calc(50% - 66.66666667%);
}
#service-web-section-5 .wrapper-slider-content, #service-sosmed-section-3 .wrapper-slider-content{
    padding: 0 2.3rem;
}

/* #service-web-section-5 .portfolio-img-content, #service-sosmed-section-3 .portfolio-img-content{
    width: 100%;
    height: 100%;
} */

#service-e-commerce-section-5 .card {
    min-height: 304px;
    background: #bfdcfd;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    padding: 30px;
    text-align: center;
    justify-content: center;
}
#service-e-commerce-section-5 .header {
    max-width: max-content;
}
#service-e-commerce-section-5 .card p {
    font-size: 18px;
}
#service-sosmed-section-2 .action{
    margin-left: 33px;
    margin-top: 10px;
}
#service-sosmed-section-4 .card{
    min-height: 304px;
    background: linear-gradient(180deg, #EDEDFF 0%, #CECECE 145.16%);
    border: 1px solid #424245;
    border-radius: 30px;
    padding: 30px;
    text-align: center;
    justify-content: center;
    color: #000;
}
#service-sosmed-section-4 .card p{
    font-size: 18px;
}
.pl-17 {
    padding-left: 17%;
}

#page-portfolio .title-category {
    min-width: max-content;
}

.carousel-item {
  display: flex;
  animation: carousel var(--timeCarousel) linear infinite;
  -webkit-animation: carousel var(--timeCarousel) linear infinite;
}

/* responsive */
@media (max-width:1475px) {
    /* layanan */
    .layanan .layanan-card {
        width: 31.33333%;
    }
    
}
@media (max-width: 1200px) {
    h2 {
        font-size: calc(1.375rem + 1.5vw)!important;
    }
}

@media (max-width:1090px) {
    /* layanan */
    .layanan .layanan-card {
        width: 46%;
        margin: 2%;
    }
}

@media (max-width: 992px) {
    .p-sm-4 {
        padding: .5rem 0 !important;
    }
    .navbar-nav-custom {
        position: unset;
        display: block;
        margin: 1.5rem 0;
    }

    .navbar-nav-custom .nav-item {
        margin: 1rem 0;
    }

    .navbar-nav-custom .nav-item-konsul {
        position: unset;
        margin: 1.5rem 0 1rem;
    }

    .why-us .img-bg {
        width: 50%;
        position: relative;
        top: 50px;
        left: 20px;
    }

    .kebutuhan .img-big {
        width: 50%;
        position: relative;
        top: 40px;
        left: 100px;
    }

    .w-70 {
        width: 60px;
    }
    /* page service */
    #service-web-section-1 .content,
    #service-web-section-4 .content {
        margin-top: -100px;
    }
    #service-web-section-1 .right {
        margin-bottom: -22%;
        margin-top: 40px;
    }
    #service-web-section-4 .right {
        margin-bottom: -15%;
        margin-top: 40px;
    }
    a.btn-back {
        margin-left: -30px;
    }
    #service-e-commerce-section-1 .right img {
        width: 50%;
        margin: 50px 0;
    }
    /* end  */
}

@media (max-width: 768px) {
    .kebutuhan .img-big {
        width: 60%;
        left: 40px;
    }

    .about_us .logo-gerai {
        width: 100px;
    }

    footer .logo-gerai {
        width: 100px;
    }

    .testimoni .testimoni-card,
    #service-e-commerce-section-7 .testimoni-card {
        height: unset !important;
    }

    .slider-responsive {
        display: block !important;
        padding: 0 !important;
    }

    .slider-responsive .layanan-card {
        margin-bottom: 1rem;
    }

    .testimoni-slider-responsive {
        display: block !important;
    }

    .testimoni-slider-responsive .testimoni-card {
        margin-bottom: 1rem;
    }

    .testimoni .testimoni-card,
    #service-e-commerce-section-7 .testimoni-card {
        width: 500px;
    }
    /* page service */
    a.btn-back {
        margin-left: -20px;
        padding-top: 50px;
    }
    img.ic-back {
        width: 19.32px;
        height: 35px;
    }
    img.icon {
        margin-right: 25px;
        height: 80px;
    }
    .service-section-1-header {
        margin-top: 60px;
        /* margin-bottom: 70px; */
    }
    #service-web-section-5 .wrapper-slider-content, #service-sosmed-section-3 .wrapper-slider-content{
        padding: 0;
    }

    /* layanan */
    .layanan {
        justify-content: center;
    }
    .layanan .layanan-card {
        width: 70%;
        margin: 2.5%;
    }
    /* end */
}

@media (max-width: 576px) {
    .logo-gerai-header {
        width: 100px;
    }

    .why-us .img-bg,
    #service-e-commerce-section-1 .right img {
        width: 65%;
        top: 20px;
    }

    .section-content {
        padding-bottom: 0rem;
    }

    .why-us .content .title h4 {
        font-size: 24px;
    }

    .img-slider-service {
        width: 70px;
    }

    .kebutuhan .img-big {
        width: 80%;
        left: 0;
    }

    .client .client-list {
        margin-top: 3rem;
    }

    .about_us .logo-gerai {
        display: none;
    }

    .support {
        width: 60px;
        height: 60px;
    }

    .testimoni-slider-responsive .testimoni-card {
        width: unset;
    }

    .icon-absolute {
        bottom: -20px;
    }

    .content-desc {
        font-size: 14px;
    }

    .title-content {
        font-size: 20px;
    }

    /* page service */
    a.btn-back {
        padding-top: 20px;
        margin-left: 0px;
    }
    img.ic-back {
        width: 20.32px;
        height: 30px;
    }

    img.icon {
        margin-right: 15px;
        height: 60px;
    }
    .service-section-1-header {
        margin-top: 40px;
        /* margin-bottom: 50px; */
    }
    /* end */
    .my-slider {
        padding: 0;
    }
    .slick-next.icon-arrow, .slick-prev.icon-arrow{
        width: 20px !important;
        height: 30px !important;
    }
}

@media (max-width: 400px) {
    .kebutuhan .right-content .title {
        top: 30px;
    }

    .w-70 {
        width: 40px;
    }

    .my-slider {
        padding: 0;
    }

    .slider-responsive .layanan-card {
        margin: auto;
        margin-bottom: 1rem;
        width: 250px;
    }
}

@media (min-width: 992px) {
    .why-us {
        height: 100vh;
    }

    .why-us .img-bg,
    #service-e-commerce-section-1 .right img {
        width: 70%;
    }

    .kebutuhan {
        height: 100vh;
    }

    .kebutuhan .img-big {
        width: 80%;
    }

    .client .client-content {
        margin-top: 3rem;
    }

    .portfolio .portfolio-content {
        margin-top: 0;
    }

    .testimoni .testimoni-card,
    #service-e-commerce-section-7 .testimoni-card {
        height: 320px !important;
    }

    .w-70 {
        width: 60px;
    }

    .portfolio .portfolio-wrapper-img {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #service-e-commerce-section-4 .right{
        margin-bottom: -210px !important;
    }

    /* scroll style */
    .content-scroll-wrap {
        max-height: 55vh;
        overflow-y: auto;
    }

    .content-scroll-wrap::-webkit-scrollbar {
        width: 6px;
    }

    /* Track */
    .content-scroll-wrap::-webkit-scrollbar-track {
        background: #e3e5eb;
    }

    /* Handle */
    .content-scroll-wrap::-webkit-scrollbar-thumb {
        background: #6d6c70;
    }
    /* page service  */
    #service-web-section-1 .list,
    #service-web-section-4 .list,
    #service-bisnis-section-1 .list {
        padding-left: 15%;
    }
    #service-web-section-1 .content,
    #service-web-section-4 .content {
        margin-top: 50px;
    }
    #service-web-section-1 .content-scroll-wrap,
    #service-bisnis-section-1 .content-scroll-wrap,
    #service-bisnis-section-3 .content-scroll-wrap {
        min-height: max-content;
        max-height: 50vh;
    }
    #service-e-commerce-section-1 .list {
        padding-left: 11%;
    }

    #service-bisnis-section-1 h2,
    #service-bisnis-section-3 h2,
    #service-bisnis-section-5 h2 {
        font-weight: 600;
    }

    #service-bisnis-section-4 .client-list, #service-e-commerce-section-6 .client-list {
        padding: 2rem;
        background-color: #ffffff;
        width: 90%;
        margin: 3rem auto;
        border-radius: 20px;
    }
    #service-bisnis-section-4 .client-list img, #service-e-commerce-section-6 .client-list img {
        width: 80%;
        height: auto;
    }
    /* end  */
}

@media (min-width: 1200px) {
    /* page service */
    #service-web-section-1 .content,
    #service-web-section-4 .content {
        margin-top: -30px;
    }
    /* #service-web-section-1 .list{
        padding-left: 15%;
    } */
    a.btn-back {
        margin-left: -20px;
    }
    /* end */
    h1 {
        font-size: calc(2.5rem + .5vw);
    }
}
@media (min-width: 1400px) {
    .w-70 {
        width: 70px;
    }
    .banner .banner-desc h4 {
        font-size: 60px;
    }

    .why-us .img-bg,
    #service-e-commerce-section-1 .right img {
        width: 100%;
    }

    .client .client-list img {
        width: 80%;
        height: auto;
    }

    /* page service */
    #service-web-section-1 .content,
    #service-web-section-4 .content {
        margin-top: -40px;
    }
    a.btn-back {
        margin-left: -50px;
    }
    /* end */
}

@keyframes carousel {
  0% 
  {
    left: 0;
  }
  50% {
    left: var(--widthHide)
  }
  100% 
  {
    left:0;
  }
}