/*==============================================
   Services One
===============================================*/
.services-one {
   position: relative;
   display: block;
   background: var(--donatix-white);
   padding: 0px 0 55px;
   z-index: 1;
}

.services-one .shape2 {
   position: absolute;
   left: 0;
   bottom: 65px;
   z-index: -1;
}

.services-one__single {
   position: relative;
   display: block;
   background: var(--donatix-white);
   box-shadow: 0px 4px 40px rgb(0, 0, 0, 0.06);
   border-radius: 30px;
   padding: 30px 30px 25px;
   z-index: 1;
}

.services-one__single::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--donatix-primary);
   transform: scaleX(0.8) rotateX(20deg);
   opacity: 0;
   border-radius: 30px;
   transition: all 0.5s linear;
   z-index: -1;
}

.services-one__single:hover:before {
   transform: scaleX(1.0) rotateX(0deg);
   transition: all 0.4s linear;
   opacity: 1;
}

.services-one__single::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--donatix-base);
   opacity: 0;
   border-radius: 30px;
   transition: all 0.5s linear;
   z-index: -2;
}

.services-one__single:hover::after {
   transform: rotate(-10deg);
   opacity: 1;
}

.services-one__single .shape1 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 35px;
   text-align: center;
   z-index: -1;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-one__single:hover .shape1 {
   opacity: 0.07;
}

.services-one__single-icon {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 75px;
   height: 75px;
   background: var(--donatix-secondary);
   border-radius: 50%;
   margin: 0 auto 21px;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='74' height='74' viewBox='0 0 74 74'%3E%3Cimage xlink:href='data:image/png;base64, ' x='0' y='0' width='74' height='74'/%3E%3C/svg%3E");
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='74' height='74' viewBox='0 0 74 74'%3E%3Cimage xlink:href='data:image/png;base64, ' x='0' y='0' width='74' height='74'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center center;
   mask-position: center center;
   -webkit-mask-size: cover;
   mask-size: cover;
}

.services-one__single:hover .services-one__single-icon {
   background: var(--donatix-base);
}

.services-one__single-icon span::before {
   position: relative;
   display: inline-block;
   color: var(--donatix-white);
   font-size: 40px;
   line-height: 40px;
}

