.info_title{
    margin-top: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #E7E6DD;
    margin-bottom: 20px; 
    text-align: center;   
}/*Calculator*/
.delete img{
    width: 24px;
    height: 24px;
}
.delete{
    width: 70px;
    height: 50px;
}
.final_level{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calculator-content{
    padding: 100px 70px 0;

}
.calculator-info{
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.select-role, .exp, .select-level{
    display: flex;
    justify-content: space-between;
    color: #E7E6DD;
    width: fit-content;
    margin-bottom: 20px;
    align-items: flex-end;
}

input[type="radio"]{
width: auto;
}
  
.questions_buttons,.questions_buttons_final,#f_buttons{
width: 100%;
display: flex;
justify-content: center;
}
#finish{
    width: 100%;
    display: none;
    justify-content: center;  
}
.role,.level{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    font-size: 18px;
}

.role_label,.level_label{
    margin-left: 10px;
    width: fit-content;
}

.submit{
    margin-left: 50px;
    width: 70px;
    height: 50px;
}
.submit,.back{
    display: flex;
    align-items: center;
    justify-content: center;
}
.back{
    width: 70px;
    height: 50px;
}

.submit img, .back img{
    width: 32px;
    height: 32px;
}

.experience_item{
    margin: 0 20px;
}
.exp_title{
    font-size: 18px;
    margin-bottom: 20px;
}
.time{
    width: 200px;
}

#category_dev1,#category_dev2,#category_dev3,#category_dev4,#category_dev5,#category_dev6,#category_dev7{
    display: none;
}

#show_salary{
    display: none;
    padding-bottom: 20px;
}
.salary{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.salary_item{
    color: #E7E6DD;
    margin: 20px 20px 0;
    width: fit-content;
    text-align: center;
    box-shadow: 0 0 6px 2px #676767;
    padding: 30px;
    border-radius: 10px;
}

.salary_item h1{
   font-size: 18px; 
}

.salary_item p{
   font-size: 18px;
   margin-top: 20px;
   color: #007bff;
}

.final_level{
    text-align: start;
}

.level_title{
    font-size: 24px;
    font-weight: bold;
    color: #E7E6DD;  
    margin-left: 20px;
}

#level{
    color: #007bff;
    font-size: 18px;
    margin-top: 6px;
    margin-left: 7px;
}
.chart{
    margin-top: 10px;
}

/*Services*/
.services{
    padding: 100px 70px 0;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 0 auto;
}

.service{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 10px; 
  width: 300px; 
  color: #E7E6DD;
  box-shadow: 0 0 6px 2px #676767;
  padding: 30px;
  border-radius: 10px;
  background-color: #121212;
}

.service img{
    width: 70px;
    height: 70px;
}

.service h1{
    padding: 10px 0;
    font-size: 21px;
    font-weight: bold;
}

.service p{
    font-size: 18px;
    line-height: 20px;
}

.services-button{
    width: 100%;
    margin-top: 50px;
    padding: 0 70px;
    display: flex;
}
.services-button button{
    margin: 0 auto;
}

/*About us*/
.about-content{
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
}
.about-info{
    padding: 50px 50px 50px 70px;
    max-width: 620px;
}

.short-intro{
    margin-top: 50px;
    font-size: 18px;
    line-height: 20px;
    color: #E7E6DD;
}

.activities{
    margin-top: 20px;
    line-height: 20px;
    color: #E7E6DD;
}

.activities p{
    font-size: 21px;
    font-weight: bold;
}

.activities ul{
    margin-top: 20px;
    margin-left: 15px;
    font-size: 18px;
}

.company-ceo{
    margin-top: 50px;
    display: flex;
    align-items: center;
}

.company-ceo img{
    border-radius: 50%;
    width: 70px;
    height: 70px;
}

.ceo-descrip{
    margin-left: 20px;
    color: #E7E6DD;
}

.ceo-descrip h1{
font-weight: bold;
font-size: 21px;
}
.ceo-descrip p{
    margin-top: 10px;
    font-size: 18px;
}

.call{
    margin-top: 50px;
    color: #E7E6DD;
    font-size: 21px;
    font-weight: bold;
}

.about-nr{
    display: flex;
    margin-top: 15px;
}

.about-img{
    background: url('../images/building.jpg') no-repeat right;
    background-size: cover;  
    width: 100%;
    margin: 50px 70px 50px 0;
}

/*Skills*/
.skills-content{
    padding: 100px 70px 0;
}
.skills{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}
.skill{
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    margin: 50px 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 6px 2px #676767;

}
.skill img{
    width: 70px;
    height: 70px;
}
.skill p{
    color: #E7E6DD;
    margin-top: 20px;
    text-align: center;
}

