:root { --font: "Montserrat", sans-serif; --mobile-img-bp: 991px; --desktop-img-bp: 992px; --mobile-copy-width: 540px; --primary: #294e95; --main: #000; --lenovoblack: #1e0013; --n0: #fff; --bg: #f5f5f5; --highlight: #e1251b; --highlight-hs: #7a126b; --highlight-hs-light: #d9c1d8; --link-dk: #d9c1d8; --lred: #b30e13; --lgreen: #060; --lviolet: #783f9b; --dpurple: #4d144a; --dblue: #11184f; --lenovopurple: #7a126b; --paleblue: #c9d0f0; } html { font-size: 16px; } html, body { min-height: 100%; height: 100%; } body { font-family: var(--font); transition: smooth; scroll-behavior: smooth; } .commonHeader, .common_footer { font-family: "Lato", Helvetica, Arial, sans-serif; } .commonHeader a { color: #000  !important; text-decoration: none  !important; } .utility_nav_item_icon.utility_nav_item_store_icon { font-size: 16px  !important; } .btn { border-radius: 4px; padding: 17px 46px; font-weight: 600; line-height: 1em; cursor: pointer; font-size: 16px; text-align: center; text-decoration: none; width: fit-content; } .z-btn-primary { border: 1px solid var(--main); background-color: var(--n0); color: var(--main); } .z-btn-primary:hover { border: 1px solid var(--n0); background-color: var(--main); color: var(--n0); } .z-btn-secondary { border: 1px solid var(--n0); background-color: transparent; color: var(--n0); } .z-btn-secondary:hover { border: 1px solid var(--primary); background-color: var(--primary); } .z-container { max-width: 1920px; margin: 0 auto; background-color: var(--bg); } .section-title { font-size: 2.75em; font-weight: 600; letter-spacing: -1.2px; margin: 0  !important; padding: 1.25em 2% 0 2%; } .section-sub-title { font-variant-caps: all-petite-caps; font-size: 1.5em; margin: .25em 0  !important; padding-left: 2%; letter-spacing: -0.05em; } .text-card { background-color: var(--n0); border-radius: 0 0 16px 16px; padding: 1.25em; display: flex; flex-direction: column; justify-content: center; min-height: 240px; } @media (min-width: 1024px) and (max-width: 1550px) { .text-card { min-height: 270px; } } .text-card p:nth-of-type(1) { font-size: 2em; font-weight: 600; letter-spacing: -1.2px; margin: 0  !important; } .text-card p:nth-of-type(2) { font-size: 1.125em; letter-spacing: -0.32px; margin: 1em 0; } .hero-carousel { position: relative; overflow: hidden; } .hero-carousel-slides { display: flex; transition: transform .5s ease; } .hero-carousel-slide { flex: 0 0 100%; padding: 20px; box-sizing: border-box; height: 700px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; color: var(--n0); } .hero-carousel-slide:nth-of-type(1) { background-image: url("https://p4-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/img-slide-services.jpg"); } .hero-carousel-slide:nth-of-type(2) { background-image: url("https://p4-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/img-slide-ars.jpg"); } .hero-carousel-slide:nth-of-type(3) { background-image: url("https://p4-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/img-slide-petco.jpg"); } .hero-slide-content { width: 40%; display: flex; flex-direction: column; justify-content: center; text-align: left; height: inherit; margin-left: 5%; } .hero-slide-content p:nth-of-type(1) { font-variant-caps: all-petite-caps; font-size: 1.75em; letter-spacing: -0.32px; margin: 0  !important; } .hero-slide-content p:nth-of-type(2) { font-size: 2.5em; font-weight: 600; letter-spacing: -1.2px; margin: .75em auto  !important; } @media only screen and (max-width: 768px) { .hero-slide-content p:nth-of-type(1) { font-size: 1.125em; } .hero-slide-content p:nth-of-type(2) { font-size: 1.5em; } } .hero-carousel-prev, .hero-carousel-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; cursor: pointer; z-index: 1; width: 50px; height: 50px; border-radius: 50px; background-image: none; background: var(--main); display: flex; align-items: center; justify-content: space-between; box-shadow: 10px 10px 15px -10px #00000080; transition: all .6s  !important; } .hero-carousel-prev { left: 1%; } .hero-carousel-prev:hover { transition: all .6s  !important; } .hero-carousel-prev .arrow-left { width: 25px; height: 25px; background: url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/left-arrow.svg") center center; background-size: 25px; background-repeat: no-repeat; margin: auto; filter: invert(); } .hero-carousel-next { right: 1%; flex-direction: row-reverse; } .hero-carousel-next:hover { transition: all .6s  !important; } .hero-carousel-next .arrow-right { width: 25px; height: 25px; background: url("https://p1-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/right-arrow.svg") center center; background-size: 25px; background-repeat: no-repeat; margin: auto; filter: invert(); } @media only screen and (max-width: 992px) { .hero-slide-content { width: 80%; align-items: center; text-align: center; margin: auto; } } #servicesList .z-container .section-title { padding: 1.25em 2%; } .services-list-container { display: flex; column-gap: 2em; justify-content: space-between; align-items: flex-start; text-align: center; padding: 2em 5%; flex-wrap: wrap; background-color: var(--n0); } @media only screen and (max-width: 1400px) { .services-list-container { justify-content: center; } } .services-list-card { display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; color: var(--main); margin: 1em 0; } .services-list-card:hover { transform: scale(1.1); transition: ease-in-out all .5s; } .services-list-card .services-icon-card { background-color: var(--bg); border-radius: 50%; height: 100px; width: 100px; display: flex; justify-content: center; align-items: center; } .services-list-card .services-icon-card img { height: 50px; width: 50px; } .services-list-card p { font-size: 1.25em; width: 130px; padding: .5em 0; } .services-list-card:hover p { font-weight: bold; transition: ease-in-out all .5s; } .srvc-single-card-container { display: flex; padding: 5% 2% 2%; } .srvc-single-card-container div { width: 50%; object-fit: cover; } .srvc-single-card-container .srvc-consumer-img { width: 50%; border-radius: 16px 0 0 16px; background-image: url("https://p4-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/img-consumerservices.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } .srvc-single-card-container .text-card { border-radius: 0 16px 16px 0; padding: 3em; } .services-card-container { display: flex; justify-content: center; column-gap: 1em; padding: 1em 2%; } .srvc-multi-card { padding: .75em 0; width: 33.33%; } .srvc-multi-card-img { background-image: url("https://p3-ofp.static.pub/ShareResource/ww/landing-pages/services-2024/img/img-advisoryservices.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; height: 270px; border-radius: 16px 16px 0 0; } @media only screen and (max-width: 1400px) { .services-card-container { flex-wrap: wrap; } .srvc-multi-card { max-width: 490px  !important; width: 490px  !important; } } @media only screen and (max-width: 768px) { .srvc-single-card-container { flex-direction: column; width: 95%; max-width: 490px; justify-content: center; margin: auto; padding: 5% 0 0; } .srvc-single-card-container .srvc-consumer-img { height: 270px; width: auto; border-radius: 16px 16px 0 0; } .srvc-single-card-container .text-card { padding: 1.25em; width: auto; border-radius: 0 0 16px 16px; } } #warrantyCoverage .services-card-container { padding-bottom: 5%; }