.white{
    color: white!important;
}
.grey{
    color:#717171;
}
.red{
    color:#A21641;
}
.pink{
    color: #F2B4B4!important;
}
.title-color{
    color: #353535;
}

.desc-color{
    color: #6E6E6E;
}

.title1{
    font-family: Poppins;
    font-size: 38px;
    font-weight: 700;
    line-height: 50px;
}

.title2{
    font-family: Poppins;
    font-weight: 700;
    line-height: 42px;
}

.TeknologiAI .title2{
    font-size: 30px;
}

.title3{
    font-family: Inter;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}

.title4{
    font-family: Poppins;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    
}

.title5{
    font-family: Poppins;
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
    
}

.title6{
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    
}

.desc1{
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    
}


.desc2{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    
}
.desc3{
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    

}

.desc4{
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    

}

.desc5{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    
}

.desc6{
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    
}

.desc7{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px; 
     
}

.desc8{
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    
}

.btn-starter {
    padding: 14px 24px;
    border-radius: 34px;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: white;
    display: inline-block;
    text-decoration: none;
    background-color: #9B2929;
    border: 2px #9B2929 solid;
    transition: all 0.25s ease-in-out;
}


.btn-starter:hover  {
    transform: translate(0px, -5px);
    box-shadow: 0 6px 17px rgba(0,0,0,0.3);
}

.btn-starter:active {
    transform: translate(0px, 0px)!important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.3);
}

.secondaryBtn:hover{
    transform: translate(0px, -5px);
    box-shadow: 0 6px 17px rgba(0,0,0,0.3);
}

.secondaryBtn:active  {
    transform: translate(0px, 0px)!important;
    box-shadow: 0 0px 2px rgba(0,0,0,0.3);
}


/* .btn-bg{
    width: 100%;
    height: 100%;
    border-radius: 34px;
    background: #6f0707;
    z-index: -1;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
} */

.same-clr{
    background-color: #9B2929!important;
}



 .FewLogo, .Manfaat, .TeknologiAI, .HeroSection, .awardSect, .AllClients, .partnerCompany, .Testimoni, .whatsappSection,.FAQ{
    margin-bottom: 120px;
}

.SectionFirst{
    margin-bottom: 48px;
    margin-top: 100px;
}

.imgSlide{
    height: 135px;
    transform: translateY(-10px);
    

}
.box{
    padding: 0px 20px;
    border-radius: 15px;
    background: linear-gradient(117.08deg, #0C1A2E 11.92%, #434B56 100%);
  
}
.sliderWrap{
    height: 115px;
}
.slide{
    animation: slideMove 40s linear infinite;
}

@keyframes slideMove{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-2015px);
    }
}
/* navbar */
 /* navbar */
 #navBar {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    position: fixed;
    width: 100%;
    background: white;
    z-index: 999!important;
    padding: 5px 5%;
    top: 40px;
}

#btn-Nav {
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border: #9c171e 2px solid;
    border-radius: 7px;
    box-shadow: 4px 5px 10px rgba(0,0,0,.1);
    transition: .25s all ease-in-out;
    padding: 10px 20px;
    background-color: #9c171e;
    text-decoration: none;
}

#btn-Nav:hover {
    color: #9C171E;
    background: white;
}

.hm-nav{
    max-width: 160px;
}

/* #btn-Nav{
    margin-left: 10px;
} */

.navbar-collapse {
    flex-grow: unset!important;
}
.link-navBar{
    margin: 0px 10px;
    transition: 0.1s ease-in-out;
    border-radius: 8px;
    display: block;
    padding: 5px 20px;
    transition: all 0.2s ease-in-out;
}
.btm-border{
    transition: all 0.2s ease-in-out; 
}

.link-navBar:hover{
    background: #FFE1E3;
}

.link-navBar:hover .btm-border{
    border-bottom: #9C171E 1px solid;
    color: #9C171E;
}

.cta-banner {
    background: #F6F6F6;
}

.wrapper-cta-banner {
    padding: 20px 18px;
    border-radius: 20px;
}

.padding-cta-banner {
    padding: 20px 22px 20px 8px;
}

.line{
    border-right:1px rgba(0, 0, 0, 0.3) solid;
}

.padding{
    padding-top:20px;
    padding-bottom: 20px;
}

.desc-8{
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;

}