/*Portofolio*/
.projects-content{
    padding: 100px 70px 0;
}

.projects{
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.project1 {
    background: url('../images/credit.png') no-repeat center;
}
.project2 {
    background: url('../images/capital.png') no-repeat right;
}

.project1,.project2{
    background-size: cover;   
    padding: 30px; 
    margin-top: 30px;
    width: 500px;
    border-radius: 10px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    color: #E7E6DD;
    box-shadow: 0 0 6px 2px #676767;
}

.project-title{
    font-size: 21px;
    font-weight: bold;
}

.project-date{
    font-size: 18px;
    margin-top: 10px;
}


#ro, #ru, #en{
    display: none;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
}

/*Responsive*/
@media only screen and (min-width: 1024px) and (max-width:1440px){

     .services{
        padding: 100px 50px 0;
     }
     .about-info{
        padding: 50px 50px 50px 50px;
     }
     .about-img{
        margin: 50px 50px 50px 0;
     }
     .calculator-content {
        padding: 100px 50px 0;
    }
    .skills-content {
        padding: 100px 50px 0;
    }
    .projects-content {
        padding: 100px 50px 0;
    }

}
@media only screen and (min-width: 750px) and (max-width:1024px){

    button{
        width: 200px;
    }

     .services{
        padding: 70px 35px 0;
     }
     .about-info{
        padding: 0 35px 35px 50px;
     }
     .about-img{
        margin: 0 35px 35px 0;
     }
     .calculator-content {
        padding: 70px 35px 0;
    }
    .skills-content {
        padding: 70px 35px 0;
    }
    .projects-content {
        padding: 70px 35px 0;
    }

    .service:nth-child(3){
        margin-top: 30px;
    }
    .services-button{
        margin-top: 30px;
    }
    .service{
        padding: 20px;
    }

    .about-content{
        margin-top: 70px;
    }
    .about-info{
    max-width: 500px;
    }
    .info_title {
        margin-top: 20px;
    }
    .short-intro,.company-ceo,.call {
        margin-top: 25px;
    }
    .about-nr a:nth-child(2){
      margin-left: 20px;
    }
    .i-item img {
        width: 21px;
        height: 21px;
        margin-right: 10px;
    }
    .skill{
    width: 350px;
    padding: 20px;
    margin: 30px 10px 0;
    }
    .project2{
        margin-top: 50px;
    }
    .project1, .project2 {
        padding: 20px;
        width: 700px;
        height: 400px;
    }
    .salary_item{
        padding: 20px;
    }

}

@media only screen and (min-width: 500px) and (max-width:750px){


     button{
        width: 150px;
     }
     .services{
        padding: 50px 35px 0;
     }
     .about-info{
        padding: 0 35px 35px 50px;
     }
     .about-img{
        margin: 0 35px 35px 0;
     }
     .calculator-content {
        padding: 50px 35px 0;
    }
    .skills-content {
        padding: 50px 35px 0;
    }
    .projects-content {
        padding: 50px 35px 0;
    }
    .about-content{
        margin-top: 50px;
    }

    .service:nth-child(2),.service:nth-child(3){
        margin-top: 20px;
    }
    .services-button{
        margin-top: 30px;
    }
    .service{
        width: 400px;
        padding: 15px;
    }
    .service h1 {
        font-size: 18px;
    }
    .service p {
        font-size: 14px;
        line-height: 18px;
    }
    .service img {
        width: 50px;
        height: 50px;
    }
    .about-info{
    max-width: 100%;
    }
    .about-img{
        display: none;
    }
    .info_title {
        margin-top: 20px;
    }

    .short-intro,.company-ceo,.call {
        margin-top: 15px;
    }
    .short-intro{
        font-size: 14px;
    }
    .activities{
        margin-top: 10px;
    }
    .activities ul {
        margin-top: 10px;
        font-size: 14px;
    }
    .activities p {
        font-size: 18px;
    }
    .company-ceo img {
        width: 50px;
        height: 50px;
    }
    .ceo-descrip h1 {
        font-size: 18px;
    }
    .ceo-descrip p{
        font-size: 14px;
    }
    .ceo-descrip{
        margin-left: 10px;
    }
    .call{
        font-size: 18px;
    }
    .i-item p{
        font-size: 14px;
    }
    .i-item{
        align-items: center;
    }
    .calculator-info{
        margin-top: 10px;
    }
    .select-role{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 10px;
        margin-top: -10px;
    }
    .info_title{
        font-size: 21px;
    }
    .exp_title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .experience_item {
        margin: 0 10px;
    }
    .experience_item:nth-child(3){
        margin-top: 20px;
    }
    .exp{
        justify-content: space-evenly;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    .time {
        width: 150px;
    }
    .level_title{
        font-size: 18px;
    }
    #level {
        font-size: 14px;
    }
    .salary_item{
        padding: 15px;
        margin: 10px 20px 0;
    }

    .role label{
        font-size: 14px;
    }
    .role:nth-child(3){
        margin-top: 15px;
    }
    .about-nr a:nth-child(2){
      margin-left: 20px;
    }
    
    .i-item img {
        width: 21px;
        height: 21px;
        margin-right: 10px;
    }
    .skill{
    width: 260px;
    padding: 15px;
    margin: 20px 10px 0;
    }
    .skill p {
        font-size: 18px;
        margin-top: 10px;
    }
    .skill img {
        width: 50px;
        height: 50px;
    }
    .project2{
        margin-top: 50px;
    }
    .project1, .project2 {
        padding: 15px;
        width: 450px;
        height: 250px;
        margin-top: 20px;
    }
    .project2{
        margin-top: 30px;
    }
}

