[class~="services-option"]{ display: flex; flex-direction: row; gap: 3.125rem; margin-top: 2.5rem; margin-bottom: 2.5rem; margin-left: 3.125rem; animation: 25s slideImages infinite linear; } [class~="services-option-container"]{ display: flex; flex-direction: row; overflow: hidden; position: relative; } [class~="services-option-container"]:hover [class~="services-option"]{ animation-play-state: paused; } [class~="services-option-container"]:before{ position: absolute; content: ""; width: 9.375rem; height: 100%; top: 0; z-index: 2; left: 0; background: linear-gradient(to left,rgba(255, 255, 255, 0) ,white); } [class~="services-option-container"]:after{ position: absolute; content: ""; width: 9.375rem; height: 100%; top: 0; z-index: 2; right: 0; background: linear-gradient(to right,rgba(255, 255, 255, 0) ,white); } [class~="services-industries"] [class~="divider"]{ margin-bottom: 2.5rem; } [class~="services-header"]{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 2.5rem; margin-bottom: 2.5rem; } [class~="services-header"] h1{ font-family: 'HelveticaBold'; font-size: 2.375rem; max-width: 57.5rem; margin: 0; color: rgb(29, 29, 29); } [class~="services-header"] span{ color: rgb(12, 116, 177); font-size: 3.75rem; } [class~="services-header"] button{ width: 17.5rem; height: 5rem; font-size: 1.375rem; background: none; border-width: 0.125rem; border-color: rgb(12, 116, 177); border-style: solid; border-radius: 2.5rem; color: rgb(12, 116, 177); font-family: 'HelveticaMedium'; transition: 0.15s; } [class~="services-header"] button:hover { background-color: rgb(36, 127, 180); color: rgb(233, 233, 233); } [class~="services-header"] button:active{ scale: 0.9; } [class~="services-banner-img"]{ width: 100%; max-width: 100%; display: block; height: 25rem; object-fit: cover; } [class~="services-option-title"]{ font-family: 'HelveticaBold'; font-size: 2.1875rem; } [class~="services-option-desc"]{ font-family: 'HelveticaRegular'; font-size: 1.375rem; width: 18.75rem; margin-top: 0.625rem; } [class~="services-option-button"]{ width: 11.25rem; height: 3.125rem; border-radius: 1.875rem; border-style: solid; border-width: 0.125rem; font-family: 'HelveticaMedium'; font-size: 1.3125rem; padding-right: 0.625rem; padding-left: 0.625rem; border-color: rgb(13, 108, 163); color: rgb(13, 108, 163); background: transparent; transition: 0.4s all ease-in-out 0s; position: relative; } [class~="services-option-button"]:hover{ color: white; } [class~="services-option-button"]::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1.875rem; z-index: -1; background-color: rgb(13, 108, 163); transition: 0.4s all ease-in-out 0s; left: unset; width: 0; right: 0; } [class~="services-option-button"]:hover::before{ } [class~="services-option-content"]{ background-color: rgb(247, 247, 247); max-width: 21.875rem; height: 21.875rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.875rem 1.875rem 1.875rem 1.875rem; border-radius: 2.5rem; transition: 0.2s ease-out; flex-wrap: wrap; } [class~="services-option-content"]:hover { scale: 1.1; cursor: pointer; } [class~="divide"]{ max-width: 70%; margin: 0 auto; } [class~="services-option-content"]:hover [class~="services-option-button"]:hover::before { left: 0; right: unset; width: 100%; } [class~="services-industries"]{ margin-top: 5rem; } [class~="services-container"]{ display: flex; flex-direction: row; justify-content: space-between; } [class~="services-container"] img{ width: 2.1875rem; height: 2.1875rem; } [class~="services-title"]{ font-size: 3.4375rem; font-family: 'HelveticaBold'; margin: 0; margin-bottom: 1.25rem; } [class~="services-container"] p{ font-size: 1.5625rem; max-width: 56.25rem; font-family: 'HelveticaRegular'; line-height: 2.8125rem; } [class~="services-thumbnail-container"]{ display: flex; flex-direction: row; align-items: center; margin-bottom: 1.25rem; } [class~="services-thumbnail-container"] p{ font-size: 1rem; font-family: 'HelveticaBold'; } [class~="services-logo-container"]{ display: flex; flex-direction: row; flex-wrap: wrap; } [class~="services-thumbnail-container"] img{ margin-right: 0.3125rem; } [class~="services-content"]{ margin-right: 2.1875rem; } [class~="services-description-media"]{ display: none; } [class~="services-thumbnail-container-media"]{ display: none; } [class~="services-option-button"] a{ text-decoration: none; color: inherit; }