/* Media Max-Width 1200px */
@media(max-width: 1200px){
    /* HERO SECTION */
    #hero h1{
        font-size: 42px;
    }

    .present h2{
        font-size: 30px;
    }

    .present p{
        padding:  0 38px 0 0;
    }

    .present .btn-ak1,
    .present .btn-search{
        padding: 16px 36px;
    }

}

/* Media Max-Width 991px */
@media (max-width: 991px) {
    /* HERO SECTION */
    #hero .container{
        padding-top: 50px;
    }

    #hero .hero-img {
        width: 85%;
        text-align: center;
    }

    #hero .hero-img img {
        width: 85%;
        margin: 10px 0 0 25%;
    }

    #hero p{
        margin: 0 auto 30px auto;
        width: 100%;
    }

    .flow .flow-line{
        top: 100px;
    }

    .present p{
        padding: 0;
        text-align: center;
        width: 100%;
    }

    .verif .nik-search .btn-search-data{
        margin-top: 20px;
    }

    .verif .data-verif .btn-ak1-cta{
        margin: 0 auto;
    }

    .profil .left-card,
    .profil .right-card{
        padding: 0;
    }

    .first .step-info img.step-full{
        display: none;
    }
    
    .first .step-info img.step-active{
        display: block;
    }

    .confirmEmail h1{
        font-size: 28px;
    }

    .confirmEmail a{
        padding: 20px 20%;
    }

}

/* Media Max-Width 768px */
@media (max-width: 768px) {
    /* HERO SECTION */
    #hero h1 {
        font-size: 42px;
        line-height: 150%;
    }

    #hero .hero-img img {
        width: 80%;
        margin: 36px 0 0 20%;
    }

    
    #hero p{
        font-size: 14px;
        width: 100%;
    }

    .apply h3{
        font-size: 30px;
    }

    .header .left-bottom,
    .header .right-top{
        width: 112px;
        height: 35px;
    }

    .verif .data-verif{
        flex-direction: column;
    }
}

/* Media Max-Width 581px */
@media (max-width: 581px){
    .filter .item{
        margin-bottom: 26px;
    }

    .vacancies .content .content-desc{
        margin-bottom: 20px;
    }

    .verif .data-verif{
        flex-direction: column;
    }

    .verif .data-verif .verif-info{
        text-align: center;
        margin: 0 auto;
    }
}

@media (max-width : 490px){
    .detail .modal .modal-footer{
        flex-direction: row-reverse;
    }
}

@media (max-width: 425px){
    p{
        font-size: 14px;
    }

    #hero{
        padding-top: 60px;
        text-align: center;
    }

    #hero h3{
        font-size: 16px;
    }

    #hero h1{
        font-size: 28px;
    }

    #hero .search-job{
        padding: 10px 18px;
        font-size: 12px;
    }

    #hero .btn-search{
        padding: 10px 18px;
        left: 25%;
        right: 25%;
        bottom: -20px;
    }

    #hero p{
        width: 96%;
    }

    .partner h5{
        text-align: center;
    }

    .partner p{
        text-align: center;
    }

    .partner img{
        width: auto;
        height: 40px;
        margin-right: 30px;
        padding-top: 10px;
        object-fit: scale-down;
  mix-blend-mode: color-burn;
    }

    .partner .partner-slides{
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .partner .partner-group{
        align-items: baseline;
    }

    .flow h3{
        font-size: 24px;
    }

    .flow .flow-step .step{
        margin-bottom: 25px;
    }

    .flow .flow-line{
        display: none;
    }

    .present h6{
        text-align: center;
        font-size: 16px;
    }

    .present h2{
        text-align: center;
        font-size: 24px;
    }

    .present .double-items{
        flex-direction: column;
        gap: 20px;
    }

    .present .btn-ak1,
    .present .btn-search{
        padding: 14px 26px;
        display:block;
        margin: 0 auto;
        width: 80%;
    }

    .apply h3{
        font-size: 24px;
    }

    .apply img{
        width: 98px;
        height: 98px
    }

    .header h1{
        font-size: 28px;
    }

    .header p{
        width: 95%;
    }

    .vacancies h2{
        font-size: 24px;
    }

    #footer .footer-top .footer-logo{
        width: 90%;
    }

    .banner-ak1 h3{
        font-size: 24px;
    }

    .profil .profil-data h2{
        text-align: center;
        margin: 20px 0;
    }

    .profil .vacancies-history{
        padding: 20px 0;
    }

    .confirmEmail a{
        padding: 20px 30%;
    }
}