@media only screen and (min-width: 50px) and (max-width:500px){
    button{
        width: 150px;
     }
     .services{
        padding: 30px 25px 0;
     }
     .about-info {
        padding: 0 25px;
    }
     .about-img{
        margin: 0 25px 25px 0;
     }
     .calculator-content {
        padding: 30px 25px 0;
    }
    .skills-content {
        padding: 30px 25px 0;
    }
    .projects-content {
        padding: 30px 25px 0;
    }
    .about-content{
        margin-top: 30px;
    }

    
    .service:nth-child(2),.service:nth-child(3){
        margin-top: 20px;
    }
    .services-button{
        margin-top: 30px;
    }
    .service{
        width: 100%;
        padding: 15px;
        margin: 10px 0 10px;
    }
    .service h1 {
        font-size: 18px;
    }
    .service p {
        font-size: 14px;
        line-height: 18px;
    }
    .service img {
        width: 50px;
        height: 50px;
    }
    .about-info{
    max-width: 100%;
    }
    .about-img{
        display: none;
    }
    .info_title {
        margin-top: 20px;
    }

    .short-intro,.company-ceo,.call {
        margin-top: 15px;
    }
    .short-intro{
        font-size: 14px;
    }
    .activities{
        margin-top: 10px;
    }
    .activities ul {
        margin-top: 10px;
        font-size: 14px;
    }
    .activities p {
        font-size: 18px;
    }
    .company-ceo img {
        width: 50px;
        height: 50px;
    }
    .ceo-descrip h1 {
        font-size: 18px;
    }
    .ceo-descrip p{
        font-size: 14px;
    }
    .ceo-descrip{
        margin-left: 10px;
    }
    .call{
        font-size: 18px;
    }
    .i-item p{
        font-size: 14px;
    }
    .i-item{
        align-items: center;
    }
    .calculator-info{
        margin-top: 10px;
    }
    .select-role{
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 10px;
        margin-top: -10px;
    }
    .info_title{
        font-size: 18px;
    }
    .exp_title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .experience_item {
        margin: 10px 0 0;
        width: 100%;
    }
    .experience_item:nth-child(3){
        margin-top: 20px;
    }
    .exp{
        display: block;
        margin-bottom: 10px;
        width: 100%;
    }
    .submit,.back{
    margin: auto;
    margin-top: 20px;
    }
    .back{
        margin-right: 0;
    }
    .select-level{
        justify-content: space-evenly;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }
    .level{
        margin-top: 10px;
    }
    .time {
        width: 100%;
    }
    .level_title{
        font-size: 18px;
    }
    #level {
        font-size: 14px;
    }
    .salary_item{
        padding: 15px;
        margin: 0 10px;
        width: 175px;
    }
    .salary_item:nth-child(3){
        margin-top: 20px;
    }
    .salary{
    justify-content: space-evenly;
    flex-wrap: wrap;
    }

    .role label{
        font-size: 14px;
    }
    .role:nth-child(3){
        margin-top: 15px;
    }
    .about-nr a:nth-child(2){
      margin-left: 20px;
    }
    
    .i-item img {
        width: 21px;
        height: 21px;
        margin-right: 10px;
    }
    .skill {
        width: 100%; 
        padding: 10px;
        margin: 30px 10px 0;
    }
    .skill p {
        font-size: 18px;
        margin-top: 10px;
    }
    .skill img {
        width: 50px;
        height: 50px;
    }
    .project2{
        margin-top: 50px;
    }
    .project1, .project2 {
        padding: 15px;
        width: 400px;
        height: 200px;
        margin-top: 20px;
    }
    .project2{
        margin-top: 30px;
    }
}