.black-font{
    color: black;
}

.desc-9{
font-family: Roboto;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}



/* First Section */
.div-pdf-second {
    height: 100%;
    width: 59px;
    padding: 11px 15px;
    background: #9B2929;
}
.btn-download{
    width: 159px;
}

.pdf-logo{
    max-width: 100%;
}
.secondaryBtn{
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    border: 2px #9B2929 solid;
    background-color: white;
    transition: all 0.25s ease-in-out;

}

/* FewLogo */

.imgSlide{
    height: 135px;
    transform: translateY(-10px);
    

}
.box{
    padding: 0px 20px;
    border-radius: 15px;
    background: linear-gradient(117.08deg, #0C1A2E 11.92%, #434B56 100%);
  
}
.sliderWrap{
    height: 115px;
}
.slide{
    animation: slideMove 40s linear infinite;
}

@keyframes slideMove{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-2015px);
    }
}


/* Manfaat */
.line-height{
    line-height: 30px!important;
}
.manfaat-logo {
    width: 44px;
    height: 44px;
}

.detail-btn{
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    text-decoration: none;
    background-color: #FFE8E8;
}

.detail-btn:hover .detail-box{
    opacity: 1;
    z-index: 5;
    height: fit-content!important;
}

.detail-box{
    background: white;
    position: absolute;
    z-index: -1;
    opacity: -2;
    width: 300px;
    padding: 20px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    box-shadow: 0px 0px 8px 0px #00000026;
    top: 0;
    right: 0;
    transition: all 0.25s ease-in-out;
}
.bottom-show{
    right: 0;
    left: unset;
    bottom: 0!important;
    top: unset!important;
}

.right{
    left:0!important;
}

.wrapperManfaat{
    border: 1px solid #D9D9D9;
    box-shadow: 0px 0px 8px 0px #00000026;
    padding: 20px 35px;
    border-radius: 10px;
    background: white;
    height: 100%;
}


/* TeknologiAI */
.wrapperAI{
    background: url(./assets/skema2/img/blackPattern.webp);
    background-size: cover;
    background-position: center center;
    border-radius: 20px;
    padding: 48px 68px 48px 68px;
}


/* HeroSection */
.wrapperHero{
    background: #FFFBEE;
    border-radius: 20px;
    padding: 48px 68px 48px 68px;
}

.heroImg{
    width: 95%;
}


/* award */
.awardSect{
    background: linear-gradient(117.08deg, #0C1A2E 11.92%, #434B56 100%);
    padding: 15px 0px;
}
.awardLogo{
    max-width: 110px!important;
}

/* AllClients Logo */
.wrapperClients{
    margin: 0px 20px 0px 20px;
}

/* .AllClients .owl-carousel .owl-item img {
    width: unset!important;
} */
/* .AllClients-slider1{
    animation: AllClientMove 20s linear infinite;
}

.AllClients-slider2{
    animation: AllClientMove1 23s linear infinite;
}

@keyframes AllClientMove{
    from{
        transform: translateX(0px);
    }
    to{
        transform: translateX(-750px);
    }
}
@keyframes AllClientMove1{
    from{
        transform: translateX(-705px);
    }
    to{
        transform: translateX(40px);
    }
} */

/* partner company */
.wrapperPartner{
    border-radius: 20px;
    background-color: #EFF7FF;
    padding: 48px 68px 48px 68px;
}


.box1, .box2, .box3 {
    padding: 4px 11px;
    border-radius: 20px;
}

.box1{
    border: 2px #FDA705 solid;
}
.box2{
    border: 2px #226DDD solid;
}
.box3{
    border: 2px #9C299F solid;
}
#partnerCarousel .owl-nav{
    position: relative;
}

#partnerCarousel .owl-prev, #partnerCarousel .owl-next{
    position: absolute;
    background-color: #9B2929;
    border-radius: 50px;
    width: 28px;
    height: 28px;
    top: -115px;
}

#partnerCarousel .owl-prev span, #partnerCarousel .owl-next span{
    font-size: 40px!important;
    color: white;
    display: inline-block;
}

#partnerCarousel .owl-prev span{
    transform: translate(-2px,-22px);
}

#partnerCarousel .owl-next span{
    transform: translate(2px,-22px);
}
#partnerCarousel .owl-prev {
    right: 45%;
}


