.pilih-perangkat{
    text-align: center;
    background-color:#e9ebf9;
    padding: 80px 0;
}
.pilih-perangkat h1 {
    font-size: 40px;
    letter-spacing: 2px;
    color:#3d6cbb;
    margin-bottom: 40px;
    text-align: center;
}

.container-choose,.container-mitra{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.container-choose a,.container-mitra a, .other a{
    margin: 20px;
    display: block;
    text-decoration: none;
}
.card-choose{
    color: rgb(26, 26, 26);
    position: relative;
    width:300px;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    height: 230px;
    box-shadow: 0 3px 3px 1.4px rgb(26, 26, 26,0.08);
    transition: box-shadow 0.17s ease;
}
.card-choose:hover{
    box-shadow: 0 5px 12px 2px rgb(26, 26, 26,0.15);
}
.container-choose a:nth-child(1) .card-choose .repair{
    background-image: url(../image/printer.jpg);
}
.container-choose a:nth-child(2) .card-choose .repair{
    background-image: url(../image/laptop.jpg);
}
.container-choose a:nth-child(3) .card-choose .repair{
    background-image: url(../image/hp.jpg);
}
.container-choose a:nth-child(1) .card-choose .design{
    background-image: url(../image/product-design.jpg);
}
.container-choose a:nth-child(2) .card-choose .design{
    background-image: url(../image/web-design.jpg);
}
.container-choose a:nth-child(3) .card-choose .design{
    background-image: url(../image/art.jpg);
}
.container-choose a:nth-child(1) .card-choose .photo{
    background-image: url(../image/photo.jpg);
}
.container-choose a:nth-child(2) .card-choose .photo{
    background-image: url(../image/video.jpg);
}
.design , .repair, .photo , .img-choose{
    background-size: cover;
    width: 100%;
    height: 65%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.card-choose h2{
    margin-top: 25px;
    letter-spacing: 2px;
    font-size: 20px;

}

.selected-card{
    background-color: #3d6cbb;
    color: white;
    box-shadow: 0 3px 3px 1.4px rgb(26, 26, 26,0.15);
}

.selected-card .img-card {
    background-color: white;
}

.wrapper-mitra{
    width: 100%;
    padding: 80px 0 ;
}
.wrapper-mitra h1{
    font-size: 40px;
    letter-spacing: 2px;
    color:#3d6cbb;
    margin-bottom: 40px;
    text-align: center;
}

.mitra-card{
    width:220px;
    height: 270px;
    text-align: left;
    box-shadow: 0 0 3px 2px rgb(26, 26, 26,0.15);
}
.mitra-card h2, .mitra-card p, .mitra-card img{
    margin-left: 20px;
}
.mitra-card h2{
    position: relative;
    margin-top: 8px;
    margin-bottom: 5px;
    font-size: 17px;
}
.mitra-card p {
    font-family: "Popins Regular";
    font-size: 14px ;
}
.mitra-card img{
    float: left;
    width: 17px;
    margin-right: 5px;
    
}
.mitra-img{
    width: 220px;
    width: 220px;
    background-image: url(../image/profil.jpg);
    background-position: center;
}

.online{
    border:  3px solid #90e57e;
    border-radius: 10px;
}
.offline{
    border:  3px solid #ff6961;
    border-radius: 10px;
    cursor:not-allowed;
}
@media screen and (max-width: 900px){
    .header-repair img{
        width: 400px;
    }
}
@media screen and (max-width: 600px){
    .header-repair img{
        width: 350px;
    }
}