.service-one { padding-bottom: 90px; .container { position: relative; z-index: 10; } &__single { border-style: solid; border-width: 1px; border-color: rgb(239, 239, 239); border-radius: 5px; padding: 2px; position: relative; margin-bottom: 30px; &:before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 5px; opacity: 0; background-image: linear-gradient(40deg, #ff43c0 0%, #ffa95c 100%); transition: all .4s ease; } h3 { margin: 0; font-size: 20px; line-height: 34px; color: $thm-black; a { color: inherit; transition: all .4s ease; &:hover { color: $thm-base-color; } } } p { margin: 0; color: #74727a; font-size: 16px; line-height: 34px; margin-top: 35px; margin-bottom: 25px; } &:hover:before { opacity: 1; } } &__link { color: $thm-black; font-size: 22px; transition: all .4s ease; &:hover { color: $thm-base-color; } } &__inner { background-color: #fff; border-radius: 5px; position: relative; padding-top: 50px; padding-bottom: 35px; } &__icon { width: 108px; height: 108px; box-shadow: 0px 20px 40px 0px rgba(255, 118, 142, 0.8); border-radius: 5px; background-image: linear-gradient(40deg, rgb(255, 67, 192) 0%, rgb(255, 169, 92) 100%); margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 70px; margin-bottom: 30px; } [class*=col-]:nth-child(1) { .service-one__single:before, .service-one__icon { background-mage: linear-gradient(40deg, rgb(255, 67, 192) 0%, rgb(255, 169, 92) 100%); } .service-one__icon { box-shadow: 0px 20px 40px 0px rgba(255, 118, 142, 0.8); } } [class*=col-]:nth-child(2) { .service-one__single:before, .service-one__icon { background-image: linear-gradient(40deg, rgb(13, 184, 255) 0%, rgb(243, 50, 255) 100%); } .service-one__icon { box-shadow: 0px 20px 60px 0px rgba(141, 142, 255, 0.8); } } [class*=col-]:nth-child(3) { .service-one__single:before, .service-one__icon { background-image: linear-gradient(40deg, rgb(57, 174, 255) 0%, rgb(60, 255, 83) 100%); } .service-one__icon { box-shadow: 0px 20px 40px 0px rgba(58, 212, 173, 0.8); } } [class*=col-]:nth-child(4) { .service-one__single:before, .service-one__icon { background-image: linear-gradient(40deg, rgb(255, 112, 62) 0%, rgb(255, 236, 78) 100%); } .service-one__icon { box-shadow: 0px 20px 40px 0px rgba(255, 178, 71, 0.8); } } }