section.services{background:#5390ff;border-radius:30px;display:flex;flex-direction:column;gap:30px;padding:130px 50px;width:100%}section.services>.text{display:flex;flex-direction:column;gap:15px}section.services>.text h1{color:#fff;font-size:34px;font-weight:500}section.services>.text p{color:hsla(0,0%,100%,.7);font-size:18px;font-weight:400}section.services .cards{display:flex;flex-direction:row;gap:20px}section.services .cards .card{align-items:flex-start;background:#fff;border-bottom:10px solid #5390ff;border-radius:60px;box-shadow:0 15px 30px rgba(0,0,0,.1);display:flex;flex:1;flex-direction:column;gap:40px;justify-content:center;overflow:hidden;padding:20px 40px;position:relative}section.services .cards .card>a{display:flex}section.services .cards .card .arrow-white{display:none}section.services .cards .card:hover .arrow-white{display:block}section.services .cards .card:hover .arrow{display:none}section.services .cards .card:hover{border-color:#fff!important}section.services .cards .card:before{background:#5390ff;bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateY(100%);transition:all .35s ease-out;z-index:0}section.services .cards .card:nth-child(2):before{background:#6bc6b5}section.services .cards .card:nth-child(3):before{background:#d28db9}section.services .cards .card:hover:before{opacity:1;transform:translateY(0)}section.services .cards .card .icon-placeholder{align-items:flex-start;background:rgba(83,144,255,.2);border-radius:85px;display:flex;flex-direction:row;gap:10px;padding:45px 30px}section.services .cards .card:nth-child(2){border-color:#6bc6b5}section.services .cards .card:nth-child(2) .icon-placeholder{background:rgba(107,198,181,.2)}section.services .cards .card:nth-child(3){border-color:#d28db9}section.services .cards .card:nth-child(3) .icon-placeholder{background:rgba(210,141,185,.2)}section.services .cards .card .text{display:flex;flex-direction:column;gap:5px}section.services .cards .card .text h1{color:#343434;font-size:32px;font-weight:700}section.services .cards .card .text p{color:#747474;font-size:22px;font-weight:400;line-height:140%}section.services .cards .card:hover .icon-placeholder{background:hsla(0,0%,100%,.2)}section.services .cards .card:hover .text h1{color:#fff}section.services .cards .card:hover .text p{color:hsla(0,0%,100%,.7)}section.services .cards .card .icon-placeholder,section.services .cards .card .text,section.services .cards .card img{z-index:1}@media only screen and (max-width:600px){section.services{padding:20px}section.services>.text h1{font-size:28px}section.services>.text p{font-size:22px}section.services .cards{flex-direction:column}}