*{
margin: 0;
padding: 0;
box-sizing: border-box;

}
body{
font-family: "Nunito",sans-serif;
margin: auto;
background-color: rgb(245, 237, 237);

}
.card-wrapper{
display: grid;
grid-template-columns:repeat(2,1fr);
margin: 80px 0;
}
img{
width: 100%;

}

.images{
width: 50%;
margin: auto;
margin-top: 30px;

}

.card{
display: grid;
grid-template-columns: 1fr;
width: 60%;
margin: 5rem 7rem; 
background-color:white;
padding:50px 55px ;
color:rgb(40, 39, 39) ;
text-align: center;
box-shadow: 18px 17px 0px -7px rgb(225, 222, 222);
position: relative;
}

.proceed{
background-color: aquamarine;
position: absolute;
padding: 20px;
color: white;
left: 0;
bottom: 0;
width: 100%;
cursor: pointer;


}
.proceed-2{
background-color: rgb(2, 2, 52);
position: absolute;
padding: 20px;
color: white;
left: 0;
bottom: 0;
width: 100%;
cursor: pointer;
}
.proceed-3{
background-color: red;
position: absolute;
padding: 20px;
color: white;
left: 0;
bottom: 0;
width: 100%;
cursor: pointer;
}
.proceed-4{
background-color: rgb(107, 5, 39);
position: absolute;
padding: 20px;
color: white;
left: 0;
bottom: 0;
width: 100%;
cursor: pointer;
}
.proceed:hover{
background-color: rgb(223, 16, 16);
transition: 0.5s;
}
.proceed-2:hover{
background-color: rgb(161, 16, 223);
transition: 0.5s;
}
.proceed-3:hover{
background-color: rgb(16, 223, 44);
transition: 0.5s;
}
.proceed-4:hover{
background-color: rgb(54, 16, 223);
transition: 0.5s;
}
.img{
display: flex;
height: 45%;
margin-bottom: 40px;
margin: auto;
border: none;
justify-content: center;
}

img{
margin: 0 5px;
border: 1px solid rgb(236, 232, 232);
padding: 3px;
cursor: pointer;

}
img:hover{
box-shadow: 3px 5px 5px gray;

}

h2{
font-size: 18px;
margin-top: 50px;
}
p{
font-size: 15px;
}
/*for smaller device*/
@media (max-width:767px){
.card-wrapper{
display: grid;
grid-template-columns:1fr;
}
.img{
display: flex;
height: 30%;
margin-bottom: 40px;
margin: auto;
border: none;
justify-content: center;
}

img{
margin: 0 5px;
border: 1px solid rgb(236, 232, 232);
padding: 3px;
cursor: pointer;
}
.card{
margin: auto;
margin-bottom: 30px;
}
}

@media (min-width:768px) and (max-width:999px){
.card-wrapper{
display: grid;
grid-template-columns:1fr 1fr;
}
.img{
display: flex;
height: 30%;
margin:auto;
border: none;
justify-content: center;

}

img{
margin: 0 5px;
border: 1px solid rgb(236, 232, 232);
padding: 3px;
cursor: pointer;
}
.card{
margin: auto;
margin-bottom: 30px;


}
}
@media (min-width:1000px){
.card-wrapper{
display: grid;
grid-template-columns:1fr 1fr;
}
.img{
display: flex;
height: 30%;
margin-bottom: 40px;
margin: auto;
border: none;
justify-content: center;
}

img{
margin: 0 2px;
border: 1px solid rgb(236, 232, 232);
padding: 3px;
cursor: pointer;
}
.card{
margin: auto;
margin-bottom: 30px;

}
}