* {padding:0; margin: 0}
body {
    min-height: 100vh;color: #fff;font-family: 'Poppins', sans-serif;background: linear-gradient(45deg, #1f8179, #32d5c7, #32a9d5);background-size: 300% 200%;-webkit-animation: gradientBg 5s ease infinite;animation: gradientBg 5s ease infinite; position: relative
}
a {text-decoration: none; color: #fff}
ul {list-style: none}
h1 {font-size: 46px; font-weight: 400; text-align: center; margin-bottom: 20px; margin-top: 70px}
img.logo {display: flex; width: 100%; height: auto; max-width: 546px}
img.bg-icon {display: flex; position: absolute; left: 0; bottom:0; width: 100%; height: auto; max-width: 555px}

.content-box {padding-top:120px;max-width: 720px;margin:0 auto;display: flex;flex-direction: column;align-items: center; padding-inline:20px}
.contact-box {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 60px; row-gap: 20px; margin-top: 80px}

.columns-3 {display: grid;grid-template-columns: repeat(3, max-content);justify-content: center;column-gap: 55px;margin: 0 auto;list-style: none}
.columns-3 li {font-size: 20px;padding-left: 40px;position: relative;white-space: nowrap;margin-bottom: 12px}
.columns-3 li::before {content: '';position: absolute;left: 0;top: 50%;width: 18px;height: 14px;background: url('tick.svg') no-repeat center;background-size: contain;transform: translateY(-50%)}

a.is-phone {font-size: 34px; font-weight: 700}
a.is-phone:hover {text-decoration: underline}
a.is-mail {font-size: 20px; font-weight: 500; background-color: #000; border-radius: 50px; padding-inline: 32px; padding-block: 12px; transition: .2s opacity;}
a.is-mail:hover {opacity: .8}

@keyframes gradientBg {
    0% {background-position: 0% 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}

@-webkit-keyframes gradientBg {
    0% {background-position: 0% 50%}
    50% {background-position: 100% 50%}
    100% {background-position: 0% 50%}
}

@media screen and (max-width: 768px) {
    body {background-size: 400% 200%}
    .content-box {padding-top: 60px; padding-bottom: 40px}
    h1 {font-size: 32px; margin-top: 40px; margin-bottom: 30px}
    .columns-3 li {font-size: 16px}
    .columns-3 {grid-template-columns: repeat(2, max-content);column-gap: 40px}
    .columns-3 li {white-space: normal}
}

@media screen and (max-width: 450px) {
    .content-box {padding-top: 40px; padding-bottom: 40px}
    .contact-box {margin-top: 40px}
    a.is-phone {font-size: 28px}
    a.is-mail {font-size: 18px}
    .columns-3 {grid-template-columns: 1fr; column-gap: 20px;justify-content: start}
    h1 {font-size: 22px}
}