#partnerCarousel .owl-next{
    right: 36%;
}

#partnerCarousel .owl-dots {
    position: absolute;
    right: 40%;
    bottom: 16%;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #9B2929!important;
}



/* section-rating */
.section-rating{
    padding: 85px 0px;
}

.section-rating .owl-nav{
    margin-top: 24px;
}

.rate-number{
    transform: translateY(5px);
}

.star-size{
    max-width: 26px;
    display: inline-block!important;
}
.rating-img{
    max-width:86px;
}

.carousel-rating-wrapper{
    border-radius: 10px;
    overflow: hidden;
}

#carousel-rating .owl-dots .owl-dot span, #carousel-manfaat .owl-dots .owl-dot span{
    background:#CCCCCC;
}
#carousel-rating .owl-dots .owl-dot.active span, #carousel-manfaat .owl-dots .owl-dot.active span, #carousel-rating .owl-dots .owl-dot:hover span, #carousel-manfaat .owl-dots .owl-dot:hover span{
    background:#9C171E;
}

.black-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    border-radius: 20px;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
}

.wrapper-video-play{
    cursor: pointer;
}


.wrapper-video-play:hover .black-overlay{
    background-color: rgba(0, 0, 0, 0.4);
}

.wrapper-video-play:hover .absolute-btn{
    opacity: 100%;
}

.absolute-btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100px;
    z-index: 6;
    opacity: 80%;
    transition: 0.25s all ease-in-out;
}

.section-rating #carousel-rating .owl-nav{
    position: absolute;
    top: 25%;
    width: 100%;
    opacity: 0.6;
    transition: all 0.25s ease-in-out;
}
.section-rating #carousel-rating .owl-prev, .section-rating #carousel-rating .owl-next{
    width: 50px;
    height: 50px;
    font-size: 50px;
    background-color: white;
    color: #3F3F3F;
    border-radius: 50px;
    position: absolute;
    filter: drop-shadow(0px 1px 10.1px rgba(0, 0, 0, 0.15));

    transition: ease .5s;
}

.section-rating #carousel-rating .owl-prev:hover, .section-rating #carousel-rating .owl-next:hover{
    background-color: #9C171E !important;
}

.section-rating #carousel-rating .owl-prev{
    left: 0px;
}
.section-rating #carousel-rating .owl-next{
    right: 0px;
}
.section-rating #carousel-rating .owl-prev span{
    position: absolute;
    left: 15px;
    top: -20px;
    color: #9C171E;
    transition: all 0.5s;
}
.section-rating #carousel-rating .owl-prev span:hover{
    color: white !important;
}

.section-rating #carousel-rating .owl-next span{
    position: absolute;
    right: 17px;
    top: -20px;
    color: #9C171E;
    transition: all 0.5s;
}

.section-rating #carousel-rating .owl-next span:hover{
    color: white;
}


.paragraph9{
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
}

.title9{
    font-size: 32px;
    line-height: 44px;
    font-family: 'Poppins';
    font-weight: 700;
}

.paragraph7{
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 700;
    line-height: 24px; 
}

.owl-theme .owl-dots{
    margin-top: 32px;
}

@media (min-width:1199.5px) and (max-width:1399.4px){
    .paragraph9{
        font-size: 25px;
        line-height: 38px;
    }
}

@media (max-width: 1399.4px){
    .title1, .title6, .title9, .title7 {
        font-size: 30px;
        line-height: 40px;
    }


}

/* whatsapp */
.btn-wa-section{
    background-color: #9B2929!important;
    color: white!important;
    border: 2px #9B2929 solid;
}
.wrapperWhatsapp{
    padding: 48px 68px 48px 68px;
    background-color: #F5FFF1;
    border-radius: 20px;
}


/* FAQ */
.FAQ .accordion-item{
    margin-bottom: 20px;
}

.FAQ .accordion-button:not(.collapsed) {
    background-color: transparent!important;
    border-bottom: 1px #9D9D9D solid!important;
}

.FAQ .accordion-item:first-of-type {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.FAQ .accordion-item {
    border-radius: 20px;
    border: 1px #9D9D9D solid!important;
}

.FAQ .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

.FAQ .accordion-button{
    background-color:transparent;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 30px 30px;
}

.FAQ .accordion-body{
    padding: 30px 30px;
}

.FAQ .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: unset!important;
    border-bottom-left-radius: unset!important;
}

