/* footer */
.footer {
    background: #2a2a30;
    padding-top: 58px;
    padding-bottom: 48px;
}

.footer-img {
    width: 40%;
    min-width: 230px;
}

.white-font-nav {
    color: #fff!important;
    transition: 0.2s all ease-in-out;
}

a.linkfooter:hover .white-font-nav {
    color: #ffa111!important;
}

a.linkfooter {
    text-decoration: none;
    transition: 0.25s all ease-in-out;
}

.desc-6 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
}
.title-4 {
    font-family: Inter;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}


.buttonStyle{
    background-color: #9B2929;
    color:#FFFFFF;
    padding: 8px 15px;
    border: 1px #9B2929 solid;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.25s all ease-in-out;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.buttonStyle1{
    background-color: transparent;
    color:#FFFFFF;
    padding: 8px 15px;
    border: 1px #FFFFFF solid;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.25s all ease-in-out;
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.buttonStyle1:hover{
    background-color: #FFFFFF;
    color: #191C27;
}

.buttonStyle:hover{
    background-color: #ffe3e3;
    color: #9B2929;
}

.image-section{
    max-width: 100%;
}

.white{
    color: #FFFFFF;
}

.dark{
    color: #3F3F3F;
}

.dark1{
    color: #353535;
}

.dark2{
    color: #3C3C3C;
}

h1, h2, h3 {
    text-transform: unset!important;

}

.title1{
    font-family: Roboto;
    font-size: 36px;
    font-weight: 800;
    line-height: 46px;
}

.title2{
    font-family: Roboto;
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
}

.title3, .title10{
    font-family: Roboto;
    font-size: 36px;
    font-weight: 700;
    line-height: 42px;
}

.title4{
    font-family: Roboto;
    font-size: 20px;
    font-weight: 800;
    line-height: 23px;
}

.title5{
    font-family: Roboto;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

.title6{
    font-family: Roboto;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
}

.title7{
    font-family: Roboto;
    font-size: 26px;
    font-weight: 800;
    line-height: 32px;
}

.title8, .title9{
    font-family: Roboto;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
}


.desc1{
    font-family: Roboto;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.desc2{
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
}

.desc3{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.desc4{
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

.desc5{
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.desc6{
    font-family: Roboto;
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
}

.desc7{
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
}


/* dashboard */
.hash-manufacturing-solution{
    color: #3F3F3F;
    font-size:16px;
    font-weight:500;
    font-family: 'Roboto';
    border: 1px #8A8A8A solid;
    border-radius: 33px;
}


.buttonStyle.download-skema{
    background-color: #FFFFFF;
    color:#4B4B4B;
    transition: 0.25s all ease-in-out;
}

.buttonStyle.download-skema:hover {
    background-color: #ffe3e3;
  }

.dashboard {
    padding: 124px 0px 54px 0px;
  }

  .width-extra{
    width: 44%;
  }



/* supportVision */


.bg-supportVision {
    background: #EFF7FF;
    border-radius: 20px;
    padding: 40px 40px;
}

.supportVision{
    padding: 54px 0px;
}


/* freeConsult */

.freeConsult{
    background: linear-gradient(117.08deg, #475365 11.92%, #0C1A2E 100%),
    linear-gradient(114.26deg, #575A60 10.1%, #1F2329 97.84%),
    linear-gradient(0deg, #F5F5F5, #F5F5F5);
    margin: 32px 0px;
}

.btn-konsultasi{
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    background-color: white;
    padding: 10px 22px 10px 22px;
    border-radius: 8px;
    transition: all 0.25s ease;
    
}



.btn-konsultasi:hover{
    background-color: #ffe3e3;
}


/* redfreeconsult */
.redfreeConsult{
    margin-bottom: 78px;
}

.btn-konsultasi1{
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    background-color: #9B2929;
    padding: 10px 22px 10px 22px;
    border-radius: 8px;
    transition: all 0.25s ease;
    border: #9B2929 1px solid;
}

.btn-konsultasi1:hover{
    background-color: #ffe3e3;
    color: #9B2929;
}


.redborder{
    border: #9C171E 2px solid;
    border-radius:15px;
}

/* reason */
.reason{
    padding: 54px 0px 80px 0px;
}

#selengkapnya{
    color: #9C171E;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    border-bottom: 1px #9C171E solid;
    cursor: pointer;
    transition: 0.25s all ease-in-out;
}

#selengkapnya:hover{
    opacity: 75%;
}


/* efisien */
.bg-black{
    background: linear-gradient(0deg, #191C27, #191C27),
linear-gradient(117.08deg, #323A47 11.92%, #0C1A2E 100%);
    border-radius: 20px;
    padding:32px 40px 0px 40px;
}

.efisien{
    margin-bottom: 68px;
}

/* marimas1 */

/* .overlay{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000000BF;
    opacity: 75%;
    z-index: 0;
    width: 100%;
    height: 100%;
} */

.marimas1 {
    background-image: url(./Rectangle\ 2.webp);
    background-size: cover;
    background-attachment: fixed;
}
.marimas1 .container {
    position: relative;
    z-index: 2; /* Atur nilai z-index ke angka yang lebih tinggi dari overlay */
  }
.marimas1::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Warna overlay (gunakan rgba untuk transparansi) */
}

/* marimas */
.marimas{
    height: 475px;
    background-image: url(./Rectangle\ 2.webp);
    background-size: cover;
    display: none;
}

.white-tp{
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0px 20px 20px 0px;
    padding: 30px 30px 30px 200px;
}

.maxbox{
    max-width: 596px;
}




/* video */
.video{
    height: 475px;
    background: url(./Group\ 1171276202.webp);
    background-size: cover;
    margin-bottom: 32px;
    cursor: pointer;
}

.overlay-video{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0%;
    transition: 0.2s all ease-in-out;
    background-color: rgba(0, 0, 0, 0.75); /* Warna overlay (gunakan rgba untuk transparansi) */
}
.black-tp{
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0px 20px 20px 0px;
    padding: 30px 30px 30px 200px;
}

.maxbox{
    max-width: 596px;
}

.play-btn{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 128px;
    cursor: pointer;
    opacity: 60%;
    transition: all 0.2s ease-in-out;
}

.video:hover .play-btn{
    opacity: 90%;
}
.video:hover .overlay-video{
    opacity: 60%;
}


/* tabs */

.tabs {
    padding: 78px 0px 0px 0px;
  }

  .spacing{
    margin-bottom: 36px;
  }

.bg-tabs{
    width: fit-content;
}
.tabsBorder1, .tabsBorder2{
    border-radius:20px;
}

.tabsBorder1 {
    border: 1px gray solid;
    padding: 40px;
    height: 100%;
  }

.tabsBorder2{
    border: 1px #0F7506 solid;
    padding: 40px;
    background-color: #E2FFD8;
}

.checklist-tabs{
    max-width: 28px;
}

#nav-tab{
    border-bottom:none;
}

.nav-tabs{
    background: #ebebeb;
    border-radius: 50px;
    padding: 7px 0px;
}

.nav-tabs .nav-link {
    border-radius: 40px;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: #3F3F3F70;
    border: none!important;
    margin: 0px 10px;
    transition: border 0.1s linear, background-color 0.25s ease-in-out;
    padding: 12px 30px;
    display: inline-block;
}

.nav-tabs .nav-link:hover{
    background-color: rgba(200, 200, 200, 0.5);
}

.nav-link:focus, .nav-link:hover {
    color: #3F3F3F70!important;
  }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    color: white!important;
    /* border: #9B2929 3px solid!important; */
    background-color:#9B2929!important;
}


/* Hasil */
.hasil{
    margin-bottom: 80px;
}

.checklistHasil{
    width: 28px;
    height: 28px;
}



/* whatsapp */

.whatsapp{
    padding: 54px 105px 54px 105px;
    background-color: #F4F4F4;
}


@media (max-width:991.4px){

    .title1{
        font-size: 30px;
        line-height: 38px;
    }

    .title2{
        font-size: 16px;
        line-height: 26px;
    }

    .title3 {
        font-size: 30px;
        line-height: 38px;
    }

    .title5{
        font-size:22px;
        line-height: 25px;
    }

    .title7 {
        font-size: 22px;
    }
    .title8 {
        font-size: 30px;
        line-height: 38px;
    }
    .title9{
        font-size: 30px;
        line-height: 38px;
    }

    .title10{
        font-size: 30px;
        line-height: 38px;
    }

    .desc1 {
        font-size: 18px;
        line-height: 26px;
    }

    .desc3 {
        font-size: 16px;
        line-height: 26px;
    }

    .desc4 {
        font-size: 16px;
        line-height: 26px;
    }
    .desc6{
        font-size: 16px;
        line-height: 26px;
    }
    .buttonStyle{
        width: 100%;
    }
    .buttonStyle1{
        width: 100%;
    }
    /* dashboard */
    .dashboard{
        padding: 84px 0px 64px 0px;
    }

    .dashboard .container:first-child{
        padding: 0px 15px 0px 15px;
    }

    /* .supportVision} */

.supportVision{
    padding: 64px 15px;
}

    /* freeConsult */
    .btn-konsultasi{
        width: 100%;
    }
    .freeConsult {
        padding: 32px 16px 32px 16px;
        margin: 0px 0px;
      }

    .padding-add1{
        border-right: none;
        border-bottom: 1px #6B7280 solid;
    }

    .tabsBorder2 {
        padding: 25px;
    }


    /* reason */
    .reason{
        padding: 64px 15px;
    }

    #selengkapnya {
        font-size: 16px;
        line-height: 26px;
    }


    /* efisien */
    .efisien {
        margin-bottom: 68px;
        padding: 0px 15px;
    }

    .bg-black {
        padding: 32px;
        background: linear-gradient(136.07deg, #323A47 5.68%, #0C1A2E 100%);

    }

    /* HashMicroSolution */
    .HashMicroSolution {
        padding: 54px 15px;
    }

    /* tabs */
    .tabs{
        padding: 54px 15px;
    }

    .scrollable{
        overflow-x: scroll;
    }

    .nav-tabs .nav-link {
        width: 134px;
        padding: 12px 16px;
    }

    #nav-tab{
        overflow-x: scroll;
    }

    /* marimas */
    .marimas1 {
        background-size: 700px 700px;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 64px 16px 64px 16px;
    }


    .btn-konsultasi1{
        width: 100%;
    }


    /* video */
    .video {
        height: 346px;
        background-size: 140% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        margin-bottom: 32px;
    }
    .black-tp {
        width: 100%;
        border-radius: 0px;
        padding: 16px;
    }

    .play-btn {
        max-width: 60px;
    }

    /* whatsapp */
    .whatsapp{
        padding: 54px 15px;
    }

    /* hasil */
      .hasil .container:first-child{
        padding: 0px 15px;
      }
}


@media (max-width:767.4px){

    .bg-supportVision {
        padding: 40px 40px;
      }
}