#hero {
min-height: 1056px;
height: 100%;
background-position: top right;
z-index: 998;
position: relative;
margin-top: 0px;
}
#hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/hero/hero__circles.svg) bottom right / 100% no-repeat;
transition: opacity 0.5s ease-in-out;
z-index: -1;
}
.hero__central-wrapper {
position: absolute;
left: 0;
right: 0;
top: -170px;
bottom: 0;
margin: auto;
width: fit-content;
height: fit-content;
max-width: 60vw;
width: 100%;
}
h1.hero__title {
font-size: var(--text-6xl);
text-transform: uppercase;
color: var(--color-scarlet-gen-500);
line-height: 1.4;
}
h1.hero__title span {
color: var(--color-blue-gen-700);
}
.hero__background-logo {
position: absolute;
left: 0;
right: 0;
top: 200px;
bottom: 0;
margin: auto;
width: fit-content;
transition: color .4s ease;
z-index: -1;
pointer-events: none;
max-width: 410px;
}
h2.hero__subtitle {
font-size: var(--text-2xl);
line-height: 1.33;
font-weight: 300;
color: var(--color-blue-gen-800);
letter-spacing: 0.005em;
margin-top: 24px;
transition: color .4s ease;
}
.hero__buttons {
margin-top: 56px;
display: flex;
gap: 25px;
}
img.hero__eye {
position: fixed;
left: 5vw;
top: 130px;
z-index: -1;
pointer-events: none;
transform: rotate(0deg);
transform-origin: top center;
transition: transform 0.1s ease-out, opacity .4s ease, top .4s ease;
will-change: transform, opacity;
opacity: 0;
}
img.hero__eye.scrolled {
top: 10vh;
}
.hero__logo-path {
transition: fill 1s ease;
}
[data-theme="dark"] .hero__background-logo .hero__logo-path {
fill: #b4b4fc;
}
[data-theme="dark"] h1.hero__title span {
color: var(--color-blue-gen-300);
}
[data-theme="dark"] h2.hero__subtitle {
color: var(--color-blue-gen-200);
}
.hero__mockups {
position: absolute;
right: 23vw;
top: 560px;
}
.mockups__container {
position: relative;
}
.hero__mockup--front {
transform: rotate(-8deg);
position: relative;
}
.mockup__number {
display: flex;
color: #fff;
gap: 2px;
width: fit-content;
padding: 7px 18px;
border-radius: 24px;
position: absolute;
top: -36px;
left: 0;
right: 0;
margin: auto;
width: 110px;
font-size: 14px;
}
.hero__mockup--front .mockup__number {
background: var(--color-scarlet-gen-500);
}
.hero__mockup--back {
z-index: -1;
left: 150px;
top: 10px;
position: absolute;
transform: rotate(8deg);
}
.hero__mockup--back .mockup__number {
background: var(--color-blue-gen-500);
top: -40px;
}
p.achievement__text {
font-size: var(--text-xs);
line-height: 1.2;
color: #636176;
font-weight: 300;
max-width: 256px;
}
[data-theme="dark"] p.achievement__text {
color: #fff;
}
.achievement__item {
display: flex;
gap: 16px;
}
.hero__achievements {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 175px;
position: absolute;
} .hero__mockup--back img {
max-height: 395px;
width: fit-content;
}
.mockup {
position: relative;
width: 192px;
height: 395px;
overflow: hidden;
border-radius: 37px;
z-index: 1;
}
.mockup__phone {
position: absolute;
inset: 0;
width: 192px;
height: 397px;
object-fit: contain;
z-index: 20;
pointer-events: none;
overflow: hidden;
z-index: 99;
}
.mockup__bg {
position: absolute;
inset: 0;
width: 100%;
height: 385px;
object-fit: contain;
z-index: 0;
border-radius: 24px;
top: 5px !important;
z-index: 88;
margin: auto;
padding: 0;
margin: 0;
}
.mockup__spinner {
position: absolute;
bottom: -35%;
right: -90%;
width: 200px;
height: 200px;
pointer-events: none;
overflow: visible;
transform-style: preserve-3d;
z-index: 89;
}
.mockup__wheel {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
transition: transform 0.8s ease-in-out;
overflow: visible;
}
.mockup__slide-container {
position: absolute;
width: 115px;
height: 120px;
top: 50%;
left: 50%;
transform-origin: center center;
transform-style: preserve-3d;
pointer-events: auto;
}
.mockup__slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
object-fit: contain;
transition: transform 0.8s ease-in-out;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hero__mockup--front {
width: fit-content;
}
.mockup__slide img {
width: 75%;
height: fit-content;
object-fit: contain;
}
.mockup__slide.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
}
.mockup-wrapper {
height: calc(100% - 12px);
width: calc(100% - 15px);
margin: 0 auto;
position: relative;
overflow: hidden;
}
.achievement__item {
filter: grayscale(1);
transition: filter .4s ease;
}
.achievement__item:hover {
filter: grayscale(0);
}
@media (max-width: 1600px) {
.hero__mockups {
right: 18vw;
}
}
@media (max-width: 1441px) {
.hero__central-wrapper {
max-width: 954px !important;
left: 100px;
top: -31vh;
}
.hero__mockups {
position: absolute;
right: 18vw;
top: 45%;
}
img.hero__eye {
max-width: 176px;
height: 315px;
left: 6vw;
}
.hero__background-logo {
top: 166px;
}
}
@media (max-width: 1350px) {
.hero__mockups {
right: 25vw;
}
img.hero__eye {
height: 200px;
}
.hero__central-wrapper {
max-width: 954px !important;
left: 175px;
top: -31vh;
}
.hero__buttons {
flex-direction: column;
}
p.achievement__text {
max-width: 40%;
}
}
@media (max-width: 1100px) {
.hero__mockups {
right: 205px;
}
}
@media (max-width: 1025px) {
.hero__buttons {
flex-direction: column;
}
.hero__mockup--front {
transform: rotate(-8deg);
}
.hero__mockup--back {
transform: rotate(8deg);
}
p.achievement__text {
max-width: 298px;
}
.hero__mockups {
right: 23vw;
top: 400px;
transform: scale(0.7);
}
.hero__central-wrapper {
max-width: 74vw;
left: 161px;
top: -31vh;
}
body:has(#wpadminbar) img.hero__eye {
height: 233px;
left: 44px;
max-width: 90px;
top: 99px;
}
img.hero__eye {
height: 233px;
left: 44px;
max-width: 90px;
top: 85px;
}
img.hero__eye.scrolled {
top: 50px;
}
img.achievement__img {
max-width: 100px;
}
}
@media (max-width: 999px) {
body:has(#wpadminbar) img.hero__eye {
top: 83px;
}
body:has(#wpadminbar) img.hero__eye.scrolled {
top: 77px;
}
p.achievement__text {
max-width: 30%;
}
}
@media (max-width: 940px) {
h1.hero__title {
font-size: clamp(32px, 4.4vw, 48px);
word-wrap: break-word;
display: flex;
flex-direction: column;
}
.hero__mockups {
transform: scale(0.6);
right: 16vw;
top: 400px;
}
}
@media (max-width: 768px) {
.hero__central-wrapper {
margin: auto;
top: 0;
position: initial;
}
section#hero {
min-height: 100px;
height: fit-content;
margin-top: 80px; }
.hero__mockups {
display: none;
}
img.hero__eye {
max-width: 58px;
}
.hero__central-wrapper {
max-width: calc(100vw - 32px);
margin: auto;
margin-top: 235px;
}
body:has(#wpadminbar) .hero__central-wrapper {
max-width: calc(100vw - 32px);
margin: auto;
margin-top: 200px;
}
.hero__buttons {
flex-direction: column;
}
.hero__achievements {
margin-top: 40px;
position: initial;
}
img.hero__eye {
position: absolute;
left: 5vw;
top: -95px;
height: 72px;
width: 58px;
object-fit: cover;
object-position: bottom;
}
img.hero__eye.scrolled {
top: -90px;
opacity: 0 !important;
}
body:has(#wpadminbar) img.hero__eye {
position: absolute;
left: 16px;
top: -105px;
height: 72px;
width: 58px;
object-fit: cover;
object-position: bottom;
}
body:has(#wpadminbar) img.hero__eye.scrolled {
top: -90px;
opacity: 0 !important;
}
picture.hero__background-logo svg {
max-width: 100%;
}
.hero__background-logo {
top: -140px;
max-width: 70%;
}
h1.hero__title {
line-height: 1.2;
}
#hero-bg {
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/hero/hero-bg-mob.svg) bottom center / 100% no-repeat;
height: 100vh;
background-position: top;
}
}
@media (max-width: 500px) {
p.achievement__text {
max-width: calc(100% - 100px);
}
}
@media (min-width: 1922px) {
div#hero-bg {
background-size: cover;
background-position: bottom;
}
h1.hero__title {
max-width: 70%;
}
.hero__central-wrapper {
left: 170px;
}
img.hero__eye {
left: calc((100vw - 1800px) / 2);
}
.hero__mockups {
position: absolute;
left: 1400px;
top: 560px;
}
}.services__wrapper {
display: grid;
gap: 24px;
grid-template-columns: repeat(6, 1fr); } .services__item {
min-height: 256px;
background: var(--color-blue-gen-200);
border-radius: 24px;
padding: 16px 32px 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
} .services__item>*:not(.services__img-container) {
transform: translateY(0);
transition: transform 0.6s ease;
}
.services__item:hover>*:not(.services__img-container) {
transform: translateY(-40px);
} .services__item:nth-child(1) {
grid-column: 1 / span 2;
}
.services__item:nth-child(2) {
grid-column: 3 / span 2;
}
.services__item:nth-child(3) {
grid-column: 5 / span 2;
} .services__item:nth-child(4) {
grid-column: 1 / span 4;
} .services__item:nth-child(5) {
grid-column: 5 / span 2;
}  .services__item:nth-child(6) {
grid-column: 1 / span 3;
} .services__item:nth-child(7) {
grid-column: 4 / span 3;
}  .services__item:nth-child(8) {
grid-column: 1 / span 3;
} .services__item:nth-child(9) {
grid-column: 4 / span 3;
}  .services__icon {
max-width: 40px;
margin-left: auto;
transition: transform .4s ease;
}
.services__item:hover {
cursor: pointer;
}
.services__item:hover .services__icon {
transform: rotate(180deg);
} .services__title {
font-family: 'Gotham Pro';
font-weight: 400;
font-size: var(--text-4xl);
line-height: 40px;
letter-spacing: 0.005em;
margin-bottom: 8px;
padding-right: 23px;
color: #fff;
text-transform: uppercase;
} .services__description {
font-family: 'Gotham Pro';
font-weight: 300;
font-size: var(--text-base);
line-height: 24px;
letter-spacing: 0.005em;
color: #fff;
} .services__img-container {
width: 100%;
display: flex;
justify-content: flex-end;
} .services__item {
background-size: inherit;
background-position: center;
background-repeat: no-repeat;
animation: moveBg 140s linear infinite;
}
@keyframes moveBg {
0% {
background-position: 100% 0;
}
25% {
background-position: 0 100%;
}
50% {
background-position: 100% 0;
}
75% {
background-position: 0 100%;
}
100% {
background-position: 100% 0;
}
}
@media (max-width: 1441px) {
section#services {
margin-top: -70px;
}
} @media (max-width: 1025px) {
.services__wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px; } .services__item:nth-child(1) {
grid-column: 1 / span 2;
}
.services__item:nth-child(2) {
grid-column: 3 / span 2;
}
.services__item:nth-child(3) {
grid-column: 5 / span 2;
} .services__item:nth-child(n+4) {
grid-column: span 3;
}
.services__item {
padding: 24px 24px 24px;
}
h4.services__title {
font-size: clamp(24px, 30px, var(--text-4xl));
}
} @media (max-width: 768px) {
section#services {
margin-top: 60px;
}
.services__wrapper {
grid-template-columns: 1fr; }
.services__item {
grid-column: 1 / -1; }
.services__item {
grid-column: 1 / span 2 !important;
height: fit-content;
min-height: 0px;
}
.services__title {
font-size: 24px;
line-height: 32px;
}
p.case__description {
font-size: 14px;
line-height: 20px;
}
}#cases {
margin: 96px 0;
}
.cases__cards {
display: flex;
gap: 24px;
margin-bottom: 32px;
}
.case__card {
position: relative;
width: 33%; cursor: pointer;
overflow: hidden; border-radius: 16px;
border: 1px solid var(--color-blue-gen-500); padding-bottom: 0;
aspect-ratio: 411 / 577; aspect-ratio: 5 / 7;
}
img.cases__logo {
max-width: 40px;
} .card--front,
.card--back {
position: absolute;
width: 100%;
height: 100%;
left: 0;
border-radius: 16px;
transition: transform 0.6s ease, opacity 0.6s ease;
display: flex;
flex-direction: column;
gap: 24px;
padding-left: 40px;
padding-right: 40px;
padding-top: 40px;
} .card--front {
top: 0;
z-index: 2;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
p.case__description {
height: 90px;
}
img.case__illustration {
object-fit: contain;
width: 100%;
height: 100%;
margin: auto;
margin-bottom: 0;
object-position: bottom;
width: fit-content;
max-width: 100%;
max-height: 100%;
aspect-ratio: 99 / 101;
}
h4.case__title {
font-weight: 400;
font-size: var(--text-3xl);
line-height: 1.2;
text-transform: uppercase;
}
p.case__details,
p.case__description {
font-size: var(--text-lg);
line-height: 1.56;
}
p.case__details span,
p.case__description span {
color: var(--color-scarlet-gen-500);
} .card--back {
top: 100%; z-index: 1;
background: var(--color-blue-gen-500);
opacity: 0;
padding: 40px;
color: #fff;
}
.card--back ul li {
list-style: disc;
margin-left: 40px;
margin-bottom: 16px;
} .case__card:hover .card--front {
transform: translateY(-100%);
opacity: 0;
}
.case__card:hover .card--back {
transform: translateY(-100%); opacity: 1;
}
#cases button {
float: right;
margin-top: 32px;
}
[data-theme="dark"] .card--front {
background: var(--color-blue-gen-900);
}
[data-theme="dark"] .card--front h4.case__title {
color: var(--color-blue-gen-200);
}
[data-theme="dark"] .card--front p.case__details,
[data-theme="dark"] .card--front p.case__description {
color: var(--color-blue-gen-200);
}
.card--back p,
.card--back .result,
.card--back li {
font-size: var(--text-lg);
line-height: 1.44;
}
.card--back ul {
margin-top: 16px;
}
#cases a.btn.btn--blue.btn--icon.btn--wide {
float: right;
width: calc(33% - 12px);
}
@media (max-width: 1500px) {
.case__card {
height: 555px;
}
}
@media (max-width: 1100px) {
.case__card {
height: 444px;
}
h4.case__title {
word-wrap: break-word;
}
}
@media (max-width: 1025px) {
.card--front,
.card--back {
padding: 16px;
gap: 16px;
}
.card--front {
padding-bottom: 0;
}
.card--back ul {
margin-top: 8px;
}
.card--back ul li {
list-style: disc;
margin-left: 40px;
margin-bottom: 0px;
}
article.case__card {
height: 590px;
}
}
@media (max-width: 768px) {
.cases__cards {
flex-direction: column;
}
.case__card {
width: 100%;
}
#cases {
margin: 56px 0;
}
}
@media (min-width: 1921px) {
.case__card {
aspect-ratio: unset;
min-height: 510px;
height: 100%;
}
}#clients,
#traffic {
padding: 60px 0;
}
#traffic {
padding-bottom: 0;
}
.clients-row,
.traffic-row {
margin-bottom: 40px;
}
.traffic-row:last-child {
padding-bottom: 0;
}
.clients-row.swiper svg {
max-width: 100%;
}
@media (max-width: 1025px) {
.clients-row.swiper svg {
max-width: 100%;
}
#clients h3.section-heading,
#traffic h3.section-heading {
margin-bottom: 48px;
}
} @media (min-width: 768px) {
.clients-row,
.traffic-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
justify-items: center;
gap: 40px;
}
.clients-row.swiper,
.traffic-row.swiper {
overflow: visible; }
.clients-row .swiper-wrapper,
.traffic-row .swiper-wrapper {
display: contents; }
.clients-row .swiper-slide,
.traffic-row .swiper-slide {
width: auto; }
}
@media (max-width: 768px) {
.clients-row img,
.traffic-row img {
max-width: 120px;
margin: 0 auto;
}
.clients-row,
.traffic-row {
width: 100%;
}
.clients-row .swiper-wrapper,
.traffic-row .swiper-wrapper {
text-align: center; }
.clients-row .swiper-slide,
.traffic-row .swiper-slide {
width: auto; }
.clients-row.swiper svg,
.traffic-row.swiper svg {
margin: auto;
}
}#testimonials {
background: var(--color-blue-gen-800);
padding: 80px 0;
color: #fff;
}
#testimonials .section-heading {
color: #fff;
}
.section-heading .outline {
color: transparent;
-webkit-text-stroke: 1px #fff;
}
#testimonial .section-heading {
position: relative;
width: fit-content;
}
h3.testimonials__title.section-heading {
position: relative;
width: fit-content;
}
h3.testimonials__title.section-heading::after {
content: "";
width: 108px;
height: 87px;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/testimonial-icon.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
top: 0;
right: -140px;
margin: auto;
} .testimonials__slider {
position: relative;
}
.testimonials__wrapper {
display: flex;
margin-top: 10px;
}
.testimonials__slide {
display: flex;
justify-content: center;
align-items: stretch; height: auto;
}
.testimonials__item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgb(255, 255, 255);
border-radius: 24px;
padding: 32px; height: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 470px;
} .testimonials__quote {
font-size: 30px;
line-height: 1.2;
color: #8e7dff;
position: absolute;
top: 30px;
left: 32px;
}
.swiper-slide-prev .testimonials__quote {
color: #fff;
} .testimonials__text {
margin: 48px 0 20px;
font-size: 16px;
line-height: 1.5;
color: #ddd;
} .testimonials__author {
font-size: var(--text-base);
font-weight: 400;
color: #aaa;
}
.testimonials__name {
display: block;
font-weight: 700;
color: var(--color-scarlet-gen-300);
margin-bottom: 4px;
text-transform: uppercase;
line-height: 1.44;
}
.testimonials__position {
display: block;
font-size: var(--text-base);
color: #bbb;
} .testimonials__button {
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
background: transparent;
}
.testimonials__button::after {
font-size: 0px;
color: #fff;
}
.testimonials__button--prev {
left: -60px;
}
.testimonials__button--next {
right: -60px;
} .testimonials__pagination {
margin-top: 20px;
text-align: center;
}
.swiper-pagination-bullet {
background: #fff;
opacity: 0.5;
}
.swiper-pagination-bullet-active {
background: #ff6575;
opacity: 1;
}
.testimonials__button.testimonials__button--prev.swiper-button-prev,
.testimonials__button.testimonials__button--next.swiper-button-next {
position: absolute;
left: 0;
border: none;
object-fit: contain;
width: 24px;
height: 24px;
bottom: 0;
top: 100%;
left: 50px;
border-radius: 0;
}
.testimonials__button.testimonials__button--prev.swiper-button-prev {
transform: rotate(180deg);
left: 0;
}
.testimonials__navigation.container {
width: clamp(1280px, 90%, 1920px);
margin: auto;
position: relative;
padding-top: 60px;
}
.testimonials__slide {
width: 80%; max-width: 700px;
}
.testimonials__item {
transition: background 1s ease, border .5s ease;
}
.testimonials__slide.swiper-slide.swiper-slide-prev .testimonials__item {
background: var(--color-blue-gen-500);
border: 1px solid var(--color-blue-gen-500);
}
@media (min-width: 1200px) {
.testimonials__slide {
width: 28%;
}
}  @media (max-width: 1025px) {
#testimonials {
padding: 60px 0;
}
h3.testimonials__title.section-heading {
margin-bottom: 40px;
}
.testimonials__slide {
width: 297px;
min-height: 441px;
}
blockquote.testimonials__item {
padding: 16px;
}
span.testimonials__quote {
left: 16px;
top: 16px;
}
.testimonials__text {
line-height: 1.25;
}
}
@media (max-width: 960px) {
.testimonials__slide {
width: 40%;
}
.testimonials__slide.swiper-slide.swiper-slide-prev .testimonials__item {
background: var(--color-blue-gen-800);
border: 1px solid #fff;
}
.testimonials__slide.swiper-slide.swiper-slide-active .testimonials__item {
background: var(--color-blue-gen-500);
border: 1px solid var(--color-blue-gen-500);
}
}
@media (max-width: 768px) { #testimonials .section-heading {
font-weight: bold;
}
section#testimonials {
padding-top: 24px;
padding-bottom: 35px;
}
.testimonials__slider {
padding: 0 16px
}
.testimonials__item {
padding: 16px;
min-height: 365px;
}
.testimonials__quote {
font-size: 32px;
line-height: 1.2;
color: #fff;
position: absolute;
top: 30px;
left: 16px;
fill: #fff !important;
}
}.why-appska {
padding: 60px 0;
padding-top: 180px;
font-family: sans-serif; padding-bottom: 0;
}
[data-theme="dark"] .why-appska .block {
background: var(--color-blue-gen-900);
}
[data-theme="dark"] .why-appska .block:hover {
background: #280095;
}
[data-theme="dark"] .why-appska .block p {
color: #fff;
}
[data-theme="dark"] .why-appska #block-1 {
background-color: var(--color-blue-gen-900);
} #why-appska .container {
width: 90%;
max-width: 1440px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 23px;
grid-row-gap: 23px;
}
.block {
border: 1px solid var(--color-blue-gen-300);
border-radius: 12px;
padding: 20px 40px;
background: #fff;
transition: background 1s;
display: flex;
align-items: center;
}
.block p {
color: var(--color-blue-gen-800);
}
.block .accent {
color: var(--color-scarlet-gen-500);
}
#block-1 {
grid-area: 1 / 1 / 5 / 2;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/why/why-about-bg-1.svg);
background-size: cover;
background-repeat: repeat-x;
position: relative;
animation: moveBg 55s linear infinite;
}
@keyframes moveBg {
from {
background-position: 100% 0;
}
to {
background-position: 0 100%;
}
}
#block-1::before {
content: "";
width: 225px;
height: 192px;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/why/why-about-infinity.svg);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: -70px;
top: -120px;
}
div#block-1 p {
font-size: var(--text-6xl);
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
width: fit-content;
margin: auto;
}
div#block-1 p span {
border: 3px solid #FF6575;
border-radius: 50px;
padding: 0 15px;
}
#block-2 {
grid-area: 1 / 2 / 9 / 3;
background: var(--color-scarlet-gen-500);
display: flex;
flex-direction: column;
}
[data-theme="dark"] #block-2 {
border-color: transparent;
}
div#block-2 img {
max-height: 444px;
}
#block-3 {
grid-area: 1 / 3 / 5 / 4;
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center;
align-items: flex-start;
}
#block-3 img {
width: auto;
max-width: 100%;
}
#block-4 {
grid-area: 5 / 1 / 10 / 2;
}
#block-5 {
grid-area: 5 / 3 / 10 / 4;
grid-area: 5 / 3 / 9 / 4;
}
#block-6 {
grid-area: 10 / 1 / 13 / 2;
grid-area: 9 / 1 / 12 / 2;
margin-top: 30px;
}
#block-7 {
grid-area: 9 / 2 / 13 / 3;
grid-area: 9 / 2 / 12 / 3;
}
#block-8 {
grid-area: 10 / 3 / 13 / 4;
grid-area: 9 / 3 / 12 / 4;
}
#block-4,
#block-5,
#block-8 {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
align-items: flex-start;
}
.block:hover {
background: #b4b4fc67;
color: #fff;
}
.block p {
transition: transform .6s ease-in-out;
pointer-events: none;
font-size: 22px;
}
.block:hover p {
transform: scale(1.1);
}
.block#block-1:hover p {
transform: none;
}
div#block-4 {
margin-bottom: 45px;
}
div#block-3 img:first-child {
display: block;
}
div#block-3 img:last-child {
display: none;
}
@media (max-width: 1200px) {
.block p {
font-size: var(--text-lg);
}
}
@media (max-width: 1025px) {
.why-appska {
padding-top: 96px;
}
.grid {
grid-template-columns: 1fr 1fr;
}
.block.title {
grid-column: 1 / 2;
}
.block.last {
grid-column: 2 / 3;
}
.block.tworows {
grid-row: span 1;
}
#block-1::before {
display: none;
}
.block {
padding: 24px;
}
#block-1 {
padding: 16px 10px;
}
#block-2 {
padding: 24px 18px 8px 18px;
}
div#block-2 img {
max-height: 390px;
}
div#block-8 img {
display: none;
}
}
@media (max-width: 860px) and (min-width: 769px) {
.block {
padding: 16px;
}
div#block-2 img {
max-height: 270px;
}
}
@media (max-width: 768px) {
.grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.grid .block {
grid-area: auto !important;
width: 100%;
}
#block-1 {
order: 1;
}
#block-2 {
order: 2;
}
#block-3 {
order: 3;
}
#block-4 {
order: 4;
}
#block-6 {
order: 5;
}
#block-5 {
order: 6;
}
#block-7 {
order: 7;
}
#block-8 {
order: 8;
}
#block-8 img {
display: none;
}
.block {
display: flex;
flex-direction: row !important;
gap: 24px !important;
padding: 16px !important;
}
.block img {
max-width: 80px;
object-fit: cover;
}
div#block-2 {
flex-direction: column !important;
}
div#block-2 img:first-child {
height: 380px;
max-width: 90vw;
}
div#block-2 img:last-child {
height: 68px !important;
max-width: 90vw !important;
}
div#block-3 img:last-child {
display: block;
}
div#block-3 img:first-child {
display: none;
}
div#block-4,
#block-6 {
margin: 0;
}
.why-appska {
padding: 56px 0;
}
div#block-1 p {
font-size: 48px;
}
.block p {
color: var(--color-blue-gen-800);
font-size: 14px;
line-height: 1.44;
}
}.vericals__wrapper {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.verticals__item {
border: 1px solid var(--color-blue-gen-300);
border-radius: 24px;
padding: 20px 40px;
flex: 1 1 calc(25% - 30px);
box-sizing: border-box;
display: flex;
gap: 24px;
align-items: center;
background: transparent;
transition: background 1s ease, border .5s ease;
}
.verticals__item:hover {
background:  var(--color-scarlet-gen-500);
border: 1px solid  var(--color-scarlet-gen-500);
}
h3.vertical__name {
font-size: var(--text-xl);
color: var(--color-blue-gen-900);
transition: color .5s ease;
}
.verticals__item:hover h3.vertical__name {
color: #fff;
}
[data-theme="dark"] .verticals__item {
border: 1px solid var(--color-blue-gen-100);
}
[data-theme="dark"] .verticals__item:hover {
border: 1px solid  var(--color-accent-orange);
}
[data-theme="dark"] .verticals__item h3 {
color: var(--color-blue-gen-200);
} @media (max-width: 1024px) {
.verticals__item {
flex: 1 1 calc(33.333% - 24px);
}
} @media (max-width: 600px) {
.verticals__item {
flex: 1 1 100%;
}
.verticals__item h3 {
font-size: 20px;
}
}.numbers {
padding: 40px 20px;
}
.numbers .container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 30px;
margin: 0 auto;
}
[data-theme="dark"] .numbers__content {
background: var(--color-blue-gen-900);
border: 1px solid var(--color-blue-gen-200);
}
.numbers__content {
flex: 1;
border: 1px solid #d0d0ff;
border-radius: 24px;
padding: 43px;
max-width: 845px;
gap: 24px;
background: #fff;
z-index: 2;
}
.numbers__text {
margin: 0 0 15px;
font-size: var(--text-lg);
line-height: 1.5;
color: #333;
}
[data-theme="dark"] .numbers__content .numbers__text {
color: var(--color-blue-gen-200);
}
.numbers__highlight {
color: var(--color-scarlet-gen-500);
font-weight: 600;
}
.numbers__stats {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 220px;
}
.numbers__card {
background: var(--color-blue-gen-300);
color: #fff;
border-radius: 24px;
padding: 12px 50px;
text-align: center;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.numbers__number {
display: block;
font-size: var(--text-5xl);
}
.numbers__label {
font-size: var(--text-xl);
text-transform: uppercase;
letter-spacing: 0.5px;
} @media (max-width: 768px) {
.numbers__container {
flex-direction: column;
align-items: stretch;
}
.numbers__stats {
flex-direction: row;
justify-content: space-between;
}
.numbers__card {
display: none;
}
.numbers__content {
flex: none;
flex-basis: 100%;
padding: 16px;
}
.numbers .container {
max-width: 100%;
width: 100%;
padding: 0;
}
.numbers {
padding: 10px 20px;
}
}
@media (max-width: 480px) {
.numbers__text {
font-size: 14px;
line-height: 1.44;
}
}
@media (max-width: 480px) {
.numbers__stats {
flex-direction: column;
}
}.www {
position: relative;
}
.www::after {
content: "";
width: 100vw;
height: 100vw;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/numbers_bg.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
position: absolute;
left: 0;
top: 0;
z-index: -1;
aspect-ratio: 160 / 149;
}
.quote {
padding: 60px 20px;
color: #1a1a1a;
position: relative;
padding: 150px 0;
}
.quote__bubble {
position: relative;
background: #fff;
border-radius: 24px;
padding-left: 73px;
padding-right: 110px;
padding-bottom: 40px;
flex: 1;
transform: rotate(-6.8deg);
min-height: 364px;
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 1063px;
margin: auto;
}
[data-theme="dark"] .quote__bubble {
background: var(--color-blue-gen-900);
}
.quote__photo {
position: absolute;
flex-shrink: 0;
width: 234px;
height: 250px;
border-radius: 50%;
z-index: 2;
top: -150px;
left: 120px;
}
.quote__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quote__bubble::after {
content: "";
position: absolute;
bottom: -60px;
right: 57px;
width: 135px;
height: 72px;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/quote-tail-white.svg);
background-size: contain;
background-repeat: no-repeat;
}
.quote__quote-mark {
margin-bottom: 0px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 60px;
margin: auto;
width: fit-content;
}
.quote__text {
font-size: var(--text-base);
line-height: 1.6;
margin-bottom: 20px;
}
[data-theme="dark"] .quote__text,
[data-theme="dark"] .quote__author {
color: var(--color-blue-gen-200);
}
[data-theme="dark"] .quote__bubble::after {
content: "";
position: absolute;
bottom: -60px;
right: 57px;
width: 135px;
height: 72px;
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/quote-tail-black.svg);
background-size: contain;
background-repeat: no-repeat;
}
.quote__author {
font-weight: bold;
text-align: right;
font-size: 14px;
text-transform: uppercase;
}
.circle__quote-1 {
width: 20vw;
height: 20vw;
position: absolute;
background: #FF6575;
left: 0;
top: 20%;
border-radius: 50%;
filter: blur(110px);
animation: movePink 12s ease-in-out infinite alternate;
z-index: -1; }
.circle__quote-2 {
width: 20vw;
height: 20vw;
position: absolute;
background: #584DE9;
right: 0;
border-radius: 50%;
filter: blur(103px);
animation: moveBlue 14s ease-in-out infinite alternate;
z-index: -1; }
img.quote__appska-logo {
position: absolute;
right: 0;
bottom: 70px;
}
section.quote.no-content {
height: 1px;
position: absolute;
}
section.quote.no-content .quote__appska-logo {
position: absolute;
right: 0;
bottom: 305px;
z-index: -1;
left: 77vw;
max-width: 53vw;
max-height: 35vh;
filter: contrast(0.56);
transform: rotate(-18deg);
}
@media (max-width: 1441px) {
.quote__bubble {
margin-left: 0;
}
}
@media (max-width: 1025px) {
.quote__text {
line-height: 1.44;
}
} @media (max-width: 768px) {
.quote {
margin-top: 30px;
}
.quote__container {
flex-direction: column;
align-items: center;
}
.quote__bubble { padding: 16px;
padding-top: 100px;
}
.quote__bubble::after {
left: 90%;
transform: translateX(-50%);
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/quote-tail-white-mob.svg);
background-repeat: no-repeat;
width: 45px;
height: 72px;
}
[data-theme="dark"] .quote__bubble::after {
background: url(//appska.com/wp-content/themes/appska_sept_2025/assets/images/quote-tail-black-mob.svg);
background-repeat: no-repeat;
width: 45px;
height: 72px;
}
.quote__photo {
max-width: 168px;
max-height: 168px;
top: -200px;
left: 0;
}
.quote__photo img {
max-width: 168px;
height: fit-content;
transform: rotate(6.8deg);
margin-left: 32px;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.quote__quote-mark {
top: 30px;
}
.quote__quote-mark img {
max-width: 68px;
}
img.quote__appska-logo {
position: absolute;
right: 32px;
bottom: auto;
top: -30px;
max-width: 102px;
transform: rotate(10deg);
}
.www::after {
width: 100%;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0;
top: 10vh;
z-index: -1;
aspect-ratio: 160 / 149;
right: 0;
margin: auto;
}
}
@media (min-width: 1922px) {
img.quote__appska-logo {
right: calc((100vw - 1800px) / 2);
}
}