.why_payroll_hero background: transparent linear-gradient(116deg, #180D1A 0%, #3A1745 48%, #3A1745 57%, #92278F 100%) 0% 0% no-repeat padding-box padding: 5rem 0 position: relative @include tablet padding: 9rem 0 2rem 0 !important .col-lg-5 margin-bottom: 2rem @include phone padding: 7rem 0 2rem 0 .bg_image_only width: 100% height: 100% img width: 100% height: 100% position: absolute top: 0 right: 0 aspect-ratio: 1920 / 980 object-fit: cover !important .why_payroll_hero_image width: 90% margin: 0 auto position: relative display: flex align-items: center justify-content: center background: #FFFFFF 0% 0% no-repeat padding-box padding: 1rem border-radius: 12px height: 100% @include tablet width: 100% !important @include phone width: 100% margin-top: 1.5rem img width: 100% height: 100% object-fit: contain !important position: relative border-radius: 12px z-index: 99 .why_payroll_hero_description height: 100% align-content: center h1 font-size: 2.875rem font-weight: 700 color: #ffffff margin-top: 0 !important margin-bottom: 1.5rem @include desktop font-size: 2.5rem !important span background: transparent linear-gradient(288deg, #6457FF 0%, #FF52A8 100%) background-size: 300% 300% -webkit-background-clip: text background-clip: text -webkit-text-fill-color: transparent color: transparent animation: payrollIntelligence 4s ease-in-out infinite p font-size: 1rem font-weight: 400 color: #ffffff margin-top: 0 margin-bottom: 2rem ul list-style: none !important padding-left: 0 !important li display: flex justify-content: space-between margin-bottom: 1rem p font-size: 1rem font-weight: 400 color: #ffffff margin-bottom: 0 margin-top: 0 width: calc( 100% - 40px ) span font-weight: 600 width: unset !important height: unset !important span width: 25px height: 25px display: inline-block @include desktop width: 18px height: 18px img width: 100% height: 100% @keyframes payrollIntelligence 0% background-position: 0% 50% 50% background-position: 100% 50% 100% background-position: 0% 50% .why_payroll_real_operations margin: 7rem 0 @include tablet margin: 3rem 0 !important .col-lg-9 padding: 0 !important .col-md-3 width: 100% !important .real_operations_description display: flex align-items: center justify-content: space-between margin-bottom: 1.5rem .common_description width: 48.5% !important margin-bottom: 0 !important position: unset !important h2 font-size: 1.8rem font-weight: 700 color: #14141F margin-bottom: 3rem text-align: center @include phone margin-bottom: 2rem @include desktop font-size: 1.8rem @include phone margin: 3rem 0 .col-lg-9 .col-md-4 padding: 0 !important margin-top: 1rem @include desktop .col-lg-9 .row height: 100% .location_only img width: 23% !important @include phone width: 50px !important .real_operations_features background: #E9EEFF 0% 0% no-repeat padding-box border-radius: 12px padding: 2rem height: 100% display: flex align-items: center justify-content: space-between flex-direction: column text-align: center width: 100% @include phone padding: 1rem !important flex-direction: row !important @include desktop padding: 1rem img width: 30% margin: 0 auto 1.5rem auto opacity: .8 height: 100% object-fit: contain !important @include phone width: 50px !important margin-bottom: 0 !important .real_operation_common @include phone width: calc( 100% - 60px ) text-align: left padding-left: 1rem p font-size: 1.5rem font-weight: 500 color: #14141F margin-top: 0 margin-bottom: 1rem h3 font-size: 1.5rem font-weight: 600 color: #8C0054 margin: 0 .real_operations_description .common_description background: #FFF2FA 0% 0% no-repeat padding-box border-radius: 12px padding: 1rem margin-bottom: 1rem &:nth-child(2) margin-bottom: 0 !important position: relative bottom: -6px @include phone bottom: 0 !important h3 font-size: 1.5rem font-weight: 500 color: #14141F margin-top: 0 margin-bottom: 1rem @include desktop font-size: 1.3rem !important margin-bottom: .5rem !important p font-size: 1rem font-weight: 400 margin: 0 !important color: #14141F .best_payroll_software margin-bottom: 7rem .row align-items: center .best_payroll_software_image width: 100% text-align: center align-content: center height: 100% img width: 90% height: auto object-fit: contain !important @include tablet width: 100% margin-top: 2rem @include phone width: 100% .best_payroll_software_description h2 font-size: 1.8rem font-weight: 700 color: #14141F margin-top: 0 !important margin-bottom: 1.5rem p font-size: 1rem font-weight: 400 color: #14141F margin-top: 0 !important margin-bottom: 1rem ul list-style: none padding-left: 0 margin-bottom: 0 li display: flex align-items: center background: #FFFFFF 0% 0% no-repeat padding-box border: 1px solid #E6E4F0 border-radius: 15px padding: 2rem margin-bottom: 2rem justify-content: space-between &:nth-child(3) margin-bottom: 0 !important @include phone padding: 1rem !important @include desktop padding: 1.5rem .description_details width: calc( 100% - 90px ) h3 font-size: 1.5rem font-weight: 600 color: #14141F margin-top: 0 !important margin-bottom: 1.5rem @include desktop font-size: 1.3rem !important margin-bottom: .8rem !important p font-size: 1rem font-weight: 400 color: #14141F margin: 0 !important span width: 75px display: inline-block height: 100% img width: 100% height: auto object-fit: contain !important .why_payroll_team margin-bottom: 7rem background-repeat: no-repeat background-size: 100% 100% height: 100vh position: relative margin-bottom: 7rem @include tablet height: 69vh background-size: contain !important .col-lg-6 margin-bottom: 2rem @include phone margin-bottom: 3rem !important height: auto !important padding: 1rem background-size: cover !important .custom_container_fluid height: 100% .payroll_common_container height: 100% .col-lg-12 height: 100% .row height: 100% align-content: flex-end padding-bottom: 5rem .col-lg-6 @include phone margin-bottom: 1.5rem &::before content: '' display: block width: 100% height: 100% position: absolute top: 0 left: 0 background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box @include phone background: #0000009e !important .why_payroll_team_common background: #00548C00 0% 0% no-repeat padding-box border-radius: 12px opacity: 1 backdrop-filter: blur(30px) -webkit-backdrop-filter: blur(30px) height: 100% padding: 2.5rem @include phone padding: 1rem !important h3 font-size: 1.5rem font-weight: 600 color: #ffffff margin-top: 0 !important margin-bottom: 1.5rem p font-size: 1rem font-weight: 400 color: #ffffff margin-top: 0 !important margin-bottom: 1.5rem ul list-style: none padding-left: 0 margin-bottom: 0 li display: flex align-items: center justify-content: space-between margin-bottom: 1rem p font-size: 1rem font-weight: 400 color: #ffffff margin: 0 !important width: calc( 100% - 50px ) @include desktop width: calc( 100% - 35px ) !important span width: 30px height: 30px display: inline-block @include desktop width: 25px height: 25px img width: 100% height: 100% .separate_tools margin-bottom: 7rem @include tablet margin-bottom: 3rem @include phone margin-bottom: 3rem .separate_tools_image width: 100% display: flex align-items: center justify-content: center img width: 95% @include tablet width: 100% margin-bottom: 2rem @include phone width: 100% margin-bottom: 1rem .separate_tools_description height: 100% align-content: center h2 font-size: 1.8rem font-weight: 700 color: #14141F margin-top: 0 !important margin-bottom: 1.5rem p font-size: 1rem font-weight: 400 color: #14141F margin-top: 0 !important margin-bottom: 1rem ul list-style: none padding-left: 0 margin-bottom: 0 display: flex flex-wrap: wrap justify-content: space-between li width: 49% background: #F7F6FB 0% 0% no-repeat padding-box border-radius: 12px padding: 2rem margin-bottom: 1rem display: flex justify-content: space-between flex-direction: column @include phone width: 100% @include desktop padding: 1rem .tools_description height: 100% h3 font-size: 1.625rem font-weight: 600 color: #14141F margin-top: 0 !important margin-bottom: 1rem @include desktop font-size: 1.3rem !important p font-size: 1rem font-weight: 400 color: #14141F margin: 0 !important span width: 76px display: inline-block margin-bottom: 1.2rem @include desktop width: 55px margin-bottom: .7rem !important img width: 100% &:nth-child(3) width: 100% display: flex align-items: center justify-content: space-between flex-direction: row !important padding: 3rem margin-bottom: 0 !important @include phone flex-direction: column !important padding: 2rem align-items: flex-start .tools_description width: 100% !important @include desktop padding: 2rem !important .tools_description width: calc( 100% - 100px ) @include desktop width: calc( 100% - 70px ) !important .why_payroll_questions margin-bottom: 7rem @include tablet margin-bottom: 3rem !important .col-lg-6 margin-bottom: 2rem @include phone margin-bottom: 3rem !important .col-lg-6 margin-bottom: 1rem h2 font-size: 1.8rem font-weight: 700 color: #14141F text-align: center margin-top: 0 !important margin-bottom: 1rem p font-size: 1rem font-weight: 400 color: #14141F width: 50% margin: 0 auto 3rem auto !important text-align: center @include phone width: 75% !important .why_payroll_questions_common display: flex align-items: center justify-content: space-between background: #F9F9FB 0% 0% no-repeat padding-box border-radius: 15px padding: 2rem height: 100% @include desktop padding: 1rem .question_description width: 69% h3 font-size: 1.625rem font-weight: 600 color: #14141F margin-top: 0 !important margin-bottom: 2.5rem @include desktop font-size: 1.3rem !important margin-bottom: 1.5rem !important ul list-style: none padding-left: 0 margin-bottom: 0 li display: flex align-items: center justify-content: space-between margin-bottom: 1rem p font-size: 1rem font-weight: 500 color: #14141F margin: 0 !important width: calc( 100% - 50px ) text-align: unset !important span width: 30px height: 30px display: inline-block @include desktop width: 25px height: 25px img width: 100% height: 100% .question_image width: 30% img width: 100%