@font-face {
font-family: "SiteIcons";
src: url(//www.agencylight.com/wp-content/themes/our-theme//node/font_output/SiteIcons.woff2?t=1755179165218) format('woff2'),
url(//www.agencylight.com/wp-content/themes/our-theme//node/font_output/SiteIcons.woff?t=1755179165218) format('woff');
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'SiteIcons' !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-down-angle::before { content: "\ea01"; }
.icon-arrow-freehand-fill::before { content: "\ea02"; }
.icon-arrow-freehand::before { content: "\ea03"; }
.icon-arrow-left::before { content: "\ea04"; }
.icon-arrow-right::before { content: "\ea05"; }
.icon-arrow-stylish-left::before { content: "\ea06"; }
.icon-arrow-stylish-right::before { content: "\ea07"; }
.icon-box::before { content: "\ea08"; }
.icon-bullet-point::before { content: "\ea09"; }
.icon-card::before { content: "\ea0a"; }
.icon-cart::before { content: "\ea0b"; }
.icon-check-more::before { content: "\ea0c"; }
.icon-check-star::before { content: "\ea0d"; }
.icon-check::before { content: "\ea0e"; }
.icon-chevron-right::before { content: "\ea0f"; }
.icon-click-arrow::before { content: "\ea10"; }
.icon-clock::before { content: "\ea11"; }
.icon-cross::before { content: "\ea12"; }
.icon-crosshair::before { content: "\ea13"; }
.icon-curly-arrow-right::before { content: "\ea14"; }
.icon-custom-1::before { content: "\ea15"; }
.icon-custom-2::before { content: "\ea16"; }
.icon-custom-3::before { content: "\ea17"; }
.icon-custom-4::before { content: "\ea18"; }
.icon-double-check::before { content: "\ea19"; }
.icon-empire::before { content: "\ea1a"; }
.icon-eye::before { content: "\ea1b"; }
.icon-facebook::before { content: "\ea1c"; }
.icon-flash::before { content: "\ea1d"; }
.icon-for-menu::before { content: "\ea1e"; }
.icon-globe::before { content: "\ea1f"; }
.icon-hash::before { content: "\ea20"; }
.icon-link::before { content: "\ea21"; }
.icon-mail::before { content: "\ea22"; }
.icon-mailbox::before { content: "\ea23"; }
.icon-map-position::before { content: "\ea24"; }
.icon-minus-circle::before { content: "\ea25"; }
.icon-phone::before { content: "\ea26"; }
.icon-pin-location::before { content: "\ea27"; }
.icon-plane::before { content: "\ea28"; }
.icon-plus-circle::before { content: "\ea29"; }
.icon-plus::before { content: "\ea2a"; }
.icon-quote-bottom::before { content: "\ea2b"; }
.icon-quote-top::before { content: "\ea2c"; }
.icon-quote::before { content: "\ea2d"; }
.icon-reload::before { content: "\ea2e"; }
.icon-search::before { content: "\ea2f"; }
.icon-shape-1::before { content: "\ea30"; }
.icon-shape-2::before { content: "\ea31"; }
.icon-shape-3::before { content: "\ea32"; }
.icon-shape-4::before { content: "\ea33"; }
.icon-shape-branding::before { content: "\ea34"; }
.icon-sharp-star::before { content: "\ea35"; }
.icon-size::before { content: "\ea36"; }
.icon-solar::before { content: "\ea37"; }
.icon-star-check::before { content: "\ea38"; }
.icon-star-point::before { content: "\ea39"; }
.icon-star::before { content: "\ea3a"; }
.icon-target::before { content: "\ea3b"; }
.icon-world::before { content: "\ea3c"; }:root {
--primary: #CAF291;
--accent: #FFB3DB;  
--border: #3F3F3F;
--color: #bbb;
--font: Site Roboto;
--font-big: Site Heading Now;
--header-background: transparent;
}
body {
padding: 0;
margin: 0;
background-color: #111;
color: var(--color);
font-family: var(--font);
font-size: 18px;
&:has( #contact-bubble-popup.open, #masthead .wrap.open ) {
overflow: hidden;
}
&:has( #blog, #blog-single, #service-banner  ) {
background-color: #fff;
#masthead {
.inner.active {
--header-background: #F6F6F6;             
}
.navigation a:not(.active) {
filter: invert(1);
}
.branding img {
filter: invert(1);
} 
.handler-mobile {
filter: invert(1);
} 
.wrap.open {
.navigation a {
filter: invert(0);
}
.branding img {
filter: invert(0);
}          
.handler-mobile {
filter: invert(0);
} 
}
}
#footer {
background-color: #111;
}
}
&:has( #blog, #blog-single  ) {
#footer {
background-color: #fff;
}
}
@media only screen and (max-width: 980px) {
font-size: 16px;
} 
overflow-x: hidden !important;
}
a {
text-decoration: none;
color: var(--color);
}
img {
max-width: 100%;
}
.container {
max-width: 1170px;
margin-inline: auto;
padding-inline: 28px;
box-sizing: border-box;
}
.container-medium {
position: relative;
max-width: 950px;
margin-inline: auto;
padding-inline: 28px;
box-sizing: border-box;
}
.container-large {
max-width: 1690px;
margin-inline: auto;
padding-inline: 28px;
box-sizing: border-box;
}
.header {
position: relative;
display: grid;
align-content: baseline;
gap: 24px;
margin-bottom: 64px;
@media only screen and (max-width: 980px) {
margin-bottom: 32px;
overflow-x: clip;
} 
.description:empty {
display: none;
}    
u {
position: relative;
text-decoration: none;
&:after {
content: "";
bottom: 4px;
background-image: url(//www.agencylight.com/wp-content/themes/our-theme/assets/img/pink-underline.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
content: "";
height: 25px;
left: -10px;
position: absolute;
right: -10px;
z-index: -1;
z-index: 0;
}
}
}
.sub,
.subline {
border: 2px solid var(--primary);
border-radius: 4px;
padding: 12px 12px;
text-transform: uppercase;
width: fit-content;
font-family: var(--font-big);
font-weight: 700;
color: #fff;
font-size: 24px;
text-box: cap alphabetic;
transform: rotate(-4deg);
&.center {
margin-inline: auto;
}
&.white {
background-color: #fff;
border: none;
color: #111;
}
@media only screen and (max-width: 980px) {
font-size: 20px;
padding: 8px;       
} 
}
.sub {
border-color: var(--primary);
background-color: var(--primary);
color: #111;
}
.title {
position: relative;
text-box: cap alphabetic;
font-size: 160px;
font-weight: 800;
line-height: 0.9;
color: #fff;
text-transform: uppercase;
font-family: var(--font-big);   
&.primary {
color: var(--primary);
}
&.accent {
color: var(--accent);
}
&.wnormal {
font-weight: normal;
}
u {
color: var(--accent);
text-decoration: none;
}
&.white {
color: #fff;
}
&.dark {
color: #111;
}
&.medium {
font-size: 80px;
line-height: 1;
}
&.small {
font-size: 60px;
}
&.xsmall {
font-size: 30px;
}
&.large {
font-size: 104px;
}
&.xlarge {
font-size: 120px;
}
&.center {
text-align: center;
}
@media only screen and (max-width: 980px) {
&.large, 
&.xlarge,
&.medium {
font-size: 64px;
}
font-size: 64px;
br {
display: none;
}
} 
svg {
@media only screen and (max-width: 980px) {
width: auto;
height: 54px;
}
}
}
.description {
font-size: 24px;
line-height: 1.4;
_white-space: break-spaces;
&.center {
text-align: center;
}   
&.normal {
font-size: 20px;
}   
&.white {
color: #fff;
}
&.darker {
color: #555;
}
@media only screen and (max-width: 980px) {
font-size: 18px !important;
} 
}
.text {
line-height: 1.5; 
}
.btn {
position: relative;
z-index: 2;
background-color: var(--primary);
font-size: 26px;
border-radius: 250px;
padding: 12px 40px;
color: #111;
font-weight: 800;
font-family: var(--font-big);
text-transform: uppercase;
text-box: cap alphabetic;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
gap: 12px;
cursor: pointer;
transition: all 0.3s;
&:has(img) {
padding-left: 16px;
}
img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #fff;
&:not(:last-child) {
margin-right: -24px;
}
@media only screen and (max-width: 980px) {
width: 30px;
height: 30px;
}     
}
span {
--size: 6px;
--color: #fff;
width: 0px;
height: 0px;
display: block;
border-top: var(--size) solid transparent;
border-bottom: var(--size) solid transparent;
border-left: calc(var(--size) + 3px) solid var(--color);
}   
&.large {
width: 100%;
}
&.medium {
font-size: 20px;
}
&.normal {
font-size: 20px;
padding: 8px 26px 8px 15px;
img {
width: 30px;
height: 30px;
}
&:hover {
&:after {
inset: -6px;
}
}
}
&:after {
content: "";
border: 2px solid transparent;
position: absolute;
inset: 0;
border-radius: 250px;
transition: all 0.3s;       
}
&:hover {
border-color: var(--primary);
&:after {
inset: -8px;
border: 2px solid var(--primary);
}
}
&.outline {
background-color: transparent;
border: 2px solid var(--primary);
color: #fff;
&:hover {
border-color: #fff;
&:after {
inset: -8px;
border: 2px solid #fff;
}
}
}
&.dark {
border: 2px solid #eee;
color: #111;
&:hover {
border-color: var(--primary);
&:after {
border: 2px solid var(--primary);
}
}
}
&.black {
background-color: #111;
border: 2px solid #111;
color: #fff;
&:hover {
background-color: #fff;
color: #111;
&:after {
border: 2px solid #111;
}
}
}
@media only screen and (max-width: 980px) {
font-size: 22px;
}
}
.inline-icon {
svg {
transition: all 0.3s;
}
&:hover svg {
transform: rotate(20deg);
}   
}
.icon-love {
transform: rotate(12deg);
display: inline-block;
height: 95px;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
width: 95px;
}
.icon-love svg path {
animation: pulsingHeart 1s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
#banner .green-smile {
bottom: -80px;
right: -80px;
position: absolute;
top: unset;
width: 120px;
height: 120px;
}
.green-smile {
height: 100px;
right: 10px;
top: 90px;
width: 100px;
}
@keyframes pulsingHeart {
0% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
to {
transform: scale(1)
}
}
.cta-bubble {
bottom: -95px;
display: block;
height: 182px;
opacity: 1;
position: fixed;
right: -95px;
transform: scale(0);
transition: opacity .6s ease-out;
width: 200px;
z-index: 9999;
cursor: pointer;
@media(max-width: 980px) {
display: none !important;
}   
}
@media (min-width: 767px) {
.cta-bubble {
bottom:-111px;
height: 222px;
right: -155px;
width: 270px
}
}
@media (min-width: 1400px) {
.cta-bubble {
bottom:-125px;
height: 251px;
right: -162px;
width: 305px
}
}
@media (min-width: 1920px) {
.cta-bubble {
bottom:-140px;
height: 280px;
right: -170px;
width: 340px
}
}
.cta-bubble>button {
align-items: flex-start;
background-color: var(--primary);
border: none;
border-radius: 50%;
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-start;
inset: 0;
padding: 30px 42px;
position: absolute;
text-decoration: none;
width: 100%;
cursor: pointer;
}
@media (min-width: 767px) {
.cta-bubble>button {
padding:40px 45px
}
.cta-bubble>button:hover .bubble-icon {
transform: rotate(10deg)
}
}
@media (min-width: 1400px) {
.cta-bubble>button {
padding:42px 55px
}
}
@media (min-width: 1920px) {
.cta-bubble>button {
padding:44px 63px
}
}
.cta-bubble.is-visible {
animation: bubble .5s ease-in-out forwards
}
.cta-bubble.is-visible .text-line1 span,.cta-bubble.is-visible .text-line2 span {
opacity: 1;
transform: translateY(0)
}
.cta-bubble.is-hidden {
animation: reverse-bubble .5s ease-in-out forwards
}
.cta-bubble.is-hidden .text-line1 span,.cta-bubble.is-hidden .text-line2 span {
opacity: 0;
transform: translateY(100%)
}
.cta-bubble .bubble-icon {
height: 40px;
left: -5px;
position: absolute;
top: 26px;
transform: translateZ(0);
transform-origin: bottom right;
width: 40px
}
@media (min-width: 767px) {
.cta-bubble .bubble-icon {
height:45px;
left: -10px;
top: 30px;
width: 45px
}
}
@media (min-width: 1400px) {
.cta-bubble .bubble-icon {
height:55px;
left: -10px;
width: 55px
}
}
@media (min-width: 1920px) {
.cta-bubble .bubble-icon {
height:65px;
left: -10px;
top: auto;
width: 65px
}
}
.cta-bubble .bubble-text {
color: #1a1a1a;
font-family: var(--font-big);
font-size: 2.2rem;
font-weight: 400;
height: 22px;
line-height: 1;
overflow: hidden;
position: relative;
text-transform: uppercase;
font-size: 38px !important;
font-weight: 700 !important;
}
@media (min-width: 767px) {
.cta-bubble .bubble-text {
font-size:3rem;
height: 28px;
line-height: 1
}
}
@media (min-width: 1400px) {
.cta-bubble .bubble-text {
font-size:3.7rem;
height: 35px
}
}
@media (min-width: 1920px) {
.cta-bubble .bubble-text {
font-size:4.2rem;
height: 40px;
line-height: 1
}
}
.cta-bubble .bubble-text span {
display: block;
opacity: 0;
position: relative;
transform: translateY(1001%);
white-space: nowrap
}
.cta-bubble .bubble-text.text-line1 span {
transition: transform .4s ease-in .3s,opacity .4s ease-out
}
.cta-bubble .bubble-text.text-line2 span {
transition: transform .4s ease-in .5s,opacity .4s ease-out
}
@keyframes bubble {
0% {
transform: scale(0)
}
50% {
transform: scale(1.2)
}
70% {
transform: scale(.9)
}
90% {
transform: scale(1.05)
}
to {
transform: scale(1)
}
}
@keyframes reverse-bubble {
0% {
transform: scale(1)
}
50% {
transform: scale(1.2)
}
to {
transform: scale(0)
}
}
.bubble-animation {
background-color: var(--primary);
border-radius: 50%;
bottom: -10px;
height: 10px;
position: fixed;
right: -10px;
transform: translate(50%,50%);
transition: width 1s cubic-bezier(.25,.8,.5,1) .75s,height 1s cubic-bezier(.25,.8,.5,1) .75s;
width: 10px;
z-index: 9998
}
.bubble-animation.is-active {
bottom: 0;
height: 300vmax;
right: 0;
width: 300vmax;
z-index: 99999
}
.cta-bubble.is-hidden {
animation: reverse-bubble .5s ease-in-out forwards;
}
#wordpress-page {
padding-top: 300px;
padding-bottom: 120px;
h2,
h3,
b,
strong {
color: #fff;
}
}
.buttons {
display: flex;
gap: 12px;
@media only screen and (max-width: 980px) {
display: grid;
} 
}
[data-svg-position] {
position: relative;
height: fit-content;
display: inline-block;
svg {
position: absolute;
line-height: 0;        
}
&[data-svg-position="slide"] svg {
bottom: 0;
right: -100%;
}
&[data-svg-position="about"] svg {
bottom: 0;
left: 100%;
}
&[data-svg-position="services"] svg {
bottom: 45%;
left: 65%;
}
&[data-svg-position="portfolio"] svg {
bottom: 0;
left: 100%;
}
&[data-svg-position="top-right"] svg {
bottom: 100%;
right: 0;
}
}
#blog-single {
padding-top: 300px;
padding-bottom: 120px;
color: #666;
@media only screen and (max-width: 980px) {
padding-top: 120px;
padding-bottom: 64px;
} 
.header {
.title {
@media only screen and (min-width: 980px) {
font-size: 120px;
} 
}
.description {
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
}
.image img {
border-radius: 32px;
}
h2,
h3 {
color: #111;
font-size: 24px;
}
.article {
line-height: 1.7;
}
.explore-more {
display: grid;
gap: 32px;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
margin-block: 120px;
padding-block: 120px;
@media only screen and (max-width: 980px) {
margin-block: 64px;
padding-block: 64px;       
} 
.cats {
display: flex;
gap: 8px;
@media only screen and (max-width: 980px) {
display: grid;
justify-content: start;          
} 
}
.title {
font-size: 26px;
}
}
.read-next {
display: grid;
gap: 64px;
.title {
@media only screen and (min-width: 980px) {
font-size: 80px; 
} 
}
}
}@font-face {
font-family: Site Heading Now;
src: url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/HeadingNow-56Bold.woff2) format("woff2");
font-weight: 700;
}
@font-face {
font-family: Site Heading Now;
src: url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/HeadingNow-57Extrabold.woff2) format("woff2");
font-weight: 800;
}
@font-face {
font-family: Site Heading Now;
src: url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/HeadingNow-55Medium.woff2) format("woff2");
font-weight: 400;
}@font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');
unicode-range: U+0370-03FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} @font-face {
font-family: 'Site Roboto';
font-style: normal;
font-weight: 900;
src: local('Roboto Black'), local('Roboto-Black'), url(//www.agencylight.com/wp-content/themes/our-theme/assets//fonts/roboto/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}.site-header {
z-index: 99;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
box-sizing: border-box;
&:has(.wrap.open) {
bottom: 0;
}
.wrap {
padding: 32px 32px;
box-sizing: border-box;
background: transparent;       
transition: background 0.5s;
overflow: auto;
&.open {
height: 100%;
background: #111;
#header-mobile {
display: grid;
}     
.handler-mobile {
span {
margin-block: -1px;
&:nth-child(1) {
transform: rotate(45deg);
}     
&:nth-child(2) {
transform: rotate(-45deg);
transform: rotate(-220deg);
} 
}
}
.inner {
--header-background: transparent !important;
padding: 0px;
}
}   
@media only screen and (min-width: 980px) {
padding: 16px 32px;
}
@media only screen and (max-width: 980px) {
height: 100%;
}
}
.inner {
width: 100%;
border-radius: 250px;
margin-inline: auto;
box-sizing: border-box;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;       
transition: all 0.5s;
z-index: 9999;
position: relative;
background: var(--header-background);
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr 1fr; 
}
.center {
justify-self: center;
} 
.right {
justify-self: end;
}
@media only screen and (min-width: 980px) {
&.active {
width: 1000px;
--header-background: #262626;
}
padding: 12px 12px 12px 32px;
}
@media only screen and (max-width: 980px) {
&.active {
--header-background: #262626;
padding: 12px 20px; }
}
}
.branding {
display: flex;
align-items: center;
position: relative;
z-index: 9999;
img {
width: auto;
height: 44px;
@media only screen and (max-width: 980px) {
height: 34px;
}          
}
}
.facebook {
margin-left: auto;
}
.handler-mobile {
display: none;
grid-template-columns: 1fr;     
cursor: pointer;
position: relative;
z-index: 9999;
transition: all 0.3s;
span {
margin-block: 3px;
width: 22px;
height: 2px;
background: #fff;
display: block;
transition: .25s ease-in-out;
transform-origin: center;
transform: rotate(0deg);
}
&:hover span {
margin-block: -1px;
}
}
@media only screen and (max-width: 980px) {
display: grid;
grid-template-columns: 1fr;
.navigation {
display: none;
}
.handler-mobile {
display: grid;
margin-left: auto;
align-content: center;
}
&.open {
padding: 20px;
background: #000;
grid-template-columns: auto 2fr;
gap: 20px;
position: fixed;
left: 0px;
right: 0px;
bottom: 0;
top: 0;
}
}
@media only screen and (min-width: 980px) {
.navigation {
display: flex;
gap: 6px;
justify-content: center;
align-items: center;
transition: all 0.5s;
box-sizing: border-box;
line-height: 1;
a {
color: #fff;
font-size: 20px;
text-transform: uppercase;
text-box: cap alphabetic;
font-family: var(--font-big);
transition: all 0.5s;
padding: 8px 13px;
border-radius: 150px;
white-space: nowrap;
&:hover, &.active {
color: var(--primary);
text-decoration: underline;
}
}
}
}
}
.desktop-btn {
@media only screen and (max-width: 980px) {
display: none;    
}
}
#header-mobile {
display: none;
gap: 60px;
align-items: center;
align-content: center;
height: 100%;
margin-top: 32px;
nav {
display: grid;
gap: 24px;
a {
color: #fff;
font-size: 46px;
text-transform: uppercase;
text-box: cap alphabetic;
font-family: var(--font-big);
font-weight: 700;
white-space: nowrap;
transition: all 0.5s;
&:hover, &.active {
color: var(--primary);
text-decoration: underline;
}
} 
}   
.menu {
display: grid;
gap: 16px;
.label {
font-size: 20px;
font-family: var(--font-big);
text-transform: uppercase;
color: #fff;
text-box: cap alphabetic;
}
.items {
display: grid;
gap: 16px;
a {
font-size: 16px;
text-decoration: underline;
}
}
}
}.wpforms-hidden,
.wpforms-label-hide,
.wpforms-sublabel-hide {
display: none;
}
.wpforms-field-label {
color: #fff;
font-size: 20px;
margin-bottom: 10px;
display: block;
}
.wpforms-container {
fieldset {
border: none;
box-shadow: none;
outline: none;
padding: 0;
margin: 0;
}
input, select, textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
box-sizing: border-box;
background: #1A1A1A;
border: 2px solid rgba(255, 255, 255, 0.2);
outline: none;
box-shadow: none;
border-radius: 2px;
color: #fff;
font-size: 20px;
padding: 16px 16px;
transition: all 0.2s;
&:focus {
border-color: var(--primary);
}
}
textarea {
min-height: 120px;
}
.wpforms-field-container {
display: grid;
gap: 24px;
}
.wpforms-field-row  {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;        
}
.wpforms-error {
margin-top: 8px;
color: var(--primary);
display: block;
}
.wpforms-submit-container {
margin-top: 24px;
button {
position: relative;
background-color: var(--primary);
font-size: 26px;
border-radius: 250px;
padding: 12px 40px;
color: #111;
font-weight: 800;
font-family: var(--font-big);
text-transform: uppercase;
text-box: cap alphabetic;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
gap: 12px;
cursor: pointer;
transition: all 0.3s;
box-shadow: none;
outline: none;
border: none;
&:after {
content: "";
border: 2px solid transparent;
position: absolute;
inset: 0;
border-radius: 250px;
transition: all 0.3s;       
}
&:hover {
border-color: var(--primary);
&:after {
inset: -8px;
border: 2px solid var(--primary);
}
}
}
&:hover {
border-color: var(--primary);
}
}
}#awwards {
.list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;		
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
}
.item {
background: #1A1A1A;
border-radius: 20px;
padding: 30px;
display: grid;
align-items: center;
justify-content: center;
}
}
.title {
display: flex;
justify-content: center;
gap: 12px;
.pink-lightning {
align-self: start;
}
.green-smile {
align-self: end;
}
}
.btn-wrap {
margin-top: 64px;			
text-align: center;
}
}#banner {
overflow-x: clip;
.wrap {
display: grid;
jutify-content: center;
text-align: center;
gap: 24px;
}
@media only screen and (max-width: 980px) {
}	
}#benefits {
background: #111;
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 48px;
}
.item {
display: grid;
gap: 24px;			
padding: 22px 28px;
@media only screen and (max-width: 980px) {
padding: 0;
}
svg {
margin-inline: auto;
display: block;
}
.context {
display: flex;
gap: 12px;
align-items: end;
}
.heading {
font-size: 26px;
font-family: var(--font-big);
color: #fff;
text-transform: uppercase;
text-box: cap alphabetic;
}
.icon {
background: var(--accent);
border-radius: 20px;
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-items: center;
}
}
}
.btn-wrap {
text-align: center;
margin-top: 64px;
}
}#blog {
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
.heading {
display: grid;
gap: 32px;
}
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 32px;
} 
}
.categories {
display: flex;
gap: 20px;
justify-content: center;
margin-block: 64px;
@media only screen and (max-width: 980px) {
display: none;        
}
}
.featured {
background: #FFF2FD;
border-radius: 40px;
padding: 64px 64px 0px 64px;
@media only screen and (max-width: 980px) {
padding: 32px 32px 0px 32px;
border-radius: 30px;
margin-bottom: 64px;
} 
a {
display: block;
&:hover {
.image {
.link {
opacity: 1;
}
}
}
}
.image {
position: relative;
img {
max-height: 550px;
border-radius: 20px;
object-fit: cover;
}
.link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
background: var(--site-primary);
color: #fff;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.3s;
}   
}
.content {
margin-top: 32px;
border-radius: 20px 20px 0 0;
padding: 42px 50px 0;
box-sizing: border-box;
background: #fff;
display: grid;
gap: 24px;
align-items: center;           
text-align: center;
}
.title {
font-size: 40px;
}
.description {
color: #666;;
}
}
.wide {
.list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 100px 60px;
align-content: baseline;    
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 64px;
} 
a {
display: grid;
gap: 28px;
align-content: baseline;    
text-align: center;
&:hover {
.image {
.link {
opacity: 1;
}
}
}
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
}                   
}       
}
.content {
display: grid;
gap: 15px;
align-items: center;
}
.heading {
font-size: 32px;
color: #111;
font-weight: 800;
line-height: 1.1;
position: relative;
@media only screen and (max-width: 980px) {
font-size: 24px;
}               
}
.description {
position: relative;
}
.date {
text-transform: uppercase;
font-weight: 600;
font-size: 14px;
}           
.image {
position: relative;
overflow: hidden;     
border-radius: 20px;
background: #eee;
img {
display: block;
aspect-ratio: 1/1;
object-fit: cover;
}
.link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
width: 50px;
height: 50px;
margin: auto;
border-radius: 50%;
background: var(--site-primary);
color: #fff;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}           
}
.reading {
align-self: end;
}   
}
[delayed] {
a {
.image {
img {
opacity: 0;
}
}
.image,
.heading,
.description {
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(-101%);
background: linear-gradient(100deg, transparent 25%, rgba(0, 0, 0, 0.05) 50%, transparent 75%);
animation: loadingGrid 1.5s ease infinite;
}
}
.heading,
.description {
overflow: hidden;
margin-inline: auto;
background: #fff;
border-radius: 150px;
color: transparent;
position: relative;
}
.heading {
height: 30px;
width: 50%;
}
.description {
height: 20px;
}
}
}
}#call-to-action {
.btn-wrap {
text-align: center;
@media only screen and (min-width: 980px) {
margin-top: 32px;
} 
}
}#contact-bubble-popup {
position: fixed;
z-index: 99999;
inset: 0;
background: var(--primary);
visibility: hidden;
pointer-events: none;
opacity: 0;
overflow: auto;
transition: all 0.3s;
&.open {
visibility: visible;
pointer-events: all;
opacity: 1;
}
@media only screen and (max-width: 980px) {
padding-bottom: 64px;
} 
.top-header {
padding: 44px;
box-sizing: border-box;
display: flex;
align-items: center;
@media only screen and (max-width: 980px) {
padding: 24px 24px 64px 24px;
} 
img {
height: 44px;
filter: invert(100%);
}
.close {
cursor: pointer;
margin-left: auto;
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
width: fit-content;
height: fit-content;
&:after {
content: "";
border: 3px solid transparent;
position: absolute;
inset: 0;
border-radius: 50%;
transition: all 0.3s;       
}
&:hover {
&:after {
inset: -8px;
border-color: #111;
}
}
i {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #111;
position: relative;
@media only screen and (max-width: 980px) {
width: 36px;
height: 36px;
} 
&:before, &:after {
content: "";
position: absolute;
inset: 0;
width: 3px;
height: 22px;
background: #111;
margin: auto;
@media only screen and (max-width: 980px) {
height: 19px;
} 
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}   
}		
}
}
}
#contact {
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
} 
}
.subline {
margin-bottom: 28px;
}
.list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;		
margin-top: 12px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
} 
.item {
display: grid;
gap: 24px;					
label {
font-size: 26px;
font-family: var(--font-big);
font-weight: 700;
text-transform: uppercase;
text-box: cap alphabetic;
color: #fff;
}
.text {
text-decoration: underline;
}
}
}
.form {
display: grid;
align-content: baseline;
gap: 24px;
.label {
font-size: 40px;
font-family: var(--font-big);
font-weight: 700;
text-transform: uppercase;
text-box: cap alphabetic;
color: #fff;
}
}
.header {
display: grid;
align-content: baseline;
gap: 24px;
}
&[data-theme="primary"] {
.subline {
background: #fff;
color: #111;
}
.title {
color: #111;
svg circle {
fill: #fff;
}
}
.description {
color: #111;
}
.list {
.item {
label {
color: #111;
}
.text {
color: #111;
}
}
}
.form {
.label {
color: #111;
}
input, textarea, select {
background: #fff;
border-color: #111;
color: #111;
}
.wpforms-field-label {
color: #111;
}
.wpforms-submit-container button {
background: #111;
color: #fff;
}
}
}
}@property --counterNum {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}
#counters {
.list {
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
padding-block: 100px;
display: grid;
grid-template-columns: repeat(3, 1fr);
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
}
.item {
display: grid;
justify-content: center;
align-content: baseline;
text-align: center;
gap: 24px;			
padding: 22px 28px;
[data-num] {
counter-reset: num var(--counterNum);
transition: --counterNum 0.2s;
&:before {
content: counter(num);
}
&.is-intersect {
--counterNum: var(--myNum);
}
}
.title {
span {
color: #fff;
}
}
}
}
}#cta {
@media only screen and (max-width: 980px) {
overflow-x: clip;
}
.wrap {
display: grid;
gap: 100px;		
}
.header {
display: grid;
jutify-content: center;
text-align: center;
gap: 24px;
position: relative;
padding: 45px;
svg.blue-lightning {
height: 100px;
right: -55px;
top: 105px;
width: 100px;
position: absolute;
}	
svg.pink-smile {
height: 110px;
left: -65px;
top: 260px;
width: 110px;
position: absolute;
}
}
.btn-wrap {
text-align: center;
}
.centredText_inner-arrow {
animation: floatingArrow 1.5s ease-in-out infinite alternate;
position: absolute;
@media only screen and (max-width: 980px) {
svg {
width: 40px;
height: auto;
}
}
}
.centredText_inner-arrow.arrow-top-left {
left: -70px;
top: 0;
transform: translate(-10px, -10px);	    
@media only screen and (max-width: 980px) {
left: 0;
}
}
.centredText_inner-arrow.arrow-top-right {
right: -100px;
top: 0;
transform: translate(10px, -10px);  
@media only screen and (max-width: 980px) {
right: 0;
}
}
.centredText_inner-arrow.arrow-bottom-left {
left: -100px;
bottom: 0;
transform: translate(-10px, 10px);   
@media only screen and (max-width: 980px) {
left: 0;
}    	     
}
.centredText_inner-arrow.arrow-bottom-right {
right: -100px;
bottom: 0;
transform: translate(10px, 10px); 
@media only screen and (max-width: 980px) {
right: 0;
}
}
}
@keyframes floatingArrow {
to {
transform: translate(0)
}
}#faq {
.wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;			
align-content: baseline;	
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 32px;
}
}
.header {
display: grid;
gap: 32px;
margin-bottom: 0;
}
.list {
display: grid;
gap: 10px;
align-content: baseline;    
.item {
border-radius: 20px;
background: #1A1A1A;
outline: 2px solid transparent;
transition: all 0.3s;
.wrap {
display: grid;
grid-template-columns: 1fr auto;
}
.question {
padding: 32px 40px;
font-size: 26px;
font-weight: 700;
font-family: var(--font-big);
line-height: 1;
text-transform: uppercase;
text-box: cap alphabetic;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
color: #fff;
position: relative;
transition: all 0.3s;
@media only screen and (max-width: 980px) {
font-size: 20px;
}
p {
transition: all 0.3s;	 
margin: 0;               	
padding: 0;
}
span {
opacity: 0.5;
font-size: 18px;
display: block;
transition: opacity .2s, transform .65s cubic-bezier(.65,.05,0,1);
}	
svg {
.plus-path, .minus-path {
stroke: var(--primary);
transform-origin: center;
transition: transform .3s ease;
}
}
}
.answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s ease-out;					
.inner {
line-height: 1.4;
font-size: 24px;
overflow: hidden;
padding: 0px 40px 0px 40px;
transition: all 0.5s;
@media only screen and (max-width: 980px) {
font-size: 18px;
}
}					
}
&.open .answer {
grid-template-rows: 1fr;
.inner {
padding-bottom: 32px;
}
}
&.open .question span {
transform: rotate(-225deg);
opacity: 1;
}
&.open .question {
svg {
.plus-path {
transform: rotate(270deg);
}
.minus-path {
transform: rotate(180deg);
}
}
}
}
}
&[data-theme="light"] {
background: #fff;
.title {
color: #111;
}
.description {
color: #666;
}
.item {
background: #F6F6F6;
.question {
color: #111;
}
.inner {
color: #666;
}
.plus-path, .minus-path {
stroke: #111 !important;
}
&:hover {
outline: 2px solid #C1C1C1;
}
}
}
}#features {
background: #ddd;
img {
width: 100px;
}
}#footer {
@media only screen and (min-width: 980px) {
padding-bottom: 40px;
}
.wrap {
background: #1A1A1A;
border-radius: 20px;
padding: 140px 125px 65px 125px;
margin: 0px 40px 0px 40px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
@media only screen and (max-width: 980px) {
padding: 64px 44px;
margin: 0px 24px 24px 24px;
}
}
.row {
display: grid;		
grid-template-columns: 3fr 1fr 1fr;		
gap: 24px;	
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 64px;
}
.menu {
display: grid;
gap: 16px;
.label {
font-size: 30px;
font-family: var(--font-big);
text-transform: uppercase;
color: #fff;
text-box: cap alphabetic;
@media only screen and (max-width: 980px) {
font-size: 24px;
}
}
.items {
display: grid;
gap: 16px;
a {
font-size: 24px;
text-decoration: underline;
@media only screen and (max-width: 980px) {
font-size: 18px;
}
}
}
}
.col {
&:first-child {
display: grid;
gap: 64px;
@media only screen and (max-width: 980px) {
gap: 32px;
} 
}
}
}
.bottom {
margin-top: 70px;
padding-top: 50px;
border-top: 1px dashed var(--border);
display: flex;
gap: 24px;
a {
text-decoration: underline;
}
@media only screen and (max-width: 980px) {
display: grid;
margin-top: 50px;
} 
}
}#headline {
}#headline-exp {
.header {
width: fit-content;
margin-inline: auto;	
margin-bottom: 32px;	
}
.title {
display: flex;
justify-content: center;
gap: 12px;
span:has(svg) {
align-self: end;
margin-right: -20px;
margin-bottom: -20px;
svg {
width: 100px;
height: 100px;
transition: transform .3s ease-in-out;
&:hover {
transform: rotate(30deg) !important;
}      	
}
}
}
.exp {
position: relative;
width: fit-content;
height: fit-content;
transform: rotate(8deg);
position: absolute;
right: 0;
bottom: 100%;        
.inner {
overflow: hidden;
white-space: nowrap;
display: flex;
position: relative;
background: var(--accent);
height: fit-content;
width: fit-content;
border-radius: 4px;
padding: 10px 0px;
height: fit-content;
width: 145px;
}
span {
height: fit-content;
width: fit-content;    		
color: #000;
text-transform: uppercase;
font-weight: 400;
font-size: 18px;
text-box: cap alphabetic;
line-height: 1;
font-family: var(--font-big);
display: inline-flex;
align-items: center;
animation: calc(5s * 3) scroll infinite linear;
}
.slide:not(:last-child) span:after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #000;
margin-inline: 10px;
}
&:after {
bottom: -10px;
content: "";
height: 0px;
position: absolute;
right: 10px;
width: 0px;
z-index: -1;
border-bottom: 15px solid transparent;
border-left: 12px solid var(--accent);
border-top: 15px solid transparent;        		
}
}	
}#image-carousel {
--count: 0;
content-visibility: auto;
.carousel {
overflow: hidden;
white-space: nowrap;
position: relative;
}
.carousel-slide {
display: inline-flex;
gap: 24px;
animation: calc(10s * var(--count)) scroll infinite linear;
}
.carousel-slide:first-child {
margin-right: 24px;
}
.carousel-track { 
flex-shrink: 0;
border-radius: 24px;
aspect-ratio: 1 / 0.7;
overflow: hidden;
height: 400px;
border: 3px solid #222222;
background-size: cover;
background-position: center;
@media only screen and (max-width: 980px) {
height: 270px;
}
}
.circle-btn-container {
margin: auto;
text-align: center;
margin-top: 24px;
}
&[data-direction="right"] {
.carousel-slide {
animation-direction: reverse;
}		
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes scroll-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}#image-text {
content-visibility: auto;
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 150px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 36px;
} 
img {
border-radius: 24px;
object-fit: cover;
aspect-ratio: 1/0.8;
}
.content {
display: grid;
align-content: center;
grid-template-columns: 1fr;
gap: 36px;			
}
}
}#inline-reviews {
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 64px;
}
.item {
display: grid;
align-content: baseline;
justify-content: center;
justify-items: center;
text-align: center;
gap: 20px;
@media only screen and (max-width: 980px) {
gap: 12px;
}
.rating {
display: flex;
gap: 6px;
}
.text {
color: #fff;
font-weight: 600;
font-size: 20px;
}
}
}
}#logo-carousel {
--count: 25;
.carousel {
overflow: hidden;
white-space: nowrap;
position: relative;
}
.carousel-slide {
display: inline-flex;
gap: 24px;
animation: calc(10s * var(--count)) scroll infinite linear;
}
.carousel-slide:first-child {
margin-right: 24px;
}
.carousel-track { 
flex-shrink: 0;
aspect-ratio: 2 / 1;
overflow: hidden;
height: 70px;
background-size: cover;
background-position: center;
opacity: 0.3;
@media only screen and (max-width: 980px) {
height: 40px;
} 
}
.circle-btn-container {
margin: auto;
text-align: center;
margin-top: 24px;
}
&[data-direction="right"] {
.carousel-slide {
display: inline-flex;
gap: 24px;
animation-direction: reverse;
}		
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes scroll-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}#reviews {
.wrap {
display: grid;
gap: 100px;		
position: relative;
}
.header {
display: grid;
jutify-content: center;
text-align: center;
gap: 24px;
}
.btn-wrap {
padding-top: 200px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, #111, transparent);
}
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
}	
.item {
display: grid;
align-content: space-between;
gap: 20px;			
border-radius: 20px;
padding: 40px 32px;
background: #1A1A1A;
.author {
display: flex;
align-items: center;
gap: 15px;
align-self: end;
.name {
color: #fff;
}
img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
}
.rating {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
}
}
&:not([data-show-excerpt="no"]) {
.list .item {
@media only screen and (min-width: 980px) {
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
height: 125px;
overflow: hidden;
}
}
@media only screen and (max-width: 980px) {
&:nth-child(2) {w
height: 125px;
overflow: hidden;
}
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
display: none;
}
}
}
}
}#service-banner {
background: #FFF1FC;
padding-block: 180px 64px;
@media only screen and (max-width: 980px) {
padding-block: 120px 64px;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 12px;
}
}
.image {
img {
border-radius: 40px;
height: 100%;
object-fit: cover;
}
}
}#services {
background: #111;
.list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 64px;
} 
.item {
display: grid;
align-content: baseline;
gap: 40px;			
border-radius: 32px;
padding: 0px 60px 60px 60px;
background: #1A1A1A;
@media only screen and (max-width: 980px) {
padding: 0px 34px 60px 34px;
} 
svg {
margin-inline: auto;
display: block;
}
.heading {
padding: 15px;
font-weight: 800;
font-family: var(--font-big);
text-transform: uppercase;
text-box: cap alphabetic;
margin-top: -35px;
width: fit-content;
height: fit-content;
color: #000;
font-size: 80px;
border-radius: 10px;
transform: rotate(-4deg);	
@media only screen and (max-width: 980px) {
font-size: 52px;
} 
}
&:nth-child(1) .heading, &:nth-child(4) .heading {
background: #FFB3DB;
}
&:nth-child(2) .heading, &:nth-child(5) .heading {
background: #CAF291;
}
&:nth-child(3) .heading, &:nth-child(6) .heading {
background: #70e6ed;
}	
.points {
.point {
padding-block: 26px;
font-size: 26px;
font-family: var(--font-big);
color: #fff;
text-transform: uppercase;
text-box: cap alphabetic;
border-top: 1px dashed var(--border);
text-decoration: underline;
@media only screen and (max-width: 980px) {
font-size: 24px;
}
&:last-child {
padding-bottom: 0px;
}
}
}
}
}
}@keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-5px);
}
100% {
transform: translatey(0px);
}
}
@keyframes floatMobile {
0% {
transform: translatey(0px) scale(0.5);
}
50% {
transform: translatey(-5px) scale(0.5);
}
100% {
transform: translatey(0px) scale(0.5);
}
}
#slide {
position: relative;
z-index: 2;
overflow-x: clip;
.wrap {
display: grid;
gap: 100px;     
position: relative;
}
.header {
display: grid;
jutify-content: center;
text-align: center;
gap: 24px;
position: relative;
z-index: 5;
}
.media-container {
.media {
overflow: hidden;
position: absolute;
@media only screen and (min-width: 980px) {
transform: scale(1);
animation: float 4s ease-in-out infinite;
}
@media only screen and (max-width: 980px) {
transform: scale(0.5);
animation: floatMobile 4s ease-in-out infinite;
}
img {
height: 100%;
object-fit: cover;
width: 100%;
}
&[data-index="1"] {
border-radius: 10px;
height: 140px;
left: -20%;
top: -175px;
width: 200px;  
@media only screen and (max-width: 980px) {
left: 0%;
}
}
&[data-index="2"] {
border-radius: 18px;
height: 240px;
right: -20%;
top: -200px;
width: 200px;     
@media only screen and (max-width: 980px) {
right: 0%;
}
}
&[data-index="3"] {
border-radius: 12px;
height: 220px;
left: -35%;
top: 15%;
width: 300px;     
@media only screen and (max-width: 980px) {
left: -30%;
}           
}
&[data-index="4"] {
border-radius: 15px;
height: 295px;
right: -52%;
top: 28%;
width: 395px; 
@media only screen and (max-width: 980px) {
right: -45%;
}               
}            
&[data-index="5"] {
border-radius: 18px;
height: 220px;
left: -15%;
top: 88%;
width: 220px;       
@media only screen and (max-width: 980px) {
left: 0%;
}             
}
&[data-index="6"] {
border-radius: 18px;
height: 200px;
right: -35%;
top: 95%;
width: 170px;   
@media only screen and (max-width: 980px) {
right: 0%;
}                  
}
}      
}
.btn-wrap {
text-align: center;
}
}#spacing { background-color: #111;
&[data-theme="light"] {
background-color: #fff;
}
&[data-desktop="xsmall"] {
height: 32px;
}
&[data-desktop="small"] {
height: 64px;
}
&[data-desktop="normal"] {
height: 96px;
}
&[data-desktop="medium"] {
height: 160px;
}
&[data-desktop="large"] {
height: 200px;
}
&[data-desktop="xlarge"] {
height: 260px;
}
@media only screen and (max-width: 980px) { &[data-mobile="xxsmall"] {
height: 16px;
}
&[data-mobile="xsmall"] {
height: 32px;
}
&[data-mobile="small"] {
height: 64px;
}
&[data-mobile="normal"] {
height: 96px;
}
&[data-mobile="medium"] {
height: 160px;
}
&[data-mobile="large"] {
height: 200px;
}
&[data-mobile="xlarge"], &[data-mobile="default"] {
height: 260px;
}
&[data-mobile="xxlarge"] {
height: 320px;
}
}
}#studies {
.filters {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 120px;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;     
gap: 100px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 32px;
} 
}
.list {
display: grid;
grid-template-columns: 1fr;
gap: 120px 100px;
align-content: baseline;    
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 64px;
} 
.item {
display: grid;
gap: 20px;
align-content: baseline;    
img {
display: block;
border-radius: 24px;
aspect-ratio: 1;
object-fit: cover;
margin-bottom: 12px;
width: 100%;
}
.title {
font-size: 56px;
line-height: 1.1;
font-weight: normal;
}
.description {
}
&:hover .heading {
text-decoration: underline;
}
}
.call {
background: #1A1A1A;
border-radius: 24px;
display: grid;
align-items: center;
padding: 200px 64px 160px 64px;
height: fit-content;
.inner {
display: grid;
gap: 32px;
}
@media only screen and (min-width: 980px) {
.buttons {
margin-top: 32px;
}
} 
@media only screen and (max-width: 980px) {
padding: 80px 64px 64px 64px;
} 
}
@media only screen and (min-width: 980px) {
&:last-child .item:first-child {
margin-top: 380px;
}
} 
}
}#testimonial {
background: #fff;
.wrap {
background: #1A1A1A;
padding: 128px;
border-radius: 40px;
@media only screen and (max-width: 980px) {
padding: 44px;
}		
}
.header {
margin-bottom: 0;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 128px;
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 44px;
}
}
.author {
display: flex;
align-items: center;
gap: 15px;
align-self: end;
.name {
color: #fff;
}
img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
}
svg {
width: 40px;
height: 40px;
color: #fff;
* {
fill: #fff;
}
}
.image {
img {
border-radius: 40px;
object-fit: cover;		
height: 100%;
}
}
}#text-carousel {
display: grid;
gap: 32px;
.heading {
margin-bottom: 32px;
}
.carousel-container {
content-visibility: auto;
background-position: center;
display: flex;
background-size: cover;
gap: 50px;
overflow: hidden;
white-space: nowrap;
position: relative;
transition: all 0.3s;
.slide {
display: inline-flex;
align-items: center;
gap: 50px;
animation: calc(10s * var(--count)) scroll infinite linear;
position: relative;
z-index: 2;
}
.slide:first-child {
margin-right: 30px;
}
&[data-direction="right"] {
.slide {
animation-direction: reverse;
}       
}
}
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}#values {
background: #111;
.list {
display: grid;
grid-template-columns: repeat(4, 1fr);
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
} 
.item {
display: grid;
justify-content: center;
align-content: baseline;
text-align: center;
gap: 24px;			
padding: 22px 28px;
@media only screen and (max-width: 980px) {
padding: 44px 0px;
} 
svg {
margin-inline: auto;
display: block;
}
.heading {
font-size: 26px;
font-family: var(--font-big);
color: #fff;
text-transform: uppercase;
text-box: cap alphabetic;
}
&:first-child {
padding-top: 0px;
}
&:not(:last-child) {
@media only screen and (min-width: 980px) {
border-right: 1px dashed var(--border);
} 
@media only screen and (max-width: 980px) {
border-bottom: 1px dashed var(--border);
} 
}
}
}
.btn-wrap {
text-align: center;
margin-top: 64px;
@media only screen and (max-width: 980px) {
margin-top: 16px;
} 
}
}#work {
background: #111;
.filters {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 64px;
@media only screen and (max-width: 980px) {
display: grid;
gap: 12px;
justify-content: start; 
margin-bottom: 32px;           
} 
}
.list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 100px 60px;
align-content: baseline;    
@media only screen and (max-width: 980px) {
grid-template-columns: 1fr;
gap: 64px;
} 
.item {
display: grid;
gap: 20px;
align-content: baseline;    
text-align: center;
.image {
position: relative;
border-radius: 24px;               
overflow: hidden;                
background: #1a1a1a;
img {
position: relative;
display: block;
border-radius: 24px;
aspect-ratio: 1;
object-fit: cover;
width: 100%;
overflow: hidden;
}
margin-bottom: 12px;               
}
.heading {
font-size: 40px;
line-height: 1.2;
font-family: var(--font-big);
text-transform: uppercase;
color: #fff;
text-box: cap alphabetic;
@media only screen and (max-width: 980px) {
font-size: 34px;
} 
}
.description {
font-size: 22px;
}
&:hover .heading {
text-decoration: underline;
}
}
}
[delayed] {
.item {
.image {
img {
opacity: 0;
}
}
.image,
.heading,
.description {
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(-101%);
background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
animation: loadingGrid 1.5s ease infinite;
}
}
.heading,
.description {
overflow: hidden;
margin-inline: auto;
background: #1a1a1a;
border-radius: 150px;
color: transparent;
position: relative;
}
.heading {
height: 30px;
width: 50%;
}
.description {
height: 20px;
}
}
}
.btn-wrap {
text-align: center;
margin-top: 32px;
}
}
@keyframes loadingGrid {
0% {
transform: translateX(-101%);
}
80% {
transform: translateX(101%);
}
to {
transform: translateX(101%);
}
}