.services-item {

    position: relative;

    margin: 65px 0 25px 0;

    box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2);

    height: 400px;

}



.services-item .services-img {

    position: absolute;

    padding: 12px;

    width: 170px;

    height: 130px;

    top: -65px;

    left: 50%;

    transform: translateX(-50%);

    background: #FFFFFF;

    box-shadow: 0 0 45px rgba(0, 0, 0, .09);

    z-index: 2;

}



.services-item .services-detail {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    overflow: hidden;

    z-index: 1;

}



.services-item .services-title {

    position: absolute;

    padding: 65px 30px 25px 30px;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #FFFFFF;

    transition: .5s;

}



.services-item:hover .services-title {

    top: -100%;

}



.services-item .services-text {

    position: absolute;

    overflow: hidden;

    padding: 65px 10px 10px 10px;

    width: 100%;

    height: 100%;

    top: 100%;

    left: 0;

    display: flex;

    align-items: center;

    text-align: center;

    background: rgba(2, 36, 91, .7);

    transition: .5s;

}



.services-item:hover .services-text {

    top: 0;

}



.services-item .services-text::before {

    position: absolute;

    content: "";

    width: 100%;

    height: 100px;

    top: -100%;

    left: 0;

    transform: skewY(-12deg);

    background: #FFFFFF;

    transition: .5s;

}



.services-item:hover .services-text::before {

    top: -55px;

}



.services-item .btn {

    position: absolute;

    width: 130px;

    height: 50px;

    left: 50%;

    bottom: -25px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--secondary);

    background: #FFFFFF;

    border: none;

    box-shadow: 0 0 45px rgba(0, 0, 0, .09);

    z-index: 2;

}



.services-item .btn:hover {

    color: #FFFFFF;

    background: var(--primary);

}





@media (min-width: 320px) {

 .services-item {

   height: 450px;

 }

}



/* From 768px and up */

@media (min-width: 768px) {

  .services-item {

   height: 390px;

 }

}



/* From 1024px and up */

@media (min-width: 1024px) {

   .services-item {

   height: 400px;

 }

}



/* From 1224px and up */

@media (min-width: 1224px) {

 .services-item {

   height: 400px;

 }

}



/* From 1824px and up */

@media (min-width: 1824px) {

  .services-item {

   height: 400px;

 }

}



/*  max-width query */

/* From 850px and up, until 950px  */

@media (min-width: 850px) and (max-width: 950px) {

   .services-item {

   height: 400px;

 }

}