main {
 display: flex;
 justify-content: center;
 align-items: center;
}
#services-container {
 width: 75vw;
 padding: 1em;
 margin-bottom: 1em;
}
#services-container h2 {
 margin-bottom: 2em;
 font-size: 2em;
 position: relative;
}
#services-container h2::after {
 content: "";
 height: 10px;
 width: 2em;
 position: absolute;
 top: 1.5em;
 left: 0px;
 background-color: #4070f4;
}
.services-card {
 width: 300px;
 height: 350px;
 text-align: center;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  0 6px 20px 0 rgba(0, 0, 0, 0.19);
 -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
  0 6px 20px 0 rgba(0, 0, 0, 0.19);
 transition: 0.5s;
 background-color: #4070f41e;
}
.services-card:hover {
 transition: 0.5s;
 transform: scale(0.95);
}
.services-card h4 {
 margin-top: 1em;
}
#cards {
 display: flex;
 justify-content: space-around;
 gap: 25px;
 flex-wrap: wrap;
}
#page-tittle {
 margin-bottom: 1.1em;
}
#services-card-container {
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
}

.wrapper {
 width: 300px;
 height: 500px;
 background: white;
 margin: 0 auto 40px auto;
 position: relative;
 overflow: hidden;
 border-radius: 10px;
 transition: 0.5s;
}
.wrapper:hover {
 transform: scale(1.01);
 box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
.wrapper .container {
 width: 100%;
 height: 100%;
}
.wrapper .container .top {
 height: 80%;
}
.wrapper:nth-child(1) .container .top {
 background: url("../images/Skills.webp") no-repeat center center;
 background-size: cover;
}
.wrapper:nth-child(2) .container .top {
 background: url("../images/conseil.webp") no-repeat center center;
 background-size: cover;
}
.wrapper:nth-child(3) .container .top {
 background: url("../images/plugins.webp") no-repeat center center;
 background-size: cover;
}
.wrapper .container .bottom {
 width: 200%;
 height: 20%;
}
.wrapper .container .bottom p {
 margin: 0;
 padding: 0;
}
.wrapper .container .bottom .left {
 height: 100%;
 width: 50%;
 background: #f4f4f4;
 position: relative;
 float: left;
}
.wrapper .container .bottom .left .details {
 padding: 20px;
 float: left;
 width: calc(70% - 40px);
}
.details-tittle {
 font-size: 14px;
 margin-bottom: 0.4em !important;
}
.wrapper .container .bottom .left .buy {
 float: right;
 width: calc(30% - 2px);
 height: 100%;
 background: #f1f1f1;
 color: #4473f4;
 transition: 0.5s;
 border: none;
 cursor: pointer;
 border-left: solid thin rgba(0, 0, 0, 0.1);
}
.wrapper .container .bottom .left .buy ion-icon {
 font-size: 30px;
 padding: 30px;
 transition: 0.5s;
}
.wrapper .container .bottom .left .buy:hover {
 background: #4473f4;
 color: white;
 transition: 0.1s;
}
.wrapper .inside {
 z-index: 9;
 background: #ff4900;
 width: 140px;
 height: 140px;
 position: absolute;
 top: -70px;
 right: -70px;
 border-radius: 0px 0px 200px 200px;
 transition: all 0.5s, border-radius 2s, top 1s;
 overflow: hidden;
}
.wrapper .inside .icon {
 position: absolute;
 right: 85px;
 top: 85px;
 color: white;
 opacity: 1;
 font-size: 24px;
}
.wrapper .inside:hover {
 width: 100%;
 right: 0;
 top: 0;
 border-radius: 0;
 height: 80%;
}
.wrapper .inside:hover .icon {
 opacity: 0;
}
.wrapper .inside:hover .contents {
 opacity: 1;
 transform: scale(1);
 transform: translateY(0);
}
.wrapper .inside .contents {
 padding: 5%;
 opacity: 0;
 transform: scale(0.5);
 transform: translateY(-200%);
 transition: opacity 0.2s, transform 0.8s;
 color: white;
}
.wrapper .inside .contents p {
 text-align: left;
 width: 100%;
 font-size: 13px;
}
form {
 justify-content: center;
}
.btnClose {
 font-size: 48px;
 padding: 0 10px;
 cursor: pointer;
 color: rgb(26, 26, 26);
 position: absolute;
 right: 0;
 top: -5px;
}
.overlay {
 position: relative;
}