section {
    height: auto;
}

.hero {
    height: 400px!important;
    text-align: center;
}

.hero h1 {
    font-size: 80px;
    color: #fff;
}

.dev {
    padding: 5rem 2rem;
}

.dev p {
    font-size: 1.2rem;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.deck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card-space {
    margin: 10px;
}

.card-space:hover .card {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
}

.card {
    border-radius: 10px;
    height: 220px;
    width: 220px;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

.face {
    border-radius: 10px;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.2);
    background-image: url('../img/backgound.jpg');
    padding: 30px 10px;
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    background-position: left;
}

.face.front {
    text-align: center;
    z-index: 20;
    transform: rotateY(0deg);
}

.face.front h1 {
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
    text-transform: uppercase;
}

.face.back p {
    color: #fff;
}

.face.back {
    transform: rotateY(180deg);
    text-align: left;
    overflow-y: auto;
}

.material-icons {
    font-size: 50px;
    color: #fff;
    margin-bottom: 1px;
}

.we_provide h2 {
    text-align: center!important;
    font-size: 3.4rem;
    font-weight: 700;
    color: #32de84;
    padding: 4rem 0;
}


/* happy clients */

.happy_client {
    margin: 5.5rem;
}

.happy_client .container {
    padding: 3.5rem 0;
    /* background-image: url('../img/backgound.jpg'); */
    border-radius: 30px;
}

.counter {
    font-size: 7.6rem;
    color: #000;
    font-weight: 900;
}

.happy_client h6 {
    font-size: 1.2rem;
    color: #000;
}


/* happy clients */


/* tech_wrok_with */

.tech_wrok_with img {
    height: 300px;
    width: 300px;
}

.tech_wrok_with {
    background-color: rgb(241, 241, 241);
    padding: 5.5rem 0;
}


/* case study */

.cd {
    height: 26.2rem!important;
    width: 26rem!important;
    margin: 40px 0;
    border-radius: 20px!important;
    -webkit-border-radius: 20px!important;
    -moz-border-radius: 20px!important;
    -ms-border-radius: 20px!important;
    -o-border-radius: 20px!important;
}


/* for software bg */

.case1 {
    background-image: url('../img/gym.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case2 {
    background-image: url('../img/hr.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case3 {
    background-image: url('../img/account.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case4 {
    background-image: url('../img/pos.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case5 {
    background-image: url('../img/v_reg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case6 {
    background-image: url('../img/REST.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* for software bg  ends*/


/* for web */

.case_web1 {
    background-image: url('../img/anti.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web2 {
    background-image: url('../img/ptrbd.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web3 {
    background-image: url('../img/wisdom.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web4 {
    background-image: url('../img/topdigitize.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web5 {
    background-image: url('../img/masbike.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web6 {
    background-image: url('../img/app3.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web7 {
    background-image: url('../img/kda.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web8 {
    background-image: url('../img/massgym.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.case_web9 {
    background-image: url('../img/ptpri.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* for web ends */

.card-body .a_link,
.card-body h5,
.card-body p {
    color: #fff;
    text-decoration: none;
    padding: 10%;
}

.overlay {
    background-image: url('../img/backgound.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: bottom;
    transition: all 0.4s ease-in-out;
    border-radius: 20px!important;
    -webkit-border-radius: 20px!important;
    -moz-border-radius: 20px!important;
    -ms-border-radius: 20px!important;
    -o-border-radius: 20px!important;
}

.overlay:hover {
    opacity: 100%;
    height: 100%;
    width: 100%;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.case-study h2 {
    text-align: center;
    font-size: 4.4rem;
    font-weight: 900;
    padding-top: 2.4rem;
}


/* custom software section */

.custom_soft {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f1f1f1;
    height: 1200px;
}


/* background image */

.custom_bg {
    /* object-fit: cover; */
    filter: brightness(70%);
    padding: 3rem 0;
}


/* overlay content container */

.overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* left content box */

.c_content {
    background: rgb(255, 255, 255);
    padding: 2rem;
    color: #222;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    */
    transform: translateY(200px);
    -webkit-transform: translateY(300px);
    -moz-transform: translateY(300px);
    -ms-transform: translateY(300px);
    -o-transform: translateY(300px);
}

.c_content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.c_content i {
    color: #32de84;
    font-size: 1.3rem;
}

.c_content h4 {
    color: #444;
    font-size: 1rem;
    margin: 0;
    border-bottom: 1px solid #32de84;
    padding-bottom: 8px;
}


/* right content box */

.c_right {
    color: #fff;
    padding: 2rem;
    border-radius: 15px;
    margin-left: 2rem;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    */
    transform: translateY(400px);
    -webkit-transform: translateY(400px);
    -moz-transform: translateY(400px);
    -ms-transform: translateY(400px);
    -o-transform: translateY(400px);
}

.c_right h2 {
    font-weight: 900;
    margin-bottom: 1.2rem;
    font-size: 4.5rem;
}

.c_right p {
    line-height: 1.7;
    color: #222;
}


/* responsive */

@media (max-width: 992px) {
    .overlay-content {
        flex-direction: column;
        text-align: center;
    }
    .c_right {
        margin-left: 0;
        margin-top: 1.5rem;
    }
    .custom_bg {
        height: auto;
    }
}

.our_service {
    background-color: #f1f1f1;
    margin: 4.4rem 0;
    padding: 4.4rem 0;
}

.our_service h2 {
    font-size: 4.4rem;
    text-align: center;
    padding: 5rem 0;
    font-weight: 900;
    text-transform: uppercase;
}

.o_s {
    height: 500px;
    width: 400px;
    padding: 5.3rem 2.1rem;
    background-color: #fff;
    box-shadow: 5px 5px 19px -4px rgba(0, 0, 0, 0.68);
}

.o_s h3,
.o_s p,
.o_s svg {
    margin: 2%;
    font-weight: 200;
}

.o_s h3 {
    margin-bottom: 30px;
}

.o_s svg {
    height: 50px;
    width: 50px;
    transform: translate(15.4rem, -2.3rem);
    -webkit-transform: translate(15.4rem, -2.3rem);
    -moz-transform: translate(15.4rem, -2.3rem);
    -ms-transform: translate(15.4rem, -2.3rem);
    -o-transform: translate(15.4rem, -2.3rem);
    color: #e7e7e7;
}