.card-sec{
    width: 100vw;
    background-image: url('../img/banner/texture.png');
    overflow: hidden;
    padding-bottom: 5em;
}

.card-wrapper {
    width: 100vw;
    height: 42em;
    display: grid;
    grid-template:
     " . phone . "
     " . phone . "
     " . phone . ";
    justify-content: center;
    align-items: center;
}

.card {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 350px;
    height: 185px;
    margin: 0 1em 0 1em;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0px 2px 21px #88888857;
}

.text-card{
    width: 17em;
    height: 11em;
    display: grid;
    align-content: space-around;
    justify-content: center;
}

.img-card{
    width: 4em;
    height: 4em;
    background-color:#FAFAFA;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}
.img-card img{
    width: 2em;
}
.text-card h1 {
    width: 16em;
    color: #2B0556;
    font: normal normal 800 17px/20px Poppins;
}


.text-card h2 {
    color: #1D2224;
    font: normal normal 303 15px/16px Poppins;
    margin-top: -1em;
    opacity: 0.9;
}

.text-card h3 {
    color: #57C1DB;
    font: normal normal 403 17px/16px Poppins;
    margin-top: 1em;
}

.card:hover {
    transition: 0.5s;
    background:#2B0556;

}

.card:hover .text-card h1{
    transition: 0.5s;
    color: #57C1DB;
}
.card:hover .text-card h2{
    transition: 0.5s;
    color: #fff;
}



/* phone  */

.phone-card{
    grid-area: phone;
    width: 320px;
    height: 655px;  
    background-color:#F4F4F4;
    border-radius: 3em;
    border: 1em solid #FAFAFA;
    box-shadow: 5px 10px #888888;
    box-shadow: 0px 2px 21px #888888;
    display: grid;
    align-content: space-between;
    justify-items: center;


}
.phone-top{
    width: 147px;
    height: 34px;
    background: #FAFAFA;
    border-radius: 0 0 1em 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.phone-speaker{
    width: 39px;
    height: 8px;
    background: #C5C5C5;
    border-radius: 2em;
    margin-right: 1em;
}
.camera{
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #C5C5C5;
}


.line-bottom {
    width: 92px;
    height: 4px;
    border-radius: 2em;
    background: #C5C5C5;
    /* margin-bottom: 2em; */
    position: absolute;
    top: 120em;
}
/* content  */

.cont-phone{
    width: 18em;
    height: 39em;
    display: flex;
    justify-content: center;
    align-items: center;
}


.cont-phone img{
    width: 20em;

}

.cont-phone .img-ui{
    margin-right: 2em;

}

.cont-phone .img-seo{
    margin-left: 3.5em;
    

}

.cont-phone .img-hard{
    margin-right: 4em;

}


@media only screen and (max-width: 1151px) {   
    .card-wrapper {
        grid-template: " . . "
            " . . "
            " . . ";
    }
    .phone-card {
        display: none;
    }
}

@media only screen and (max-width: 753px) {   
    .card-wrapper {
        grid-template: " . "
                " . "
                " . ";
                
        height: 73em;
    }
    

}