@media (max-width: 375px){
    p {
        font-size: 12px;
    }

    #hero h3{
        font-size: 14px;
    }

    #hero h1{
        font-size: 27px;
    }

    #hero p,
    #hero .btn-search{
        font-size: 12px;
    }

    .partner p{
        font-size: 12px;
    }

    .flow h6{
        font-size: 14px;
    }

    .flow p{
        font-size: 12px;
    }

    .present h6{
        font-size: 14px;
    }

    .present p{
        font-size: 12px;
    }

    .present .btn-ak1, .present .btn-search {
        font-size: 12px;
    }

    .apply h6{
        font-size: 14px;
    }

    .apply .apply-step p,
    .apply p a{
        font-size: 12px;
    }

    .banner-ak1 p,
    .banner-ak1 .btn-cta{
        font-size: 12px;
    }

    .vacancies h4{
        font-size: 20px;
    }

    .vacancies p{
        font-size: 12px;
    }

    .vacancies .btn-view-all,
    .vacancies .btn-view-all-fill{
        font-size: 12px;
    }

    .header h1{
        font-size: 23px;
    }

    .header p{
        font-size: 12px;
    }

    .filter .item input{
        font-size: 12px;
        padding: 20px;
    }

    .filter .item input::placeholder{
        font-size: 12px;
    }

    .filter .item select{
        font-size: 12px;
        padding: 20px;
    }

    .filter .item img{
        width: 30px;
        bottom: 30%;
    }

    /* DETAIL SECTION */
    .detail p.link-page{
        font-size: 12px;
    }

    .detail p.link-page span{
        font-size: 14px;
    }

    .detail h3{
        font-size: 24px;
    }

    .detail h5{
        font-size: 18px;
    }

    .detail .info ul li,
    .detail .info p{
        font-size: 12px;
    }

    .detail .desc h6.ket{
        font-size: 12px;
    }

    .detail .desc span{
        font-size: 14px;
    }

    .detail .company-desc h6.title{
        font-size: 12px;
    }

    .detail .company-desc span{
        font-size: 12px;
    }

    .detail .apply-company-btn {
        font-size: 14px;
    }

    .detail .modal .btn{
        font-size: 12px;
    }

    .detail .modal .modal-header h1{
        font-size: 18px;
    }

    .verif .appeal p{
        font-size: 12px;
    }

    .verif label{
        font-size: 14px;
    }

    .verif input.data-applicant,
    .verif textarea.data-applicant,
    .verif input{
    font-size: 12px;
}

    .verif .nik-search .btn-search-data{
        font-size: 12px;
        padding: 10px 20px;
    }

    .verif .data-verif{
        padding: 20px;
    }

    .verif .data-verif .not-found-img{
        width: 60%;
        margin: 0 auto;
    }

    .verif .data-verif h5{
        font-size: 18px;
    }

    .verif .data-verif p{
        font-size: 12px;
    }

    .verif .btn-ak1-cta,
    .verif .btn-search-data{
        font-size: 12px;
        padding: 10px 20px;
    }

    .verif .data-box .data-verif{
        padding: 20px;
    }

    .profil .profil-navigation a.active,
    .profil .profil-navigation a{
        font-size: 13px;
        margin-right: 4px;
    }

    .profil .tab-content .data-card{
        padding: 20px;
    }

    .profil .appeal p,
    .profil .profil-data p,
    .profil .profil-data label,
    .profil .profil-data p.info-data,
    .profil .custom-control label,
    .profil span.input-group-text,
    .profil .profil-data .data-applicant,
    .profil .profil-data table tr td span,
    .setting .profil-data .form-group input.form-control {
        font-size: 12px;
    }

    .profil .tab-content h4,
    .profil .tab-content a.action,
    .profil .profil-data h6.data-tagline{
        font-size: 14px;
    }

    .profil .tab-content h4,
    .profil .tab-content a.action{
        font-size: 16px;
    }

    .profil .profil-data h2{
        font-size: 20px;
    }

    .profil .profil-data .input-data-profil{
        font-size: 12px;
        padding: 16px 14px;
    }

    .profil .profil-data .btn-save,
    .profil .tab-content .btn-link-page{
        font-size: 12px;
        padding: 12px 26px;
    }

    .profil .card-heading .btn-upload {
        font-size: 12px;
        padding: 8px 16px;
    }

    .profil .tab-content h1.attention{
        font-size: 20px;
        width: 100%;
    }

    .profil .tab-content .attention-info{
        font-size: 12px;
    }

    .vacancies-history .vacancies-data{
        flex-direction: column;
    }

    .profil .vacancies-history .vacancies-desc h4{
        font-size: 18px;
    }

    .profil .vacancies-history{
        padding: 20px 0;
        margin-bottom: 26px;
    }

    .setting h1{
        font-size: 24px;
    }

    .setting .set a,
    .setting .set a.active{
        font-size: 16px;
    }

    .setting .data-card{
        padding: 20px;
    }

    .setting .profil-data .form-group input.form-control{
        font-size: 12px;
    }

    .setting .profil-data .btn-confirm,
    .setting .profil-data .btn-help{
        font-size: 12px;
        padding: 12px 24px;
    }

    .setting .profil-data p.info-data,
    .setting .profil-data a.link{
        font-size: 12px;
    }

    .first .content .data-card{
        padding: 20px;
    }

    .first .data-applicant label,
    .first .data-applicant p.info-data,
    .first span.input-group-text{
        font-size: 12px;
    }

    .first .tab-content h4{
        font-size: 16px;
    }

    .first .data-applicant .input-data-applicant{
        font-size: 12px;
        padding: 16px 14px;
    }

    .first .data-applicant .btn-save,
    .first .data-applicant a.btn-back-outline{
        font-size: 12px;
        padding: 12px 26px;
    }

    .profil .card-heading .btn-upload {
        font-size: 12px;
        padding: 8px 16px;
    }

    .profil .tab-content h1.attention{
        font-size: 20px;
        width: 100%;
    }

    .profil .tab-content .attention-info{
        font-size: 12px;
    }

    .verif .data-verif .btn-ak1-cta{
        font-size: 12px;
    }


    #footer .footer-top .footer-links ul a,
    #footer .footer-top p{
        font-size: 14px;
    }

    .confirmEmail h1{
        font-size: 24px;
    }

    .confirmEmail p,
    .confirmEmail a{
        font-size: 12px;
    }

    .confirmEmail img{
        width: 100px;
        height: 100px;
    }
}