.slogan {padding-top: 2.7777777778rem; } .slogan h2 {line-height: 1.1;margin-bottom: 1rem;text-align: center;color: var(--black);font-size: 1.4444444444rem; } @media (min-width: 576px) {.slogan h2 {font-size: 1.8888888889rem;} } @media (min-width: 768px) {.slogan h2 {font-size: 2.2222222222rem;} } .slogan h2.footer-title {margin-bottom: 1.6666666667rem; } .slogan .banner-content {text-align: center; } .slogan .banner-content .col-auto {display: flex;flex-direction: column;justify-content: center; } @media (max-width: 767.98px) {.slogan .banner-content .col-auto {flex-grow: 1;} } .slogan .banner-content h3 {font-size: 1.2222222222rem;font-weight: 400;text-align: center; } @media (min-width: 576px) {.slogan .banner-content h3 {font-size: 1.4444444444rem;} } @media (min-width: 768px) {.slogan .banner-content h3 {font-size: 1.5555555556rem;} } .slogan .banner-content p {font-size: 1.2222222222rem;font-weight: 200; } @media (min-width: 992px) {.slogan .banner-content p {font-size: 1.4444444444rem;} } .slogan .banner-content p.claim {font-size: 3rem;text-transform: uppercase;display: inline-block;opacity: 0;transform: translateY(-12px);animation: claimIn 0.7s ease forwards;animation-delay: 0.1s; } @media (min-width: 768px) {.slogan .banner-content p.claim {font-size: 4.2222222222rem;} } @media (min-width: 992px) {.slogan .banner-content p.claim {font-size: 5.2777777778rem;} } .slogan .banner-content p.claim strong {font-size: 2rem;display: inline-block;opacity: 0;transform: translateY(-12px);animation: claimIn 0.6s ease forwards;animation-delay: 0.5s; } @media (min-width: 768px) {.slogan .banner-content p.claim strong {font-size: 2.6666666667rem;} } @media (min-width: 992px) {.slogan .banner-content p.claim strong {font-size: 3.3333333333rem;} } @keyframes claimIn {to {opacity: 1;transform: translateY(0);} } .slogan .banner-content p strong {font-weight: 700; } .slogan .services {margin: 2.2222222222rem 0;padding: 4.4444444444rem 0;position: relative; } .slogan .services:hover p {opacity: 0.55;filter: blur(0.2px);transition: opacity 0.2s ease, filter 0.2s ease; } .slogan .services p {border: 1px solid var(--primary);display: inline-flex;position: absolute;padding: 0.5555555556rem;border-radius: 50%;font-weight: 600;justify-content: center;align-items: center;width: 5.5555555556rem;height: 5.5555555556rem;background: var(--white);cursor: default;transform: translateY(0) translateZ(0);will-change: transform;transition: transform 0.5s;line-height: 1.2;font-size: 0.8333333333rem; } @media (min-width: 768px) {.slogan .services p {width: 7.2222222222rem;height: 7.2222222222rem;border: 2px solid var(--primary);font-size: 1rem;} } .slogan .services p::after {content: "";position: absolute;inset: -0.5555555556rem;border-radius: 999px;border: 1px solid rgba(var(--primary), 0.55);opacity: 0;transform: scale(0.92);transition: opacity 0.5s ease, transform 0.5s ease;pointer-events: none; } .slogan .services p:hover {opacity: 1;filter: none;border-color: var(--black);transform: translateY(-0.3333333333rem) translateZ(0);box-shadow: 0 0.8888888889rem 2.2222222222rem rgba(0, 0, 0, 0.08);background: var(--light);transition: transform 0.5s, box-shadow 0.5s ease, border-color 0.5s ease, opacity 0.5s ease, filter 0.5s ease, background 0.5s ease, color 0.5s ease;cursor: crosshair; } .slogan .services p:hover::after {opacity: 1;transform: scale(1); } .slogan .services p:focus-visible {outline: 0.1666666667rem solid rgba(var(--primary), 0.35);outline-offset: 0.3333333333rem; } .slogan .services p.first {left: 0;bottom: 1.6666666667rem; } @media (min-width: 992px) {.slogan .services p.first {width: 6.3888888889rem;height: 6.3888888889rem;} } .slogan .services p.second {left: 10%;top: 20%; } @media (min-width: 992px) {.slogan .services p.second {top: 35%;width: 10rem;height: 10rem;font-size: 1.4444444444rem;} } .slogan .services p.third {bottom: 0;left: 35%; } .slogan .services p.fourth {top: 5%;right: 35%; } .slogan .services p.fifth {bottom: 0;right: 10%; } @media (min-width: 992px) {.slogan .services p.fifth {right: 15%;width: 8.3333333333rem;height: 8.3333333333rem;font-size: 1.2222222222rem;} } .slogan .services p.sixth {right: 0;top: 20%; } @media (min-width: 992px) {.slogan .services p.sixth {right: 10%;font-size: 1.4444444444rem;width: 10rem;height: 10rem;} }