.services-one__single h2 {
   font-size: 18px;
   line-height: 34px;
   font-weight: 700;
   text-transform: capitalize;
   margin-bottom: 9px;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-one__single h2 a {
   color: var(--donatix-black);
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-one__single h2 a:hover {
   color: var(--donatix-base);
}

.services-one__single:hover h2 a {
   color: var(--donatix-white);
}

.services-one__single p {
   margin: 0;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-one__single:hover p {
   color: var(--donatix-white);
}

.services-one__single .btn-box {
   position: relative;
   display: block;
   margin-top: 15px;
}

.services-one__single .btn-box a {
   position: relative;
   display: inline-block;
   color: var(--donatix-secondary);
   font-size: 16px;
   line-height: 16px;
   font-weight: 700;
   text-transform: capitalize;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-one__single:hover .btn-box a {
   color: var(--donatix-base);
}

.services-one__single .btn-box a::before {
   position: absolute;
   left: 0;
   bottom: 0;
   right: 2px;
   height: 1px;
   background: var(--donatix-secondary);
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   content: "";
}

.services-one__single:hover .btn-box a::before {
   background: var(--donatix-base);
}

.services-one__single .btn-box a span::before {
   position: relative;
   display: inline-block;
   font-size: 13px;
   line-height: 13px;
   font-weight: 700;
   top: 1px;
}

/*==============================================
   Services Two
===============================================*/
.services-two {
   position: relative;
   display: block;
   padding: 120px 0px 120px;
   z-index: 1;
}

.services-two .shape2 {
   position: absolute;
   bottom: 60px;
   right: 70px;
   animation: shake-l-r 4s linear 0s infinite;
   z-index: 1;
}

.services-two__pattern {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-attachment: scroll;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   z-index: -1;
}

.services-two__pattern::before {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background: var(--donatix-gray-bg);
   opacity: 0.6;
   content: "";
}

.services-two__single {
   position: relative;
   display: block;
   background: var(--donatix-white);
   border-radius: 30px;
   padding: 30px 30px 25px;
   z-index: 1;
}

.services-two__single .shape1 {
   position: absolute;
   left: 0;
   bottom: 0;
   opacity: 0;
   transform: translateX(-50px);
   transition: background-color 0.8s ease;
   transition: all 0.8s ease;
   z-index: -1;
}

.services-two__single:hover .shape1 {
   opacity: 1;
   transform: translateX(0px);
}

.services-two__single::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: var(--donatix-primary);
   transform: scaleX(0.8) rotateX(20deg);
   opacity: 0;
   border-radius: 30px;
   transition: all 0.4s linear;
   z-index: -1;
}

.services-two__single:hover:before {
   transform: scaleX(1.0) rotateX(0deg);
   transition: all 0.4s linear;
   opacity: 1;
}

.services-two__single-top {
   position: relative;
   display: flex;
   align-items: center;
   margin-bottom: 18px;
}

.services-two__single-top .icon-box {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   background: #f6f6f6;
   border-radius: 20px;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-two__single:hover .services-two__single-top .icon-box {
   background: var(--donatix-base);
}

.services-two__single-top .icon-box span:before {
   position: relative;
   display: inline-block;
   color: var(--donatix-black);
   font-size: 40px;
   line-height: 40px;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-two__single:hover .services-two__single-top .icon-box span:before {
   color: var(--donatix-white);
}

.services-two__single-top .title-box {
   position: relative;
   display: block;
   margin-left: 20px;
   flex: 1;
}

.services-two__single-top .title-box h2 {
   font-size: 24px;
   line-height: 34px;
   font-weight: 700;
   text-transform: capitalize;
   padding-bottom: 4px;
}

.services-two__single-top .title-box h2::before {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 60px;
   height: 3px;
   background: var(--donatix-black);
   content: "";
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-two__single:hover .services-two__single-top .title-box h2::before {
   background: var(--donatix-base);
}

.services-two__single-top .title-box h2 a {
   color: var(--donatix-black);
}

.services-two__single:hover .services-two__single-top .title-box h2 a {
   color: var(--donatix-white);
}

.services-two__single-bottom {
   position: relative;
   display: block;
}

.services-two__single-bottom p {
   margin: 0;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-two__single:hover .services-two__single-bottom p {
   color: var(--donatix-white);
}

.services-two__single-bottom .btn-box {
   position: relative;
   display: block;
   margin-top: 15px;
}

.services-two__single-bottom .btn-box a {
   position: relative;
   display: inline-block;
   color: var(--donatix-secondary);
   font-size: 16px;
   line-height: 16px;
   font-weight: 700;
   text-transform: capitalize;
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
}

.services-two__single:hover .services-two__single-bottom .btn-box a {
   color: var(--donatix-base);
}

.services-two__single-bottom .btn-box a::before {
   position: absolute;
   left: 0;
   bottom: 0;
   right: 2px;
   height: 1px;
   background: var(--donatix-secondary);
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
   content: "";
}

.services-two__single:hover .services-two__single-bottom .btn-box a::before {
   background: var(--donatix-base);
}

.services-two__single-bottom .btn-box a span::before {
   position: relative;
   display: inline-block;
   font-size: 13px;
   line-height: 13px;
   font-weight: 700;
   top: 1px;
}

/*==============================================
   Services Three
===============================================*/
.services-one--three {
   position: relative;
   display: block;
   padding: 120px 0px 77px;
   z-index: 1;
}

.services-one--three__shape1 {
   position: absolute;
   top: 90px;
   left: 0px;
   z-index: -1;
}

.services-one--three__shape2 {
   position: absolute;
   top: 250px;
   left: 0px;
   z-index: -1;
}

.services-one--three__shape3 {
   position: absolute;
   bottom: 26px;
   right: 60px;
   animation: shake-l-r 4s linear 0s infinite;
   z-index: -1;
}

.services-one--three .services-one__single:hover .shape1 {
   opacity: 1;
}

.services-one--three .services-one__single::before {
   display: none;
}

.services-one--three .services-one__single::after {
   display: none;
}

.services-one--three .services-one__single {
   box-shadow: none;
   border: 1px solid #d8dde1;
   padding: 30px 30px 25px;
   margin-bottom: 30px;
}

.services-one--three .services-one__single-icon {
   background: transparent;
   mask: none;
   border: 1px dashed var(--donatix-secondary);
}

.services-one--three .services-one__single:hover .services-one__single-icon {
   border-color: var(--donatix-base);
}

.services-one--three .services-one__single-icon::before {
   position: absolute;
   top: 3px;
   left: 3px;
   bottom: 3px;
   right: 3px;
   background: var(--donatix-base);
   border-radius: 50%;
   transform: scale(0.5);
   opacity: 0;
   -webkit-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   transition: all 0.4s linear;
   content: "";
   z-index: -1;
}

.services-one--three .services-one__single:hover .services-one__single-icon::before {
   transform: scale(1.0);
   opacity: 1;
}

.services-one--three .services-one__single-icon span::before {
   color: var(--donatix-secondary);
   transition: all 500ms linear;
   transition-delay: 0.06s;
   transform: scale(1);
}

.services-one--three .services-one__single:hover .services-one__single-icon span::before {
   color: var(--donatix-white);
   transform: scale(0.9);
}

.services-one--three .services-one__single:hover .services-one__single-icon {
   background: transparent;
}

.services-one--three .services-one__single:hover h2 a {
   color: var(--donatix-black);
}

.services-one--three .services-one__single h2 a:hover {
   color: var(--donatix-base);
}

.services-one--three .services-one__single:hover p {
   color: var(--donatix-gray);
}

.services-one--three .services-one__single:hover .btn-box a {
   color: var(--donatix-secondary);
}

.services-one--three .services-one__single:hover .btn-box a::before {
   background: var(--donatix-secondary);
}

.services-one--three .services-one__single .btn-box a:hover {
   color: var(--donatix-base);
}

.services-one--three .services-one__single .btn-box a:hover::before {
   background: var(--donatix-base);
}