.FAQ .accordion-item:last-of-type {
    border-bottom-right-radius: 20px!important;
    border-bottom-left-radius: 20px!important;
}

.accordion-button:focus {
    box-shadow:unset!important;
}


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

.footer-img{
    max-width: 200px!important;
}

a.linkfooter{
    text-decoration: none;
    transition: 0.2s ease;
}

a.linkfooter:hover{
   opacity: 80%;
}

.wrapper-absolute {
    background: linear-gradient(91.06deg, #9C171E 8.81%, #D3373F 97.58%),
    linear-gradient(0deg, #F5F5F5, #F5F5F5);;
    border-radius: 20px;
    padding: 50px 40px;
    position: absolute;
    top: -277px;
    box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.5)}

    .white-font{
    color: white!important;
}
.desc-6{
    font-family: Inter;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
}
.amanStyle{
    width:80%; 
    border-radius: 5px; 
    border:1px black solid;
    height:70%
}

.plus-img{
    width:30px;
}



/* media */
@media (min-width:1399.5px){
    .testiCarouselWrap {
        height: 318px;
    }
}

@media (min-width:1199.5px) and (max-width:1399.4px){

    #partnerCarousel .owl-prev, #partnerCarousel .owl-next {
        top: -72px;
    }

    #partnerCarousel .owl-prev {
        right: 44%;
    }
    
    #partnerCarousel .owl-next{
        right: 35%;
    }
    
    #partnerCarousel .owl-dots {
        right: 39%;
        bottom: 7%;
    }

    .testiCarouselWrap {
        height: 336px;
    }
        

}

@media(min-width:992px) and (max-width:1399.5px){
    .wrapperManfaat{
        padding: 20px 15px;
    }

    .AllClients .companies-padding{
        padding: 0px;
    }

      
}

@media (max-width:991.4px){
    .SectionFirst{
        margin-top: 70px!important;
        margin-bottom:24px;
    }
    #btn-Nav{
        width: 100%;
    }
    .btn-starter,.secondaryBtn{
        width: 100%;
    }
    /* .secondaryBtn{
        background: #FEA110;
        border: 2px #FEA110 solid;
    } */
    .detail-btn{
        position: unset;
    }
    .wrapperManfaat{
        position: relative;

    }
    .pdf-logo{
        width: 30px;
    }

    .secondaryBtn {
        padding: 0px;
    }

    .secondaryBtn{
        padding: 14px 24px;
    }

    .div-pdf-second{
        position: absolute;
        left: 0;
        top: 0;
    }
    .partnerCarouselWrap{
        flex-direction: column-reverse;
    }

    .heroImg{
        width: 100%;
    }

    .btn-starter{
        padding: 10px 24px;
    }

    .btn-starter{
        padding: 10px 24px;
    }

    .secondaryBtn {
        padding: 10px 24px;
    }
    .div-pdf-second {
        padding: 7px 15px;
    }

    .sliderWrap {
        height: 90px;
        
    }
    .imgSlide {
        height: 110px;
    }

    .TeknologiAI .title2{
        font-size: 24px;
    }

    .paragraph9 {
        font-size: 18px;
        line-height: 28px;
    }

    .title9{
        font-size: 22px;
        line-height: 32px;
    }

}


@media (min-width:991.5px) and (max-width:1199.4px){
    #partnerCarousel .owl-prev, #partnerCarousel .owl-next {
        top: -25px;
    }

    #partnerCarousel .owl-prev {
        right: 43%;
    }
    
    #partnerCarousel .owl-next{
        right: 32%;
    }
    
    #partnerCarousel .owl-dots {
        right: 37%;
        bottom: -7%;
    }

    .testiCarouselWrap {
        height: 299px;
    }

    .paragraph9 {
        font-size: 18px;
        line-height: 32px;
    }
    .title9{
        font-size: 22px;
        line-height: 32px;
    }

    .AllClients .companies-padding{
        width: 90%;
    }
    
    #carousel-rating .paragraph9{
        font-size: 18px;
        line-height: 32px;
    }
}

@media (max-width:767.5px) {
    #navBar{
       top: 0; 
    }
}



@media (min-width:767.5px) and (max-width:991.4px){
    .FewLogo, .Manfaat, .TeknologiAI, .HeroSection, .awardSect, .AllClients, .partnerCompany, .Testimoni, .whatsappSection,.FAQ{
        margin-bottom: 100px;
    }
    .title1 {
        font-size: 33px;
        line-height: 42px;
    }

    #partnerCarousel .owl-prev, #partnerCarousel .owl-next {
        top: -20px;
    }

    #partnerCarousel .owl-prev {
        right: 55%;
    }
    
    #partnerCarousel .owl-next{
        right: 38%;
    }
    
    #partnerCarousel .owl-dots {
        right: 46%;
        bottom: -4%;
    }
    .detail-box{
        left: 5%;
    }
    .bottom-show{
        right: unset!important;
        left: 5%!important;
    }

    .testiCarouselWrap {
        height: 391px;
    }

    .AllClients .companies-padding{
        width: 80%;
    }
   
}

@media (max-width:575.4px){
    .FewLogo, .Manfaat, .TeknologiAI, .HeroSection, .awardSect, .AllClients, .partnerCompany, .Testimoni, .whatsappSection,.FAQ{
        margin-bottom: 70px;
    }

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

    .title2{
        font-size: 28px;
        line-height: 36px; 
    }
    .TeknologiAI, .HeroSection, .whatsappSection, .partnerCompany{
        padding-left: 12px;
        padding-right: 12px;
    }

    .wrapperAI {
        padding: 20px;
    }

    .wrapperHero {
        padding: 20px;
    }

    .wrapperPartner {
        padding: 20px 20px 60px 20px;
    }

    #partnerCarousel .owl-prev, #partnerCarousel .owl-next {
        top: 0px;
    }

    #partnerCarousel .owl-prev {
        right: 58%;
    }
    
    #partnerCarousel .owl-next{
        right: 33%;
    }
    
    #partnerCarousel .owl-dots {
        right: 44%;
        bottom: -8%;
    }

    #partnerCarousel .owl-prev span {
        transform: translate(-2px,-18px);
    }

    #partnerCarousel .owl-next span {
        transform: translate(2px,-18px);
    }

    .wrapperWhatsapp {
        padding: 20px;
    }

    .detail-box{
        left: 10%;
        bottom: 20%;
        width: 80%;
    }
    .bottom-show{
        right: unset!important;
        left: 10%!important;
    }

    .wrapperTestimoni{
        padding:0px 15px;
    }

    #testimoniCarousel .owl-prev, #testimoniCarousel .owl-next {
        top: -246px;
    }
    
    #testimoniCarousel .owl-prev{
        left: 0px;
    }
    #testimoniCarousel .owl-next{
        right: 0px;
    }

    #testimoniCarousel .owl-prev span {
        transform: translate(-2px,-23px);
    }

    #testimoniCarousel .owl-next span {
        transform: translate(2px,-23px);
    }

    /* .client-logo, .client-logo1{
        max-height: 70px;
    } */
    .minimize{
        font-size: 12px!important;
    }
    .box1, .box2, .box3 {
        padding: 4px 9px;
        border-radius: 20px;
    }

    .awardLogo {
        max-width: 91px!important;
    }
    .testiContentWrap{
        padding: 0px 20px;
    }

    .testiCarouselWrap {
        padding: 15px 15px;
    }

    .right{
        left:10%!important;
    }

}

@media (min-width:575.5px) and (max-width:767.4px){
    .title1 {
        font-size: 33px;
        line-height: 42px;
    }
    .FewLogo, .Manfaat, .TeknologiAI, .HeroSection, .awardSect, .AllClients, .partnerCompany, .Testimoni, .whatsappSection,.FAQ{
        margin-bottom: 80px;
    }
    #partnerCarousel .owl-prev, #partnerCarousel .owl-next {
        top: -20px;
    }

    #partnerCarousel .owl-prev {
        right: 57%;
    }
    
    #partnerCarousel .owl-next{
        right: 34%;
    }
    
    #partnerCarousel .owl-dots {
        right: 44%;
        bottom: -4%;
    }

    .detail-box{
        left: 15%;
    }
    .bottom-show{
        right: unset!important;
        left: 10%!important;
    }

    .testiCarouselWrap {
        height: 304px;
    }

    .right{
        left:15%!important;
    }
}