html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
* {
box-sizing: border-box
}
.success-message {
padding: 20px;
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
color: #15803d
}
.error-message {
padding: 20px;
background-color: #fef2f2;
border: 1px solid #ef4444;
color: #ef4444
}
.ac {
border: 1px solid #f0f0f0;
display: block;
overflow: hidden;
background: #ffffff;
transition: box-shadow 200ms ease, transform 200ms ease;
border-radius: 16px;
text-decoration: none;
}
.ac:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.ac[data-preview-state="hover"] {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.c1 {
color: #111;
background: #ffd6cc;
}
.c2 {
color: #111;
background: #cce8ff;
}
.c3 {
color: #111;
background: #ccffdd;
}
.c4 {
color: #111;
background: #ffe8cc;
}
.pc {
cursor: pointer;
overflow-x: hidden;
overflow-y: hidden;
background: url("") #ffffff 50% no-repeat scroll;
border-radius: 16px;
}
.body {
width: 100%;
min-height: 100vh;
}
.c-av {
width: 36px;
border: 3px solid #ffffff;
height: 36px;
display: flex;
opacity: 0.6;
font-size: 13px;
align-items: center;
font-weight: 700;
margin-left: -10px;
border-radius: 50%;
justify-content: center;
}
.about {
width: auto;
margin: 0px auto 0px auto;
display: block;
padding: 160px 0 130px 0;
max-width: auto;
max-height: auto;
align-items: center;
background: url("") #ffffff 50% no-repeat scroll;
flex-direction: row;
justify-content: center;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: #ffffff;
}
@media (max-width: 768px) {
.about {
padding: 0px 0 50px 0;
}
}
.scard {
height: 100%;
display: flex;
padding: 28px;
box-sizing: border-box;
border-radius: 20px;
flex-direction: column;
}
.accent {
display: inline;
font-size: 58px;
position: relative;
font-family: Syne, sans-serif;
font-weight: 800;
white-space: nowrap;
text-decoration: none;
}
@media (max-width: 991px) {
.accent {
font-size: 42px;
}
}
@media (max-width: 768px) {
.accent {
font-size: 36px;
}
}
@media (max-width: 480px) {
.accent {
font-size: 24px;
line-height: 23px;
}
}
.body-1 {
color: rgba(46, 43, 43, 1);
width: 100%;
min-height: 100vh;
}
@media (max-width: 991px) {
.body-1 {
margin: 0 0px 0 0;
padding: 0 0px 0 0px;
}
}
.faq-h2 {
color: #111111;
margin: 0 0 48px 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
}
@media (max-width: 480px) {
.faq-h2 {
font-size: 32px;
margin-bottom: 32px;
}
}
.pf-btn {
color: #111111;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 14px;
background: #f5f5f5;
transition: background 200ms ease, color 200ms ease;
font-family: Inter, sans-serif;
font-weight: 600;
line-height: 1;
border-radius: 999px;
}
.pf-btn:hover {
background: #c8f025;
}
.pf-btn[data-preview-state="hover"] {
background: #c8f025;
}
.pg-row {
gap: 16px;
display: grid;
margin-bottom: 16px;
}
.pill-1 {
gap: 8px;
top: 27%;
left: -18%;
color: rgba(17, 17, 17, 1);
width: auto;
z-index: 10;
display: flex;
padding: 10px 18px 10px 18px;
font-size: 13px;
position: absolute;
align-items: center;
font-weight: 700;
justify-content: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgba(200, 240, 37, 1);
}
@media (max-width: 991px) {
.pill-1 {
top: 24%;
left: -36px;
}
}
@media (max-width: 768px) {
.pill-1 {
top: 29%;
left: 16px;
}
}
@media (max-width: 480px) {
.pill-1 {
top: 29%;
left: 28px;
}
}
@media (max-width: 393px) {
.pill-1 {
top: 34%;
left: 1px;
}
}
@media (min-width: 1280px) {
.pill-1 {
left: -8%;
}
}
@media (min-width: 1440px) {
.pill-1 {
left: -12%;
}
}
.pill-2 {
gap: 8px;
top: 45%;
left: 76%;
color: rgba(17, 17, 17, 1);
z-index: 10;
display: flex;
padding: 10px 18px 10px 18px;
font-size: 13px;
position: absolute;
border-top: 1px solid rgba(238, 238, 238, 1);
align-items: center;
border-left: 1px solid rgba(238, 238, 238, 1);
font-weight: 700;
border-right: 1px solid rgba(238, 238, 238, 1);
border-bottom: 1px solid rgba(238, 238, 238, 1);
justify-content: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgba(255, 255, 255, 1);
}
@media (max-width: 991px) {
.pill-2 {
top: 43%;
left: 233px;
}
}
@media (max-width: 768px) {
.pill-2 {
top: 47%;
left: auto;
right: 1%;
}
}
@media (max-width: 480px) {
.pill-2 {
top: 47%;
left: 59%;
font-size: 12px;
}
}
@media (max-width: 393px) {
.pill-2 {
top: 51%;
left: 227px;
}
}
@media (min-width: 1280px) {
.pill-2 {
left: auto;
right: -6%;
}
}
.sec__p {
color: #888888;
margin: 0;
padding: 0;
font-size: 15px;
font-family: Inter, sans-serif;
line-height: 1.85;
}
@media (max-width: 768px) {
.sec__p {
flex-shrink: 1;
font-size: 13px;
text-align: left;
}
}
.span-1 {
font-size: 58px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 0px;
}
@media (max-width: 991px) {
.span-1 {
font-size: 42px;
}
}
@media (max-width: 768px) {
.span-1 {
font-size: 36px;
line-height: 0px;
}
}
@media (max-width: 480px) {
.span-1 {
font-size: 24px;
}
}
.span-2 {
font-size: 58px;
font-family: Syne, sans-serif;
font-weight: 800;
}
@media (max-width: 991px) {
.span-2 {
font-size: 42px;
}
}
@media (max-width: 768px) {
.span-2 {
font-size: 36px;
}
}
@media (max-width: 480px) {
.span-2 {
font-size: 24px;
line-height: 24px;
}
}
.text-1 {
text-align: left;
}
@media (max-width: 991px) {
.text-1 {
font-size: 13px;
}
}
@media (max-width: 768px) {
.text-1 {
font-size: 12px;
}
}
.text-2 {
margin: 0 0 0 19px;
font-weight: 700;
}
.text-3 {
margin: 0 0 0 20px;
}
.text-4 {
text-align: left;
}
.text-5 {
font-size: 15px;
font-weight: 400;
}
@media (max-width: 768px) {
.text-5 {
margin: 0px auto 0px auto;
display: block;
}
}
@media (max-width: 393px) {
.text-5 {
position: relative;
}
}
.text-6 {
color: var(--Тёмные-секции, -основной-текст);
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.1px;
letter-spacing: -1.5px;
}
@media (max-width: 991px) {
.text-6 {
font-size: 26px;
font-weight: 700;
}
}
@media (max-width: 768px) {
.text-6 {
font-size: 20px;
}
}
@media (max-width: 480px) {
.text-6 {
font-size: 24px;
}
}
.text-7 {
color: rgba(136, 136, 136, 1);
line-height: 1.85px;
}
@media (max-width: 991px) {
.text-7 {
font-size: 15px;
}
}
@media (max-width: 768px) {
.text-7 {
font-size: 13px;
}
}
@media (max-width: 480px) {
.text-7 {
font-size: 15px;
}
}
.text-8 {
color: rgba(17, 17, 17, 1);
font-size: 14px;
font-weight: 600;
}
.text-9 {
color: rgba(17, 17, 17, 1);
font-size: 14px;
font-weight: 600;
}
.why-h2 {
color: #ffffff;
margin: 0 0 16px 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
}
@media (max-width: 768px) {
.why-h2 {
font-size: 26px;
}
}
@media (max-width: 393px) {
.why-h2 {
font-size: 24px;
}
}
.ac__num {
color: rgba(0, 0, 0, 0.15);
font-size: 96px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
user-select: none;
pointer-events: none;
}
.all-sec {
width: 100%;
padding: 64px 0 80px;
background: #ffffff;
box-sizing: border-box;
}
.blog-h2 {
color: #111111;
margin: 0 0 48px 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
}
@media (max-width: 768px) {
.blog-h2 {
font-size: 26px;
}
}
@media (max-width: 393px) {
.blog-h2 {
font-size: 24px;
}
}
.faq-row {
width: 100%;
border: none;
cursor: pointer;
display: flex;
padding: 24px 0;
align-items: center;
box-sizing: border-box;
text-align: left;
user-select: none;
align-items: center;
justify-content: space-between;
justify-content: space-between;
background-color: #ffffff;
}
.faq-sec {
width: 100%;
padding: 80px 0;
background: url("") #ffffff 50% no-repeat scroll;
box-sizing: border-box;
}
@media (min-width: 1440px) {
.faq-sec {
background: url("") #ffffff 50% no-repeat scroll;
}
}
.hero-h1 {
color: var(--Тёмные-секции, -основной-текст);
display: block;
font-size: 76px;
align-items: flex-start;
font-family: Syne, sans-serif;
line-height: 54px;
flex-direction: column;
letter-spacing: -2px;
justify-content: center;
text-decoration: none;
}
@media (max-width: 991px) {
.hero-h1 {
display: block;
font-size: 76px;
align-items: center;
line-height: 45px;
flex-direction: row;
justify-content: space-around;
}
}
@media (max-width: 768px) {
.hero-h1 {
line-height: 63px;
letter-spacing: 0px;
}
}
@media (max-width: 480px) {
.hero-h1 {
display: block;
text-align: center;
align-items: center;
line-height: 49px;
flex-direction: row;
justify-content: center;
}
}
@media (min-width: 1280px) {
.hero-h1 {
line-height: 59px;
}
}
.nav-bar {
top: 0;
left: 0;
width: 100%;
z-index: 100;
position: fixed;
background: url("") #ffffff 50% no-repeat scroll;
box-sizing: border-box;
border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
.nav-bar {
background: url("") #ffffff 50% no-repeat scroll;
}
}
.nav-cta {
color: #ffffff;
border: none;
cursor: pointer;
padding: 12px 24px;
font-size: 14px;
background: url("") #111111 50% no-repeat scroll;
transition: background 200ms ease, color 200ms ease;
font-family: Syne, sans-serif;
font-weight: 700;
white-space: nowrap;
border-radius: 999px;
text-decoration: none;
}
@media (max-width: 768px) {
.nav-cta {
display: none;
}
}
@media (max-width: 480px) {
.nav-cta {
display: none;
}
}
.nav-cta:hover {
color: #111111;
background: #c8f025;
}
.nav-cta[data-preview-state="hover"] {
color: #111111;
background: #c8f025;
}
.text-10 {
color: rgba(17, 17, 17, 1);
font-size: 14px;
font-weight: 600;
}
.text-11 {
font-size: 13px;
}
@media (max-width: 393px) {
.text-11 {
font-size: 13px;
text-align: center;
}
}
.text-12 {
padding: 0px 0 0 0;
font-size: 13px;
text-align: left;
}
@media (max-width: 393px) {
.text-12 {
font-size: 13px;
letter-spacing: 0px;
}
}
.text-13 {
padding: 0 0 0px 0;
font-size: 13px;
}
@media (max-width: 393px) {
.text-13 {
margin: 0px auto 0px auto;
display: block;
font-size: 13px;
}
}
.text-14 {
color: rgba(17, 17, 17, 1);
font-size: 16px;
font-weight: 700;
}
@media (max-width: 768px) {
.text-14 {
font-size: 12px;
}
}
.text-15 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
font-weight: 600;
}
@media (max-width: 393px) {
.text-15 {
font-size: 9px;
}
}
.text-16 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
font-weight: 600;
}
@media (max-width: 393px) {
.text-16 {
font-size: 9px;
}
}
.text-17 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-17 {
font-size: 9px;
}
}
.text-18 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-18 {
font-size: 9px;
}
}
.text-19 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-19 {
font-size: 9px;
}
}
.text-20 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-20 {
font-size: 9px;
}
}
.text-21 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-21 {
font-size: 9px;
}
}
.text-22 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-22 {
font-size: 9px;
}
}
.text-23 {
color: rgba(85, 85, 85, 1);
font-size: 11px;
}
@media (max-width: 393px) {
.text-23 {
font-size: 9px;
}
}
.text-24 {
width: 0px;
font-size: 13px;
max-width: 0px;
overflow-x: visible;
line-height: 22.8px;
}
@media (max-width: 991px) {
.text-25 {
font-size: 13px;
}
}
@media (max-width: 768px) {
.text-25 {
font-size: 12px;
}
}
@media (max-width: 991px) {
.text-26 {
font-size: 13px;
}
}
@media (max-width: 768px) {
.text-26 {
font-size: 12px;
}
}
@media (max-width: 991px) {
.text-27 {
font-size: 13px;
}
}
@media (max-width: 768px) {
.text-27 {
font-size: 12px;
}
}
@media (max-width: 768px) {
.text-28 {
font-size: 13px;
}
}
@media (max-width: 480px) {
.text-28 {
font-size: 10px;
font-weight: 600;
}
}
@media (max-width: 991px) {
.text-29 {
margin: 0px auto 0px auto;
display: block;
}
}
@media (max-width: 768px) {
.text-29 {
font-size: 13px;
}
}
@media (max-width: 480px) {
.text-29 {
font-size: 12px;
}
}
@media (max-width: 768px) {
.text-30 {
font-size: 13px;
}
}
@media (max-width: 393px) {
.text-30 {
font-size: 11px;
}
}
@media (max-width: 768px) {
.text-31 {
font-size: 13px;
}
}
@media (max-width: 393px) {
.text-31 {
font-size: 10px;
}
}
@media (max-width: 768px) {
.text-32 {
font-size: 15px;
}
}
@media (max-width: 393px) {
.text-32 {
font-size: 13px;
}
}
@media (max-width: 480px) {
.text-33 {
font-size: 24px;
}
}
@media (max-width: 393px) {
.text-33 {
letter-spacing: -1.3px;
}
}
@media (max-width: 393px) {
.text-34 {
letter-spacing: 0px;
}
}
@media (max-width: 768px) {
.text-35 {
font-size: 26px;
}
}
@media (max-width: 393px) {
.text-35 {
font-size: 24px;
}
}
@media (max-width: 393px) {
.text-36 {
text-align: center;
}
}
@media (max-width: 393px) {
.text-37 {
font-size: 16px;
}
}
@media (max-width: 393px) {
.text-38 {
font-size: 13px;
text-align: left;
}
}
@media (max-width: 393px) {
.text-39 {
font-size: 13px;
}
}
@media (max-width: 393px) {
.text-40 {
font-size: 13px;
}
}
@media (max-width: 393px) {
.text-41 {
font-size: 13px;
}
}
@media (max-width: 393px) {
.text-42 {
font-size: 13px;
}
}
@media (max-width: 393px) {
.text-43 {
font-size: 13px;
}
}
@media (max-width: 480px) {
.text-44 {
font-size: 24px;
}
}
@media (min-width: 1440px) {
.text-45 {
font-size: 14px;
text-align: left;
font-weight: 600;
}
}
.why-num {
color: #2a2a2a;
display: block;
font-size: 36px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
transition: color 0.18s ease;
}
.why-card:hover .why-num {
color: #c8f025;
}
@media (max-width: 480px) {
.why-num {
font-size: 58px;
}
}
@media (max-width: 393px) {
.why-num {
font-size: 36px;
text-align: center;
}
}
.about-h2 {
color: #111111;
font-size: 48px;
margin-top: 0;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
letter-spacing: -1.5px;
}
@media (max-width: 768px) {
.about-h2 {
font-size: 42px;
}
}
@media (max-width: 480px) {
.about-h2 {
margin: 0 0 0px 0;
}
}
.ac__body {
padding: 20px;
}
.ac__date {
color: #888888;
margin: 0;
padding: 0;
font-size: 13px;
font-family: Inter, sans-serif;
}
.ac__meta {
color: #888888;
margin: 0 0 8px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.all-grid {
gap: 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.all-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.all-grid {
grid-template-columns: 1fr;
}
}
.blog-num {
opacity: 0.15;
font-size: 96px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
user-select: none;
pointer-events: none;
}
.cf-slide {
background: linear-gradient(135deg, #1a1a2e 0%, #4a3f6b 100%);
}
.faq-item {
overflow-x: hidden;
overflow-y: hidden;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
}
@media (min-width: 1440px) {
.faq-item {
overflow-x: hidden;
overflow-y: hidden;
}
}
.faq-list {
width: 100%;
display: flex;
flex-direction: column;
}
@media (min-width: 1440px) {
.faq-list {
background-color: rgba(248, 244, 244, 1);
}
}
.fw-slide {
background: linear-gradient(135deg, #FFA1AA 0%, #D4F5F5 100%);
}
.lh-slide {
background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%);
}
.lp-slide {
background: linear-gradient(135deg, #C4A988 0%, #8A8FE0 100%);
}
.nav-link {
color: #111111;
font-size: 14px;
transition: color 200ms ease;
font-family: Inter, sans-serif;
font-weight: 600;
text-decoration: none;
}
@media (max-width: 480px) {
.nav-link {
transition: color 200ms ease;
}
}
.nav-link:hover {
color: #111111;
text-decoration: underline;
text-decoration-color: #c8f025;
text-underline-offset: 4px;
}
.nav-link[data-preview-state="hover"] {
color: #111111;
text-decoration: underline;
text-decoration-color: #c8f025;
text-underline-offset: 4px;
}
.nav-logo {
display: flex;
align-items: center;
text-decoration: none;
}
.pc-large {
cursor: pointer;
overflow: hidden;
background: #ffffff;
border-radius: 16px;
}
.pc__info {
padding: 20px 0 8px;
}
.pc__meta {
color: #888888;
margin: 0;
padding: 0;
font-size: 13px;
font-family: Inter, sans-serif;
font-weight: 400;
}
.pg-row-2 {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.pg-row-2 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.pg-row-2 {
grid-template-columns: 1fr;
}
}
.pg-row-3 {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.pg-row-3 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.pg-row-3 {
grid-template-columns: 1fr;
}
}
.proj-cta {
width: 100%;
background: #111111;
box-sizing: border-box;
}
.proj-toc {
gap: 4px;
top: 96px;
display: flex;
padding: 0;
position: sticky;
flex-direction: column;
}
@media (max-width: 480px) {
.proj-toc {
gap: 8px;
position: static;
flex-wrap: wrap;
flex-direction: row;
}
}
.why-card {
gap: 16px;
width: 100%;
border: 1px solid #2a2a2a;
display: flex;
padding: 32px 28px;
border-radius: 24px;
flex-direction: column;
background-color: #1a1a1a;
}
@media (max-width: 393px) {
.why-card {
align-items: flex-start;
justify-content: center;
}
}
.why-grid {
gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.why-grid {
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.why-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.ac__badge {
top: 16px;
left: 16px;
color: #ffffff;
padding: 6px 12px;
position: absolute;
font-size: 10px;
background: #111111;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 999px;
letter-spacing: 1px;
text-transform: uppercase;
}
.ac__title {
color: #111111;
margin: 0 0 12px 0;
padding: 0;
font-size: 17px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.3;
}
.blog-card {
display: flex;
overflow-x: hidden;
overflow-y: hidden;
align-items: stretch;
border-radius: 16px;
flex-direction: column;
justify-content: flex-start;
background-color: #ffffff;
text-decoration: none;
color: #111111;
}
@media (max-width: 991px) {
.blog-card {
grid-column: auto;
}
}
.blog-date {
color: #888888;
width: 100%;
margin: auto 0 0 4px;
font-size: 13px;
margin-top: auto;
font-family: Inter, sans-serif;
padding-top: 8px;
}
.blog-grid {
gap: 24px;
display: grid;
padding: 0px 0 0px 0;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.blog-grid {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.blog-grid {
grid-template-columns: 1fr;
}
}
.blog-hero {
width: 100%;
padding: 120px 0 64px;
background: #111111;
box-sizing: border-box;
}
.blog-meta {
color: #888888;
width: 100%;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.color-hex {
color: #888888;
font-size: 11px;
text-align: center;
font-family: Inter, sans-serif;
font-weight: 600;
}
.container {
margin: 0 auto 0 auto;
max-width: 1200px;
}
.div_icons {
width: 20px;
height: 20px;
background: url('../images/PsblDGoVIY_phone-svgrepo-com.svg') center / cover no-repeat scroll;
}
.div_image {
width: 27px;
height: 40px;
margin: 0px auto 0px auto;
display: block;
padding: 0px 0 0px 0;
max-width: 100%;
background: url('../images/50hLReCrRm_figma.svg') center / cover no-repeat fixed;
}
.extra-sec {
width: 100%;
padding: 0 0 80px;
background: #f5f5f5;
box-sizing: border-box;
}
@media (min-width: 1440px) {
.extra-sec {
background: url("") #f5f5f5 50% no-repeat scroll;
}
}
.faq-label {
color: #888888;
display: block;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: 2px;
text-transform: uppercase;
}
.font-item {
margin-bottom: 20px;
}
.font-name {
color: rgba(134, 134, 134, 1);
display: block;
font-size: 10px;
font-family: Inter, sans-serif;
font-weight: 600;
margin-bottom: 6px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fresh-sec {
width: 100%;
padding: 64px 0 80px;
background: #ffffff;
box-sizing: border-box;
}
.fw-hidden {
display: none;
}
.hero-desc {
color: rgba(136, 136, 136, 1);
margin: 40px 0 0 0;
line-height: 27px;
}
@media (max-width: 768px) {
.hero-desc {
margin: 0px 0 0 0;
font-size: 15px;
}
}
@media (max-width: 480px) {
.hero-desc {
text-align: center;
line-height: 19px;
}
}
.nav-inner {
height: 64px;
margin: 0 auto;
display: flex;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
@media (max-width: 480px) {
.nav-inner {
padding: 0 20px;
}
}
.nav-links {
gap: 40px;
margin: 0;
display: flex;
padding: 0;
list-style: none;
align-items: center;
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
}
@media (max-width: 480px) {
.nav-links {
display: none;
}
}
.pc__arrow {
top: 16px;
color: #111111;
right: 16px;
width: 36px;
height: 36px;
display: flex;
z-index: 2;
position: absolute;
font-size: 16px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
align-items: center;
font-weight: 700;
line-height: 1;
border-radius: 50%;
justify-content: center;
}
.pc__badge {
top: 16px;
left: 16px;
color: #ffffff;
padding: 6px 12px;
z-index: 2;
position: absolute;
font-size: 10px;
background: #111111;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1;
border-radius: 999px;
letter-spacing: 1px;
text-transform: uppercase;
}
.pc__thumb {
width: 100%;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
background: url('../images/yiivBCJlUd__compressed.png') 50% 50% / cover no-repeat scroll;
aspect-ratio: 16/10;
}
.pc__title {
color: #111111;
margin: 0 0 4px 0;
padding: 0;
font-size: 18px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.2;
}
.proj-body {
width: 100%;
background: url("") #ffffff 50% no-repeat scroll;
box-sizing: border-box;
}
.proj-hero {
width: 100%;
background: url("") #ffffff 50% no-repeat scroll;
box-sizing: border-box;
}
.proj-more {
width: 100%;
background: #f5f5f5;
box-sizing: border-box;
}
.sec__body {
gap: 14px;
display: flex;
flex-direction: column;
}
.section-1 {
padding: auto 0px auto 0px;
border-top: none;
overflow-x: visible;
overflow-y: visible;
border-left: none;
border-right: none;
border-bottom: none;
background-color: var(--Светлые-секции, -текст-на-тёмном);
}
@media (max-width: 991px) {
.section-1 {
padding: 100px 0px auto 0px;
}
}
.sites-sec {
width: 100%;
padding: 64px 0 80px;
background: url("") #f5f5f5 50% no-repeat scroll;
box-sizing: border-box;
}
.stack-tag {
color: #111111;
display: inline-flex;
padding: 8px 18px;
font-size: 13px;
background: #c8f025;
box-sizing: border-box;
align-items: center;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1;
border-radius: 999px;
}
.why-label {
color: rgba(17, 17, 17, 1);
display: inline-block;
padding: 8px 20px;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 100px;
margin-bottom: 20px;
letter-spacing: 2px;
text-transform: uppercase;
background-color: #c8f025;
}
.about-card {
left: 7%;
width: 69%;
padding: 20px;
max-width: auto;
position: relative;
border-top: none;
box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.08);
transform: rotate(-10deg);
background: linear-gradient(180deg, rgba(208, 248, 250, 0.91) 0%, #C8F025 100%), url("") #ffffff 50% no-repeat scroll;
border-left: none;
border-right: none;
border-bottom: none;
border-radius: 24px;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background-color: rgba(255, 255, 255, 0.68);
}
@media (max-width: 991px) {
.about-card {
width: 74%;
}
}
@media (max-width: 768px) {
.about-card {
left: auto;
width: 47%;
height: auto;
display: block;
transform: rotate(0deg);
flex-direction: column;
}
}
@media (max-width: 480px) {
.about-card {
width: 62%;
margin: 50px 0 0 0;
}
}
@media (max-width: 393px) {
.about-card {
width: 77%;
}
}
@media (min-width: 1280px) {
.about-card {
width: 58%;
}
}
@media (min-width: 1440px) {
.about-card {
width: 58%;
}
}
.about-desc {
color: #888888;
margin: 20px 0 40px 0;
font-size: 15px;
max-width: 580px;
margin-top: 0;
font-family: Inter, sans-serif;
line-height: 1.75;
margin-bottom: 36px;
}
@media (max-width: 768px) {
.about-desc {
margin: 20px 0 20px 0;
}
}
.about-grid {
gap: 0px;
top: -67px;
width: 100%;
margin: 0px auto 0px auto;
display: grid;
padding: 0 0px 0 0px;
max-width: 1200px;
position: relative;
overflow-x: visible;
align-items: start;
justify-items: start;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.about-grid {
gap: 20px;
padding: 0 10px 0 10px;
}
}
@media (max-width: 768px) {
.about-grid {
gap: 30px;
top: auto;
display: flex;
align-items: center;
justify-items: center;
flex-direction: row;
justify-content: center;
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 480px) {
.about-grid {
flex-direction: column;
}
}
.all-filter {
color: #111111;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 14px;
background: #f5f5f5;
transition: background 200ms ease, color 200ms ease;
font-family: Inter, sans-serif;
font-weight: 600;
border-radius: 999px;
}
.blog-badge {
top: 16px;
left: 16px;
z-index: 2;
padding: 6px 12px;
font-size: 10px;
position: absolute;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 999px;
text-transform: uppercase;
background-color: #111111;
color: #c8f025;
}
.blog-label {
color: #888888;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: 2px;
text-transform: uppercase;
}
.blog-num-1 {
color: #111111;
}
.blog-num-2 {
color: #ffffff;
}
.blog-num-3 {
color: #111111;
}
.blog-title {
color: #111111;
width: 100%;
font-size: 18px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
}
.breadcrumb {
width: 100%;
background: url("") #ffffff 50% no-repeat scroll;
box-sizing: border-box;
margin-top: 64px;
border-bottom: 1px solid #f0f0f0;
}
@media (min-width: 1440px) {
.breadcrumb {
padding: 0 0 0 60px;
}
}
.ca-slide-1 {
background: linear-gradient(135deg, #1a1a1a 0%, #3a2a20 100%);
}
.ca-slide-2 {
background: linear-gradient(135deg, #2a1f1a 0%, #4a3020 100%);
}
.ca-slide-3 {
background: linear-gradient(135deg, #1e1a14 0%, #3d2e18 100%);
}
.ca-slide-4 {
background: linear-gradient(135deg, #1a1510 0%, #3a2518 100%);
}
.colors-row {
gap: 12px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.extra-grid {
gap: 16px;
display: grid;
align-items: start;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.extra-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.extra-grid {
grid-template-columns: 1fr;
}
}
.faq-answer {
display: block;
max-height: 0;
overflow-x: hidden;
overflow-y: hidden;
transition: max-height 300ms ease, padding-bottom 300ms ease;
padding-bottom: 0;
background-color: #ffffff;
}
.faq-toggle {
color: #111111;
width: 36px;
height: 36px;
content: "";
display: flex;
font-size: 20px;
font-size: 18px;
transform: rotate(45deg);
align-items: center;
background: url('../images/jYggN4bPaK_.svg') #f5f5f5 50% no-repeat scroll;
flex-shrink: 0;
font-weight: 400;
line-height: 1;
transition: background-color 300ms ease, transform 300ms ease, filter 300ms ease;
align-items: center;
flex-shrink: 0;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1;
border-radius: 50%;
border-radius: 50%;
pointer-events: none;
justify-content: center;
pointer-events: none;
justify-content: center;
background-color: #f5f5f5;
}
@media (min-width: 1440px) {
.faq-toggle {
transform: rotate(45deg);
background: url('../images/jYggN4bPaK_.svg') #f5f5f5 50% no-repeat scroll;
}
}
.fresh-card {
border: 1px solid #e8e8e8;
display: grid;
overflow: hidden;
border-radius: 16px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px) {
.fresh-card {
grid-template-columns: 1fr;
}
}
.hero-blob1 {
top: -9%;
left: -7%;
right: auto;
width: 80%;
height: 35%;
z-index: 0;
opacity: 0.25;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
background-color: rgba(92, 225, 230, 1);
}
@media (max-width: 991px) {
.hero-blob1 {
left: -19px;
right: auto;
}
}
@media (max-width: 768px) {
.hero-blob1 {
top: -2%;
left: 21%;
width: 180px;
height: 130px;
}
}
@media (max-width: 480px) {
.hero-blob1 {
top: -8%;
left: 16%;
right: auto;
width: 180px;
height: 130px;
}
}
@media (max-width: 393px) {
.hero-blob1 {
top: -9px;
left: 41px;
}
}
@media (min-width: 1280px) {
.hero-blob1 {
left: -11%;
}
}
.hero-blob2 {
top: 82%;
left: auto;
right: -15%;
width: 54%;
bottom: auto;
height: 27%;
opacity: 0.3;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
transform: rotate(68deg);
border-radius: 40% 60% 55% 45% / 60% 40% 65% 35%;
background-color: rgba(200, 240, 37, 1);
}
@media (max-width: 991px) {
.hero-blob2 {
top: 84%;
left: auto;
right: -14%;
}
}
@media (max-width: 768px) {
.hero-blob2 {
top: 350px;
left: 220px;
right: 46px;
width: 120px;
height: 120px;
}
}
@media (max-width: 480px) {
.hero-blob2 {
top: 85%;
left: 52%;
right: auto;
width: 120px;
height: 120px;
}
}
@media (max-width: 393px) {
.hero-blob2 {
top: 370px;
left: 200px;
right: auto;
}
}
@media (min-width: 1280px) {
.hero-blob2 {
right: -12%;
}
}
@media (min-width: 1440px) {
.hero-blob2 {
top: auto;
left: auto;
right: -12%;
bottom: -8%;
}
}
.hero-photo {
top: -61px;
left: -27px;
right: auto;
width: 100%;
height: 547px;
z-index: 2;
display: flex;
max-width: auto;
position: relative;
align-items: center;
background: url('../images/bdCQlupKzV_IMG_20260514_150153-Photoroom1_compressed.webp') center / cover no-repeat scroll;
flex-direction: row;
justify-content: center;
}
@media (max-width: 991px) {
.hero-photo {
top: -64px;
left: -26px;
height: 519px;
}
}
@media (max-width: 768px) {
.hero-photo {
top: -42px;
left: -12px;
height: 450px;
}
}
@media (max-width: 480px) {
.hero-photo {
top: -30px;
left: -28px;
height: 410px;
align-items: center;
justify-content: center;
}
}
@media (max-width: 393px) {
.hero-photo {
top: -9px;
}
}
.nav-burger {
gap: 5px;
border: none;
cursor: pointer;
display: none;
padding: 8px;
background: url("") none 50% no-repeat scroll;
flex-direction: column;
}
@media (max-width: 768px) {
.nav-burger {
display: flex;
}
}
@media (max-width: 480px) {
.nav-burger {
display: flex;
}
}
.pill-1-dot {
width: 8px;
height: 8px;
background: #22c55e;
flex-shrink: 0;
border-radius: 50%;
}
.pill-2-dot {
width: 8px;
height: 8px;
background: #22c55e;
flex-shrink: 0;
border-radius: 50%;
}
@media (max-width: 480px) {
.pill-2-dot {
background: url("") #22c55e 50% no-repeat scroll;
}
}
.price-hero {
width: 100%;
padding: 120px 0 48px;
background: #ffffff;
box-sizing: border-box;
}
@media (max-width: 991px) {
.price-hero {
background: url("") #ffffff 50% no-repeat scroll;
}
}
.pricing-h2 {
color: #ffffff;
margin: 0 0 16px 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
}
@media (max-width: 768px) {
.pricing-h2 {
font-size: 26px;
}
}
@media (max-width: 480px) {
.pricing-h2 {
font-size: 32px;
}
}
@media (max-width: 393px) {
.pricing-h2 {
font-size: 24px;
}
}
.process-h2 {
color: #111111;
margin: 0 0 16px 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.05;
letter-spacing: -2px;
}
@media (max-width: 768px) {
.process-h2 {
font-size: 26px;
}
}
@media (max-width: 393px) {
.process-h2 {
font-size: 24px;
}
}
.re-slide-1 {
background: linear-gradient(135deg, #2D5BFF 0%, #6B8CFF 50%, #B8C8F8 100%);
}
.re-slide-2 {
background: linear-gradient(135deg, #1E3A8A 0%, #3B6FD4 50%, #C5D5F0 100%);
}
.re-slide-3 {
background: linear-gradient(135deg, #2C4A7C 0%, #5B82C4 50%, #D0DCF4 100%);
}
.re-slide-4 {
background: linear-gradient(135deg, #1A3560 0%, #4A72B8 50%, #F0F2F8 100%);
}
.scard-dark {
background: #111111;
}
.scard__btn {
width: 100%;
border: none;
cursor: pointer;
display: block;
padding: 14px;
font-size: 14px;
box-sizing: border-box;
margin-top: auto;
text-align: center;
transition: background 200ms ease, color 200ms ease;
font-family: Syne, sans-serif;
font-weight: 700;
border-radius: 12px;
text-decoration: none;
}
.scard__sub {
color: #888888;
margin: 0 0 20px 0;
padding: 0;
font-size: 12px;
font-family: Inter, sans-serif;
}
.sec__label {
color: #bbbbbb;
display: block;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 1;
margin-bottom: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.sites-grid {
gap: 16px;
display: grid;
padding: 0 0px 0 0px;
align-items: stretch;
justify-items: stretch;
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 991px) {
.sites-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
@media (max-width: 480px) {
.sites-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 1280px) {
.sites-grid {
grid-template-rows: repeat(1, auto);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1440px) {
.sites-grid {
grid-template-rows: repeat(1, auto);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.stack-tags {
gap: 10px;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
@media (max-width: 768px) {
.stack-tags {
flex-direction: row;
justify-content: center;
align-items: center;
}
}
.stages-sec {
width: 100%;
padding: 0 0 80px;
background: #f5f5f5;
box-sizing: border-box;
}
.why-header {
margin-bottom: 64px;
}
.about-badge {
gap: 10px;
color: #111111;
width: auto;
display: flex;
padding: 8px 18px;
font-size: 14px;
align-items: center;
background: url("") #f5f5f5 50% no-repeat scroll;
font-family: Inter, sans-serif;
font-weight: 600;
border-radius: 999px;
flex-direction: column;
justify-content: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgba(255, 255, 255, 1);
}
.about-right {
order: 0;
margin: 0px auto 0px -80px;
display: block;
align-items: flex-start;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 768px) {
.about-right {
margin: 60px auto 0px auto;
display: flex;
align-items: center;
justify-content: center;
}
}
.ac__preview {
height: 200px;
display: flex;
overflow: hidden;
position: relative;
align-items: center;
justify-content: center;
}
.all-filters {
gap: 8px;
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.contacts-h2 {
margin: 0 0 20px 0;
line-height: 1.05;
letter-spacing: -1.5px;
}
.container-1 {
width: 100%;
margin: 0 auto 0 auto;
display: flex;
padding: 130px 10px 60px 10px;
max-width: 1200px;
overflow-x: hidden;
overflow-y: hidden;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
}
@media (max-width: 991px) {
.container-1 {
padding: 100px 10px 60px 10px;
}
}
@media (max-width: 480px) {
.container-1 {
margin: 0 auto 0 auto;
padding: 100px 10px 60px 10px;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
}
}
@media (max-width: 393px) {
.container-1 {
padding: 100px 10px 100px 10px;
}
}
.container-2 {
margin: 0 auto 0 auto;
max-width: 1200px;
}
.container-3 {
margin: 0 auto 0 auto;
max-width: 1200px;
}
@media (max-width: 768px) {
.container-3 {
line-height: 0px;
}
}
@media (max-width: 480px) {
.container-3 {
line-height: 0px;
}
}
.design-card {
height: 100%;
display: flex;
padding: 24px;
background: #f5f5f5;
box-sizing: border-box;
border-radius: 16px;
flex-direction: column;
background-color: rgba(223, 223, 223, 1);
}
@media (min-width: 1440px) {
.design-card {
background-color: rgba(223, 223, 223, 1);
}
}
.design-grid {
gap: 16px;
display: grid;
box-sizing: border-box;
margin-top: 28px;
align-items: stretch;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
.design-grid {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(2, auto);
}
}
@media (min-width: 1440px) {
.design-grid {
gap: 16px;
display: grid;
align-items: center;
align-items: start;
justify-content: flex-start;
grid-template-rows: repeat(1, auto);
grid-template-columns: repeat(2, 1fr);
grid-template-columns: 1fr 1fr;
}
}
.div-block-3 {
width: 24px;
height: 24px;
background: url('../images/YeouxcWSEP_SVG1.svg') center / cover no-repeat scroll;
}
.div-block-4 {
width: 18px;
height: 20px;
background: url('../images/YIAp0nSACu_SVG2.svg') center / cover no-repeat scroll;
}
.div-block-5 {
width: 20px;
height: 20px;
background: url('../images/TnuCxfyLWD_SVG3.svg') center / cover no-repeat scroll;
}
.div-block-7 {
width: 44px;
height: 44px;
}
.div_image_2 {
width: 20px;
height: 30px;
margin: 0px auto 0px auto;
display: block;
padding: 0px 0 0px 0;
max-width: 100%;
background: url('../images/50hLReCrRm_figma.svg') center / cover no-repeat scroll;
}
@media (max-width: 768px) {
.div_image_2 {
width: 15px;
height: 25px;
}
}
.faq-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #ffffff;
}
@media (max-width: 480px) {
.faq-section {
padding: 60px 20px;
}
}
.pricing-btn {
width: 100%;
cursor: pointer;
display: block;
padding: 16px;
font-size: 15px;
box-sizing: border-box;
margin-top: auto;
text-align: center;
font-family: Syne, sans-serif;
font-weight: 700;
border-radius: 12px;
text-decoration: none;
}
.proj-slider {
gap: 20px;
width: 100%;
display: flex;
box-sizing: border-box;
margin-top: 40px;
flex-direction: column;
}
.result-card {
gap: 8px;
display: flex;
padding: 24px 20px;
background: #f5f5f5;
box-sizing: border-box;
border-radius: 20px;
flex-direction: column;
}
@media (max-width: 768px) {
.result-card {
justify-content: center;
align-items: center;
}
}
.scard-light {
background: #ffffff;
}
.scard__from {
color: #888888;
font-size: 12px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1;
}
.scard__item {
gap: 8px;
color: #111111;
display: flex;
font-size: 13px;
align-items: flex-start;
font-family: Inter, sans-serif;
line-height: 1.4;
}
.scard__list {
gap: 10px;
flex: 1;
margin: 0 0 24px 0;
display: flex;
padding: 0;
list-style: none;
flex-direction: column;
}
.scard__name {
color: #888888;
margin: 0 0 8px 0;
padding: 0;
font-size: 14px;
font-family: Inter, sans-serif;
font-weight: 400;
}
.services-h2 {
color: #ffffff;
margin: 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
}
@media (max-width: 768px) {
.services-h2 {
font-size: 36px;
}
}
@media (max-width: 480px) {
.services-h2 {
font-size: 24px;
}
}
.stages-grid {
gap: 16px;
display: grid;
align-items: start;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.stages-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.stages-grid {
grid-template-columns: 1fr;
}
}
.stages-note {
color: #888888;
margin: 24px 0 0 0;
padding: 0;
font-size: 13px;
font-family: Inter, sans-serif;
}
.svg-image-1 {
width: 30px;
height: 30px;
}
.why-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #111111;
}
.about-badges {
gap: 20px;
margin: 0 0 50px 0;
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: 36px;
justify-content: space-around;
}
@media (max-width: 991px) {
.about-badges {
gap: 50px;
align-items: center;
justify-content: center;
}
}
@media (max-width: 768px) {
.about-badges {
gap: 30px;
margin: 0 0 30px 0;
align-items: stretch;
justify-content: space-between;
}
}
@media (max-width: 480px) {
.about-badges {
flex-direction: row;
}
}
.blog-badge-1 {
color: #c8f025;
background-color: #111111;
}
.blog-badge-2 {
color: #ffffff;
background-color: #333333;
}
.blog-badge-3 {
color: #111111;
background-color: #ffffff;
}
.blog-preview {
height: 220px;
display: flex;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
align-items: center;
border-radius: 16px;
justify-content: center;
background: linear-gradient(135deg, #ececec, #f7f7f7);
}
.blog-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #ffffff;
}
.font-sample-sans.ca-font-sans {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.font-sample-sans.cf-font-sans {
font-family: 'Montserrat', sans-serif;
}
.clients-text {
color: rgba(136, 136, 136, 1);
margin: 0 0 0 10px;
font-size: 13px;
}
@media (max-width: 480px) {
.clients-text {
font-size: 14px;
}
}
.color-circle {
width: 52px;
height: 52px;
box-sizing: border-box;
flex-shrink: 0;
border-radius: 50%;
background-color: #E8602C;
}
@media (min-width: 1440px) {
.color-circle {
background-color: #142840;
}
}
.color-swatch {
gap: 10px;
display: flex;
align-items: center;
flex-direction: column;
}
.faq-question {
flex: 1;
color: #111111;
font-size: 17px;
font-size: 17px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.3;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.3;
padding-right: 20px;
padding-right: 16px;
}
@media (max-width: 480px) {
.faq-question {
font-size: 15px;
}
}
.font-sample-sans.fw-font-sans {
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.font-sample-sans.lh-font-sans {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.link-block-1 {
gap: 10px;
color: rgba(17, 17, 17, 1);
margin: 40px 0 0 0;
display: inline-flex;
padding: 16px 28px 16px 28px;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: rgba(17, 17, 17, 1);
text-decoration: none;
}
@media (max-width: 768px) {
.link-block-1 {
margin: 40px 0 0 0;
}
}
.link-block-1:hover {
opacity: 0.8;
}
.link-block-1[data-preview-state="hover"] {
opacity: 0.8;
}
.link-block-1:not(.link_2):hover {
background-color: #c8f025;
color: #111111;
opacity: 1;
text-decoration: none;
}
.link-block-1:not(.link_2):hover .text-block-1 {
color: #111111;
}
.link-block-1:not(.link_2):hover .svg-image-1 rect {
display: none;
}
.link-block-1:not(.link_2):hover .svg-image-1 path {
fill: #111111;
}
.link-block-1:not(.link_2):hover .svg-image-1 {
stroke: none;
}
.font-sample-sans.lp-font-sans {
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.nav-logo-dot {
width: 8px;
height: 8px;
display: inline-block;
background: #c8f025;
flex-shrink: 0;
margin-left: 4px;
border-radius: 50%;
}
.portfolio-h2 {
color: #111111;
margin: 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.5px;
}
@media (max-width: 768px) {
.portfolio-h2 {
font-size: 26px;
}
}
@media (max-width: 480px) {
.portfolio-h2 {
font-size: 32px;
}
}
@media (max-width: 393px) {
.portfolio-h2 {
font-size: 24px;
}
}
.pricing-card {
width: 100%;
height: 100%;
display: flex;
padding: 32px 28px;
box-sizing: border-box;
align-items: stretch;
border-radius: 24px;
flex-direction: column;
justify-content: flex-start;
}
@media (max-width: 991px) {
.pricing-card {
width: 100%;
height: auto;
}
}
.pricing-from {
color: #888888;
font-size: 14px;
margin-top: 0;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.pricing-grid {
gap: 16px;
width: 100%;
display: grid;
align-items: stretch;
justify-items: stretch;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.pricing-grid {
align-items: center;
justify-items: center;
grid-template-rows: repeat(1, auto);
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 480px) {
.pricing-grid {
grid-template-columns: 1fr;
}
}
.pricing-list {
gap: 12px;
margin: 0 0 32px 0;
display: flex;
padding: 0;
flex-grow: 1;
list-style: none;
flex-direction: column;
}
.process-card {
gap: 16px;
width: 100%;
display: flex;
padding: 32px;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
border-radius: 20px;
flex-direction: column;
background-color: #ffffff;
}
@media (max-width: 393px) {
.process-card {
align-items: center;
justify-content: center;
}
}
.proj-content {
gap: 64px;
display: flex;
flex-direction: column;
}
.proj-section {
display: flex;
box-sizing: border-box;
min-height: 40px;
flex-direction: column;
}
.font-sample-sans.re-font-sans {
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.results-grid {
gap: 14px;
display: grid;
box-sizing: border-box;
margin-top: 24px;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.results-grid {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, auto);
}
}
.scard__badge {
color: #111111;
display: inline-block;
padding: 5px 12px;
font-size: 10px;
align-self: flex-start;
background: url("") #c8f025 50% no-repeat scroll;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 999px;
margin-bottom: 16px;
letter-spacing: 1px;
text-transform: uppercase;
}
@media (min-width: 1440px) {
.scard__badge {
position: static;
background: url("") #c8f025 50% no-repeat scroll;
}
}
.scard__check {
color: #c8f025;
font-size: 13px;
flex-shrink: 0;
line-height: 1.4;
}
.scard__price {
color: #111111;
font-size: 28px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 480px) {
.scard__price {
font-size: 34px;
}
}
@media (min-width: 1280px) {
.scard__price {
font-size: 26px;
}
}
.sec__body-mt {
margin-top: 32px;
}
.sec__heading {
color: #111111;
margin: 0 0 20px 0;
padding: 0;
font-size: 28px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.01em;
}
@media (max-width: 480px) {
.sec__heading {
font-family: Syne, sans-serif;
font-size: 24px;
}
}
@media (min-width: 1440px) {
.sec__heading {
font-size: 28px;
font-family: Syne, sans-serif;
}
}
.services-cta {
color: #111111;
display: inline-flex;
padding: 14px 28px;
font-size: 15px;
align-items: center;
background: url("") #c8f025 50% no-repeat scroll;
font-family: Inter, sans-serif;
font-weight: 700;
white-space: nowrap;
border-radius: 999px;
justify-content: center;
text-decoration: none;
}
@media (max-width: 393px) {
.services-cta {
text-align: left;
}
}
.services-cta:hover {
background: #b8e020;
}
.services-cta[data-preview-state="hover"] {
background: #b8e020;
}
.services-tag {
color: #aaaaaa;
border: 1px solid #333333;
display: inline-flex;
padding: 5px 14px;
font-size: 12px;
align-items: center;
background: transparent;
font-family: Inter, sans-serif;
font-weight: 500;
border-radius: 999px;
justify-content: center;
background-color: rgba(34, 34, 34, 1);
}
@media (max-width: 991px) {
.services-tag {
background: url("") transparent 50% no-repeat scroll;
}
}
.text-block-1 {
color: rgba(255, 255, 255, 1);
font-size: 15px;
font-weight: 600;
}
@media (max-width: 768px) {
.text-block-1 {
font-size: 12px;
}
}
@media (max-width: 480px) {
.text-block-1 {
font-size: 14px;
}
}
.text-block-2 {
font-size: 13px;
font-weight: 700;
}
.text-block-3 {
font-size: 13px;
font-weight: 700;
}
.text-block-4 {
font-size: 13px;
font-weight: 700;
}
.text-block-5 {
font-size: 13px;
font-weight: 700;
}
.text-block-7 {
font-size: 13px;
font-weight: 700;
}
@media (max-width: 480px) {
.text-block-7 {
font-size: 13px;
}
}
@media (max-width: 480px) {
.text-block-8 {
font-size: 13px;
}
}
.why-subtitle {
color: #888888;
margin: 0;
font-size: 15px;
max-width: 480px;
font-family: Inter, sans-serif;
line-height: 1.65;
}
.font-sample-serif.ca-font-serif {
font-family: 'Lora', serif;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.font-sample-serif.cf-font-serif {
font-family: 'Playfair Display', serif;
}
.contacts-desc {
color: #888888;
margin: 0;
font-size: 15px;
max-width: 280px;
margin-top: 20px;
font-family: Inter, sans-serif;
line-height: 1.7;
}
.contacts-form {
gap: 16px;
display: flex;
flex-direction: column;
}
.contacts-icon {
width: 44px;
border: 1px solid #2a2a2a;
height: 44px;
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: 12px;
background-size: 18px 18px;
justify-content: center;
background-repeat: no-repeat;
background-position: center;
background-color: #1a1a1a;
}
.contacts-item {
gap: 16px;
display: flex;
align-items: center;
}
.contacts-left {
height: 100%;
display: flex;
padding: 56px 48px;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
background-color: #111111;
}
@media (max-width: 480px) {
.contacts-left {
padding: 40px 28px;
}
}
.contacts-list {
gap: 20px;
display: flex;
margin-top: auto;
flex-direction: column;
}
.extra-divider {
border: none;
margin: 20px 0;
border-top: 1px solid #e8e8e8;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
@media (min-width: 1440px) {
.faq-container {
display: block;
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
}
}
.faq-item-open {
border-top: 1px solid #e8e8e8;
}
.font-sample-serif.fw-font-serif {
font-style: italic;
font-family: 'Viaoda Libre', cursive;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
}
.hero-photo-bg {
top: 16%;
left: 55%;
width: 112%;
bottom: 11%;
height: auto;
z-index: 0;
position: absolute;
transform: translate3d(-50%, 0px, 0px);
background: linear-gradient(160deg, #d0f8fa 0%, #e8fad0 100%);
border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
@media (max-width: 991px) {
.hero-photo-bg {
width: 312px;
height: 406px;
overflow-x: hidden;
overflow-y: hidden;
}
}
@media (max-width: 768px) {
.hero-photo-bg {
width: 260px;
height: 338px;
}
}
@media (max-width: 480px) {
.hero-photo-bg {
top: 11%;
left: 49%;
width: 250px;
bottom: auto;
height: 336px;
}
}
@media (max-width: 393px) {
.hero-photo-bg {
top: 66px;
left: 187px;
right: 0px;
margin: 0px auto 0px auto;
display: block;
position: absolute;
}
}
@media (min-width: 1280px) {
.hero-photo-bg {
top: 6%;
width: 90%;
}
}
@media (min-width: 1440px) {
.hero-photo-bg {
top: 6%;
width: 96%;
}
}
.font-sample-serif.lh-font-serif {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
letter-spacing: 0.25em;
text-transform: uppercase;
}
.font-sample-serif.lp-font-serif {
font-size: 32px;
font-style: italic;
font-family: 'Great Vibes', cursive;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
}
.nav-logo-text {
color: #111111;
font-size: 20px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
}
.pf-btn-active {
color: #111111;
background: #c8f025;
}
.portfolio-cta {
width: 100%;
background: #111111;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.portfolio-cta {
background: url("") #111111 50% no-repeat scroll;
}
}
.pricing-badge {
color: #111111;
display: inline-block;
padding: 4px 10px;
font-size: 10px;
align-self: flex-start;
margin-top: 0;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 999px;
margin-bottom: 0;
text-transform: uppercase;
background-color: #c8f025;
}
.pricing-check {
color: #111111;
width: 20px;
height: 20px;
display: inline-flex;
font-size: 11px;
align-items: center;
flex-shrink: 0;
font-weight: 700;
border-radius: 50%;
justify-content: center;
background-color: #c8f025;
}
.pricing-label {
color: #888888;
width: auto;
display: inline-block;
padding: 8px 20px 8px 20px;
font-size: 11px;
align-items: center;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: 2px;
text-transform: uppercase;
justify-content: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #c8f025;
}
.pricing-price {
display: inline;
font-size: 36px;
align-items: center;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
white-space: nowrap;
letter-spacing: -2px;
justify-content: center;
}
.process-badge {
color: #111111;
width: 48px;
height: 48px;
display: inline-flex;
font-size: 20px;
align-items: center;
flex-shrink: 0;
font-family: Syne, sans-serif;
font-weight: 800;
border-radius: 12px;
justify-content: center;
background-color: #c8f025;
}
.process-cards {
gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.process-cards {
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.process-cards {
grid-template-columns: repeat(1, 1fr);
}
}
.process-label {
color: #888888;
display: block;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: 2px;
text-transform: uppercase;
}
.font-sample-serif.re-font-serif {
font-family: 'Inter', sans-serif;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
}
.services-card {
gap: 20px;
width: 100%;
border: 1px solid #2a2a2a;
display: flex;
padding: 32px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
background: #1a1a1a;
border-radius: 20px;
flex-direction: column;
}
@media (max-width: 991px) {
.services-card {
gap: 20px;
background: url("") #1a1a1a 50% no-repeat scroll;
}
}
@media (max-width: 768px) {
.services-card {
max-width: auto;
align-items: flex-start;
justify-content: center;
}
}
@media (max-width: 393px) {
.services-card {
order: 0;
width: auto;
margin: 0px 0px 0px 0px;
display: flex;
max-width: auto;
align-items: stretch;
justify-content: space-between;
}
}
.why-card-desc {
color: #666666;
margin: 0;
font-size: 13px;
font-family: Inter, sans-serif;
line-height: 1.7;
}
@media (max-width: 393px) {
.why-card-desc {
font-size: 13px;
text-align: left;
}
}
.why-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
@media (max-width: 991px) {
.why-container {
padding: 0 10px 0 10px;
}
}
.about-card-sub {
color: #888888;
font-size: 13px;
font-family: Inter, sans-serif;
}
.about-contacts {
gap: 20px;
margin: 0px auto 0px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 991px) {
.about-contacts {
gap: 5px;
margin: 0px auto 0px auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-items: center;
flex-direction: row;
justify-content: center;
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.about-contacts {
gap: 20px;
display: grid;
align-items: stretch;
justify-items: stretch;
flex-direction: column;
}
}
@media (max-width: 393px) {
.about-contacts {
gap: 15px;
width: 100%;
align-items: stretch;
justify-items: stretch;
grid-template-rows: repeat(1, auto);
grid-template-columns: repeat(1, 1fr);
}
}
.all-sec__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
.all-sec__label {
color: #888888;
margin: 0 0 20px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.blog-card-body {
display: flex;
padding: 20px 0 10px 0;
flex-grow: 1;
align-items: flex-start;
padding-top: 20px;
flex-direction: column;
}
.blog-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
.blog-hero__sub {
color: #888888;
margin: 0;
padding: 0;
font-size: 15px;
max-width: 480px;
font-family: Inter, sans-serif;
line-height: 1.6;
}
.blog-preview-1 {
background-color: #c8f025;
}
.blog-preview-2 {
background-color: #111111;
}
.blog-preview-3 {
background-color: #f0f0f0;
}
.client-avatars {
gap: 0px;
margin: 50px 0 0 10px;
display: flex;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 480px) {
.client-avatars {
margin: 90px 0 0 10px;
display: none;
align-items: center;
justify-content: center;
}
}
.contacts-field {
gap: 0;
display: flex;
flex-direction: column;
}
.contacts-input {
color: #111111;
width: 100%;
border: 1px solid #e0e0e0;
display: block;
padding: 14px 16px;
font-size: 15px;
box-sizing: border-box;
appearance: none;
font-family: Inter, sans-serif;
border-radius: 12px;
-webkit-appearance: none;
background-color: #ffffff;
}
.contacts-label {
color: #888888;
display: block;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.contacts-right {
padding: 56px 48px;
box-sizing: border-box;
background-color: #f5f5f5;
}
@media (max-width: 480px) {
.contacts-right {
padding: 40px 28px;
}
}
.div-block-left {
width: 70%;
display: block;
flex-direction: column;
}
@media (max-width: 768px) {
.div-block-left {
gap: 20px;
width: 50%;
display: block;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 480px) {
.div-block-left {
width: 100%;
display: flex;
padding: 0 10px 0 10px;
position: static;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
}
}
@media (min-width: 1440px) {
.div-block-left {
display: block;
}
}
.faq-sec__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.faq-sec__inner {
padding: 0 0px 0 0px;
}
}
@media (min-width: 1440px) {
.faq-sec__inner {
padding: 0 0px 0 0px;
}
}
.faq-sec__title {
color: #111111;
margin: 0 0 48px 0;
padding: 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.1;
}
.font-item-last {
margin-bottom: 0;
}
.portfolio-card {
display: flex;
overflow: hidden;
border-radius: 16px;
flex-direction: column;
background-color: #ffffff;
text-decoration: none;
}
@media (min-width: 1440px) {
.portfolio-card {
overflow-x: hidden;
overflow-y: hidden;
}
}
.portfolio-grid {
width: 100%;
padding: 48px 0;
background: #ffffff;
box-sizing: border-box;
}
.portfolio-hero {
width: 100%;
padding: 120px 0 48px;
background: #ffffff;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
.pricing-footer {
display: flex;
margin-top: 48px;
justify-content: center;
}
.pricing-header {
margin-bottom: 56px;
}
.process-header {
margin-bottom: 56px;
}
.proj-cta__btns {
gap: 16px;
display: flex;
flex-wrap: wrap;
margin-top: 40px;
align-items: center;
flex-direction: row;
}
@media (max-width: 768px) {
.proj-cta__btns {
justify-content: center;
align-items: center;
}
}
@media (max-width: 393px) {
.proj-cta__btns {
gap: 20px;
text-align: center;
justify-content: center;
align-items: center;
}
}
.proj-more-card {
display: flex;
overflow: hidden;
position: relative;
background: #ffffff;
box-sizing: border-box;
transition: transform 280ms ease, box-shadow 280ms ease;
border-radius: 20px;
flex-direction: column;
text-decoration: none;
}
@media (min-width: 1280px) {
.proj-more-card {
overflow-x: hidden;
overflow-y: hidden;
background: url("") #ffffff 50% no-repeat scroll;
}
}
.proj-more-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
.proj-more-card[data-preview-state="hover"] {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}
.proj-more__all {
color: #111111;
border: 1.5px solid #e0e0e0;
display: inline-flex;
padding: 10px 20px;
font-size: 14px;
background: #ffffff;
box-sizing: border-box;
transition: border-color 200ms ease, color 200ms ease;
align-items: center;
font-family: Inter, sans-serif;
font-weight: 600;
line-height: 1;
white-space: nowrap;
border-radius: 999px;
text-decoration: none;
}
.proj-more__all:hover {
color: #111111;
border-color: #111111;
}
.proj-more__all[data-preview-state="hover"] {
color: #111111;
border-color: #111111;
}
.proj-toc__link {
color: #bbbbbb;
padding: 6px 0;
font-size: 13px;
box-sizing: border-box;
transition: color 0.2s ease;
border-left: 2px solid transparent;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 1.3;
padding-left: 10px;
text-decoration: none;
}
.proj-toc__link:hover {
color: #111111;
}
.proj-toc__link[data-preview-state="hover"] {
color: #111111;
}
.scard__divider {
border: none;
margin: 0 0 20px 0;
border-top: 1px solid #f0f0f0;
}
.services-cards {
gap: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.services-cards {
align-items: center;
justify-items: center;
grid-template-columns: repeat(1, 1fr);
}
}
@media (max-width: 393px) {
.services-cards {
align-items: stretch;
justify-items: stretch;
}
}
.services-label {
color: #111111;
width: fit-content;
display: inline-block;
padding: 6px 16px;
font-size: 11px;
background: url("") #c8f025 50% no-repeat scroll;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 999px;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 393px) {
.services-label {
font-size: 10px;
}
}
.why-card-title {
color: #ffffff;
margin: 0;
font-size: 20px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.2;
}
@media (max-width: 393px) {
.why-card-title {
font-size: 16px;
text-align: left;
}
}
.about-card-name {
color: #111111;
font-size: 18px;
font-family: Syne, sans-serif;
font-weight: 700;
margin-bottom: 4px;
}
.about-photo-img {
width: 100%;
height: 100%;
z-index: 2;
display: block;
opacity: 1;
max-width: 100%;
position: relative;
object-fit: cover;
object-position: top;
background-color: rgba(0, 0, 0, 0.17);
}
@media (max-width: 768px) {
.about-photo-img {
width: 100%;
height: 100%;
}
}
.breadcrumb__sep {
color: #cccccc;
font-size: 13px;
font-family: Inter, sans-serif;
user-select: none;
}
.contacts-budget {
gap: 8px;
display: flex;
flex-wrap: wrap;
}
.contacts-select {
cursor: pointer;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
.contacts-submit {
color: #ffffff;
width: 100%;
border: none;
cursor: pointer;
display: block;
padding: 18px;
font-size: 16px;
box-sizing: border-box;
margin-top: 8px;
text-align: center;
font-family: Syne, sans-serif;
font-weight: 700;
border-radius: 12px;
background-color: #111111;
}
.div-block-right {
left: -8%;
width: 30%;
display: flex;
position: relative;
align-self: flex-end;
align-items: center;
justify-content: center;
}
@media (max-width: 991px) {
.div-block-right {
left: -10%;
}
}
@media (max-width: 768px) {
.div-block-right {
left: -8px;
width: 50%;
}
}
@media (max-width: 480px) {
.div-block-right {
left: auto;
width: 100%;
bottom: auto;
margin: 50px 0 0 0;
position: relative;
align-items: center;
justify-content: center;
}
}
.div_image.dop_1 {
width: 30px;
height: 30px;
background: url('../images/T8w1USnJoU_wordpress.svg') center / cover no-repeat scroll;
}
@media (max-width: 768px) {
.div_image.dop_1 {
width: 22px;
height: 22px;
}
}
.div_image.dop_2 {
width: 47px;
height: 29px;
margin: 0px auto 0px auto;
display: block;
background: url('../images/xYvqbQStI9_webflow.svg') center / cover no-repeat scroll;
}
@media (max-width: 768px) {
.div_image.dop_2 {
width: 30px;
height: 16px;
}
}
.faq-answer-text {
color: #888888;
margin: 0;
font-size: 15px;
font-family: Inter, sans-serif;
line-height: 1.7;
}
.fresh-card__btn {
color: #ffffff;
display: inline-block;
padding: 14px 24px;
font-size: 14px;
align-self: flex-start;
background: #111111;
transition: background 200ms ease, color 200ms ease;
font-family: Syne, sans-serif;
font-weight: 700;
border-radius: 999px;
text-decoration: none;
}
.fresh-card__btn:hover {
color: #111111;
background: #c8f025;
}
.fresh-card__btn[data-preview-state="hover"] {
color: #111111;
background: #c8f025;
}
.fresh-card__num {
left: 50%;
color: rgba(0, 0, 0, 0.1);
bottom: 20px;
position: absolute;
font-size: 120px;
transform: translateX(-50%);
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
user-select: none;
white-space: nowrap;
pointer-events: none;
}
.hero-photo-wrap {
width: 420px;
position: relative;
}
@media (max-width: 480px) {
.hero-photo-wrap {
left: auto;
}
}
@media (max-width: 393px) {
.hero-photo-wrap {
margin: 0px auto 0px auto;
display: block;
}
}
.hero-photo__img {
width: auto;
height: 113%;
max-width: 100%;
object-fit: contain;
object-position: bottom;
}
.nav-burger-line {
width: 22px;
height: 2px;
display: block;
background: #111111;
border-radius: 2px;
}
.nav-mobile-link {
color: #111111;
display: block;
padding: 14px 0;
font-size: 16px;
font-family: Inter, sans-serif;
font-weight: 600;
border-bottom: 1px solid #f5f5f5;
text-decoration: none;
}
.nav-mobile-link:hover {
color: #c8f025;
}
.nav-mobile-link[data-preview-state="hover"] {
color: #c8f025;
}
.nav-mobile-menu {
top: 64px;
left: 0;
width: 100%;
display: none;
padding: 16px 24px 24px;
z-index: 99;
position: absolute;
background: #ffffff;
border-top: 1px solid #f0f0f0;
box-sizing: border-box;
flex-direction: column;
}
@media (max-width: 768px) {
.nav-mobile-menu {
display: none;
background: url("") #ffffff 50% no-repeat scroll;
}
}
.portfolio-label {
color: #888888;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 16px;
letter-spacing: 2px;
text-transform: uppercase;
}
.price-hero__sub {
color: #888888;
margin: 0;
padding: 0;
font-size: 15px;
max-width: 480px;
font-family: Inter, sans-serif;
line-height: 1.7;
}
@media (max-width: 480px) {
.price-hero__sub {
font-size: 14px;
}
}
.pricing-all-btn {
color: #111111;
display: inline-flex;
padding: 14px 32px;
font-size: 14px;
align-items: center;
font-family: Inter, sans-serif;
font-weight: 600;
border-radius: 999px;
justify-content: center;
text-decoration: none;
background-color: #ffffff;
transition: background-color 200ms ease;
}
.pricing-all-btn:hover {
background-color: #c8f025;
}
.pricing-divider {
height: 0;
margin: 24px 0;
border-top: 1px solid transparent;
}
.pricing-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #111111;
}
@media (max-width: 480px) {
.pricing-section {
padding: 60px 20px;
}
}
.process-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #f5f5f5;
}
.proj-cta__inner {
margin: 0 auto;
padding: 96px 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.proj-cta__inner {
padding: 64px 20px;
}
}
.proj-cta__label {
color: #444444;
display: block;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 1;
margin-bottom: 20px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.proj-hero__desc {
color: #888888;
margin: 0;
padding: 0;
font-size: 16px;
max-width: 600px;
font-family: Inter, sans-serif;
line-height: 1.75;
}
@media (max-width: 480px) {
.proj-hero__desc {
font-size: 14px;
}
}
.proj-hero__meta {
gap: 0 48px;
display: flex;
padding: 28px 0;
flex-wrap: wrap;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
flex-direction: row;
}
@media (max-width: 480px) {
.proj-hero__meta {
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0 20px;
}
}
@media (max-width: 393px) {
.proj-hero__meta {
justify-content: center;
align-items: flex-start;
flex-direction: row;
padding: 0px 0 20px 0;
}
}
.proj-more__grid {
gap: 14px;
display: grid;
box-sizing: border-box;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 480px) {
.proj-more__grid {
grid-template-columns: 1fr;
}
}
.scard__btn-dark {
color: #111111;
background: #c8f025;
}
.scard__btn-dark:hover {
color: #111111;
background: #d4f535;
}
.scard__btn-dark[data-preview-state="hover"] {
color: #111111;
background: #d4f535;
}
.scard__sub-dark {
color: #555555;
}
.services-header {
gap: 40px;
display: flex;
align-items: flex-start;
margin-bottom: 48px;
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 480px) {
.services-header {
gap: 40px;
width: 100%;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
}
}
@media (max-width: 393px) {
.services-header {
gap: 20px;
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
}
.about-photo-wrap {
height: 420px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
border-radius: 16px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
@media (max-width: 768px) {
.about-photo-wrap {
height: 320px;
}
}
.blog-hero__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
.blog-hero__label {
color: #888888;
margin: 0 0 16px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.blog-hero__title {
color: #ffffff;
margin: 0 0 16px 0;
padding: 0;
font-size: 72px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
}
.breadcrumb__link {
color: #888888;
font-size: 13px;
transition: color 200ms ease;
font-family: Inter, sans-serif;
font-weight: 400;
white-space: nowrap;
text-decoration: none;
}
@media (max-width: 393px) {
.breadcrumb__link {
font-size: 11px;
}
}
.breadcrumb__link:hover {
color: #111111;
}
.breadcrumb__link[data-preview-state="hover"] {
color: #111111;
}
.contacts-h2-lime {
color: #c8f025;
display: block;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
}
@media (max-width: 480px) {
.contacts-h2-lime {
font-size: 36px;
}
}
.contacts-icon-tg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E");
}
.contacts-privacy {
color: #aaaaaa;
margin: 0;
font-size: 12px;
text-align: center;
font-family: Inter, sans-serif;
line-height: 1.5;
}
.contacts-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #f5f5f5;
}
@media (max-width: 480px) {
.contacts-section {
padding: 60px 20px;
}
}
.contacts-wrapper {
gap: 0;
width: 100%;
margin: 0 auto;
display: grid;
max-width: 1200px;
overflow: hidden;
border-radius: 24px;
grid-template-columns: 1fr 1.4fr;
}
@media (max-width: 991px) {
.contacts-wrapper {
grid-template-rows: auto auto;
grid-template-columns: 1fr;
}
}
.div-hero-clients {
gap: 12px;
margin: 0px 0 0 0;
display: block;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.div_icons.icon_2 {
background: url('../images/DZOZQZa785_envelope-svgrepo-com.svg') center / cover no-repeat scroll;
}
.div_icons.icon_3 {
background: url('../images/MEhSW8yZxY_telegram-logo-thin-svgrepo-com.svg') center / cover no-repeat scroll;
}
.div_icons.icon_4 {
width: 26px;
height: 26px;
max-width: auto;
background: url('../images/Xgoux6PB3z_Vector.svg') center / cover no-repeat scroll;
}
.extra-sec__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.extra-sec__inner {
padding: 0 0px 0 0px;
}
}
@media (min-width: 1440px) {
.extra-sec__inner {
padding: 0 0px 0 0px;
}
}
.extra-sec__label {
color: #888888;
margin: 0 0 20px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.faq-answer__text {
color: #888888;
margin: 0;
padding: 0 0 24px 0;
font-size: 15px;
font-family: Inter, sans-serif;
line-height: 1.7;
}
.font-sample-sans {
color: #888888;
margin: 0;
font-size: 15px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.5;
}
.fresh-card__date {
color: #888888;
margin: 0 0 24px 0;
padding: 0;
font-size: 13px;
font-family: Inter, sans-serif;
}
.fresh-card__desc {
color: #888888;
margin: 0 0 24px 0;
padding: 0;
font-size: 15px;
font-family: Inter, sans-serif;
line-height: 1.7;
}
.fresh-card__left {
position: relative;
background: #c8f025;
min-height: 400px;
}
@media (max-width: 480px) {
.fresh-card__left {
min-height: 240px;
}
}
.fresh-card__meta {
color: #888888;
margin: 0 0 16px 0;
padding: 0;
font-size: 12px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.fresh-sec__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
.fresh-sec__label {
color: #888888;
margin: 0 0 24px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.portfolio-footer {
width: 100%;
border-top: 1px solid #222222;
box-sizing: border-box;
margin-top: 80px;
}
.portfolio-grid-2 {
gap: 16px;
display: grid;
margin-bottom: 16px;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 991px) {
.portfolio-grid-2 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.portfolio-grid-2 {
grid-template-columns: 1fr;
}
}
.portfolio-grid-3 {
gap: 16px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
.portfolio-grid-3 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.portfolio-grid-3 {
grid-template-columns: 1fr;
}
}
.portfolio-header {
gap: 0px;
display: flex;
align-items: flex-end;
margin-bottom: 48px;
justify-content: space-between;
}
@media (max-width: 991px) {
.portfolio-header {
gap: 0px;
}
}
@media (max-width: 768px) {
.portfolio-header {
gap: 0px;
}
}
@media (max-width: 480px) {
.portfolio-header {
gap: 20px;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
}
}
@media (min-width: 1280px) {
.portfolio-header {
gap: 0px;
align-items: flex-end;
justify-content: space-between;
}
}
@media (min-width: 1440px) {
.portfolio-header {
gap: 0px;
align-items: flex-end;
justify-content: space-between;
}
}
.price-hero__line {
width: 488px;
height: 5px;
margin: 0 0 20px 0;
background: url("") #c8f025 50% no-repeat scroll;
border-radius: 2px;
border-top-left-radius: 999px;
border-top-right-radius: 999px;
border-bottom-left-radius: 999px;
border-bottom-right-radius: 999px;
}
@media (max-width: 991px) {
.price-hero__line {
width: 380px;
}
}
@media (max-width: 768px) {
.price-hero__line {
width: 283px;
}
}
@media (max-width: 480px) {
.price-hero__line {
width: 184px;
}
}
@media (max-width: 393px) {
.price-hero__line {
top: -33px;
width: 183px;
bottom: auto;
position: relative;
}
}
@media (min-width: 1280px) {
.price-hero__line {
width: 485px;
height: 10px;
background: url("") #c8f025 50% no-repeat scroll;
border-top-left-radius: 999px;
border-top-right-radius: 999px;
border-bottom-left-radius: 999px;
border-bottom-right-radius: 999px;
}
}
.pricing-subtitle {
color: #888888;
margin: 0;
font-size: 15px;
max-width: 480px;
font-family: Inter, sans-serif;
line-height: 1.65;
}
.process-subtitle {
color: #888888;
margin: 0;
font-size: 15px;
max-width: 520px;
font-family: Inter, sans-serif;
line-height: 1.65;
}
@media (max-width: 393px) {
.process-subtitle {
font-size: 13px;
font-family: Inter, sans-serif;
}
}
.proj-body__inner {
gap: 0 80px;
margin: 0 auto;
display: grid;
padding: 0 60px 120px;
max-width: 1200px;
box-sizing: border-box;
align-items: start;
grid-template-columns: 160px 1fr;
}
@media (max-width: 480px) {
.proj-body__inner {
gap: 40px 0;
padding: 0 20px 80px;
grid-template-columns: 1fr;
}
}
.proj-cta__accent {
color: #c8f025;
}
.proj-hero__inner {
gap: 32px;
margin: 0 auto;
display: flex;
padding: 64px 60px 72px;
max-width: 1200px;
box-sizing: border-box;
flex-direction: column;
}
@media (max-width: 480px) {
.proj-hero__inner {
padding: 40px 20px 48px;
}
}
.proj-hero__label {
color: #111111;
display: inline-block;
padding: 6px 14px;
font-size: 11px;
align-self: flex-start;
background: #c8f025;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1;
border-radius: 999px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (min-width: 1440px) {
.proj-hero__label {
background: url("") #c8f025 50% no-repeat scroll;
}
}
.proj-hero__title {
color: #111111;
margin: 0;
padding: 0;
font-size: 64px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
}
@media (max-width: 768px) {
.proj-hero__title {
font-family: Syne, sans-serif;
font-size: 42px;
}
}
@media (max-width: 480px) {
.proj-hero__title {
font-size: 36px;
font-size: 28px;
}
}
.proj-more__inner {
margin: 0 auto;
padding: 80px 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.proj-more__inner {
padding: 56px 20px;
}
}
.proj-more__title {
color: #111111;
margin: 0;
padding: 0;
font-size: 32px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
.proj-slider__btn {
top: 50%;
color: #111111;
width: 48px;
border: none;
cursor: pointer;
height: 48px;
display: flex;
padding: 0;
z-index: 10;
position: absolute;
font-size: 18px;
transform: translate3d(0px, -50%, 0px);
background: url("") #ffffff 50% no-repeat scroll;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
transition: background 200ms ease, color 200ms ease;
align-items: center;
line-height: 1;
border-radius: 50%;
justify-content: center;
}
.proj-slider__btn:hover {
color: #111111;
background: #c8f025;
}
.proj-slider__btn[data-preview-state="hover"] {
color: #111111;
background: #c8f025;
}
.proj-slider__dot {
width: 8px;
border: none;
cursor: pointer;
height: 8px;
padding: 0;
background: #dddddd;
transition: background 0.2s ease, transform 0.2s ease;
border-radius: 50%;
}
.scard__btn-light {
color: #111111;
background: #f5f5f5;
}
.scard__btn-light:hover {
color: #ffffff;
background: #111111;
}
.scard__btn-light[data-preview-state="hover"] {
color: #ffffff;
background: #111111;
}
.scard__from-dark {
color: #888888;
}
.scard__icon-wrap {
width: 48px;
height: 48px;
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: 12px;
margin-bottom: 16px;
justify-content: center;
}
.scard__item-dark {
color: #ffffff;
}
.scard__name-dark {
color: #888888;
}
.scard__price-row {
gap: 4px;
display: flex;
align-items: baseline;
margin-bottom: 4px;
flex-wrap: nowrap;
}
.services-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background: url("") #111111 50% no-repeat scroll;
}
.sites-sec__inner {
margin: 0 auto;
padding: 0 60px 0 60px;
max-width: 1200px;
max-width: 1200px;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.sites-sec__inner {
padding: 0 0px 0 0px;
}
}
@media (min-width: 1440px) {
.sites-sec__inner {
padding: 0 0px 0 0px;
}
}
.sites-sec__label {
color: #888888;
margin: 0 0 20px 0;
padding: 0 0 0 0px;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.stack-tag-accent {
color: #111111;
background: #c8f025;
}
.about-card-footer {
top: auto;
left: 0px;
right: 0px;
bottom: -15%;
margin: 0px 0 0px 0;
padding: 0px 0 15px 0;
position: absolute;
padding-top: 16px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
background-color: rgba(245, 245, 245, 1);
}
.about-card-header {
display: flex;
align-items: center;
margin-bottom: 16px;
justify-content: space-between;
}
@media (max-width: 480px) {
.about-card-header {
gap: 0px;
width: 100%;
}
}
.about-contact-btn {
gap: 8px;
color: #111111;
width: auto;
height: 41px;
display: flex;
padding: 10px 20px;
font-size: 13px;
align-items: center;
background: url("") #f5f5f5 50% no-repeat scroll;
font-family: Inter, sans-serif;
font-weight: 600;
border-radius: 999px;
flex-direction: row;
justify-content: center;
text-decoration: none;
}
.about-contact-btn:hover {
background: #c8f025;
}
.about-contact-btn[data-preview-state="hover"] {
background: #c8f025;
}
.about-right-label {
top: -67px;
left: 0px;
color: #888888;
margin: 0 0 24px 10px;
font-size: 11px;
position: absolute;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 14px;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 768px) {
.about-right-label {
top: 6px;
}
}
.all-filter-active {
color: #ffffff;
background: #111111;
}
.breadcrumb__inner {
gap: 10px;
margin: 0 auto;
display: flex;
padding: 20px 60px;
font-size: 13px;
max-width: 1200px;
box-sizing: border-box;
align-items: center;
font-family: Inter, sans-serif;
flex-direction: row;
}
@media (max-width: 480px) {
.breadcrumb__inner {
padding: 16px 20px;
}
}
@media (min-width: 1440px) {
.breadcrumb__inner {
padding: 20px 0px 20px 0px;
}
}
.ca-color-circle_1 {
background-color: #1A1A1A;
}
.ca-color-circle_2 {
background-color: #E8602C;
}
.ca-color-circle_3 {
background-color: #9DA89B;
}
.ca-color-circle_4 {
border: 1px solid #e0e0e0;
background-color: #FFFFFF;
}
.cf-color-circle_1 {
background-color: #1A1410;
}
.cf-color-circle_2 {
background-color: #8B6F47;
}
.cf-color-circle_3 {
background-color: #E8DDC8;
}
.cf-color-circle_4 {
border: 1px solid #e0e0e0;
background-color: #FFFFFF;
}
.contacts-form-row {
gap: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px) {
.contacts-form-row {
grid-template-columns: 1fr;
}
}
.contacts-form-sub {
color: #888888;
font-size: 14px;
margin-top: 0;
font-family: Inter, sans-serif;
margin-bottom: 32px;
}
.contacts-h2-white {
color: #ffffff;
display: block;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
}
@media (max-width: 480px) {
.contacts-h2-white {
font-size: 36px;
}
}
.contacts-left-top {
margin-bottom: 48px;
}
.contacts-textarea {
color: #111111;
width: 100%;
border: 1px solid #e0e0e0;
height: 120px;
resize: vertical;
padding: 14px 16px;
font-size: 15px;
box-sizing: border-box;
font-family: Inter, sans-serif;
line-height: 1.6;
border-radius: 12px;
background-color: #ffffff;
}
.faq-answer.active {
max-height: 1000px;
}
.font-sample-serif {
color: #111111;
margin: 0;
font-size: 26px;
font-family: Georgia, serif;
font-weight: 700;
line-height: 1.2;
}
.fresh-card__badge {
top: 16px;
left: 16px;
color: #ffffff;
padding: 6px 12px;
position: absolute;
font-size: 10px;
background: #111111;
font-family: Inter, sans-serif;
font-weight: 700;
border-radius: 999px;
letter-spacing: 1px;
text-transform: uppercase;
}
.fresh-card__right {
display: flex;
padding: 48px;
background: #ffffff;
box-sizing: border-box;
flex-direction: column;
justify-content: center;
}
.fresh-card__title {
color: #111111;
margin: 0 0 16px 0;
padding: 0;
font-size: 32px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.2;
}
.fw-color-circle_1 {
background-color: #FFA1AA;
}
.fw-color-circle_2 {
background-color: #D4F5F5;
}
.fw-color-circle_3 {
background-color: #3F3D40;
}
.fw-color-circle_4 {
border: 1px solid #ccc;
background-color: #E3E3E3;
}
.lh-color-circle_1 {
background-color: #2A2A2A;
}
.lh-color-circle_2 {
border: 1px solid #e0e0e0;
background-color: #F5F5F5;
}
.lh-color-circle_3 {
border: 1px solid #e0e0e0;
background-color: #FFFFFF;
}
.lh-color-circle_4 {
background-color: #8A8A8A;
}
.lp-color-circle_1 {
background-color: #1A2A4A;
}
.lp-color-circle_2 {
background-color: #8A8FE0;
}
.lp-color-circle_3 {
background-color: #C4A988;
}
.lp-color-circle_4 {
border: 1px solid #e0e0e0;
background-color: #FAF6F0;
}
.portfolio-all-btn {
color: #111111;
border: 1px solid #e0e0e0;
display: inline-flex;
padding: 20px 54px 20px 54px;
font-size: 14px;
align-items: center;
flex-shrink: 0;
font-family: Inter, sans-serif;
font-weight: 600;
white-space: nowrap;
border-radius: 999px;
justify-content: center;
text-decoration: none;
background-color: #ffffff;
}
@media (max-width: 480px) {
.portfolio-all-btn {
width: 100%;
margin: 40px 0 0 0;
display: none;
padding: 20px 54px 20px 54px;
text-align: center;
align-items: center;
justify-content: center;
}
}
@media (min-width: 1440px) {
.portfolio-all-btn {
padding: 20px 54px 20px 54px;
}
}
.portfolio-all-btn:hover {
background-color: #c8f025;
}
.portfolio-all-btn[data-preview-state="hover"] {
background-color: #c8f025;
}
.portfolio-filters {
width: 100%;
background: #ffffff;
border-top: 1px solid #e8e8e8;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
@media (max-width: 393px) {
.portfolio-filters {
background: url("") #ffffff 50% no-repeat scroll;
}
}
.portfolio-section {
width: 100%;
padding: 96px 60px;
box-sizing: border-box;
background-color: #f5f5f5;
}
.price-hero__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
.price-hero__label {
color: #888888;
margin: 0 0 16px 0;
padding: 0;
font-size: 11px;
font-size: 11px;
font-weight: 700;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (min-width: 1280px) {
.price-hero__label {
margin: 0 0 20px 0;
}
}
.price-hero__title {
color: #111111;
margin: 0 0 0px 0;
padding: 0;
font-size: 72px;
font-size: 72px;
font-family: Syne, sans-serif;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
}
@media (max-width: 991px) {
.price-hero__title {
font-size: 56px;
font-family: Syne, sans-serif;
}
}
@media (max-width: 768px) {
.price-hero__title {
font-size: 42px;
}
}
@media (max-width: 480px) {
.price-hero__title {
font-size: 28px;
}
}
@media (min-width: 1280px) {
.price-hero__title {
margin: 0 0 0px 0;
}
}
.pricing-btn-light {
color: #111111;
background-color: #f5f5f5;
}
.pricing-btn-light:hover {
background-color: #ebebeb;
}
.pricing-btn-light[data-preview-state="hover"] {
background-color: #ebebeb;
}
.pricing-card-dark {
border: 1px solid #333333;
margin-top: 0;
background-color: #111111;
}
@media (max-width: 480px) {
.pricing-card-dark {
margin-top: 0;
}
}
.pricing-card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
background: url('../images/QsV51ZJdX5_SVG.svg') center / cover no-repeat scroll;
flex-shrink: 0;
border-radius: 12px;
margin-bottom: 20px;
justify-content: center;
}
.pricing-card-name {
color: #888888;
font-size: 14px;
margin-top: 20px;
font-family: Inter, sans-serif;
margin-bottom: 8px;
}
.pricing-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
.pricing-list-item {
gap: 10px;
display: flex;
align-items: center;
}
.pricing-list-text {
font-size: 14px;
font-family: Inter, sans-serif;
}
.pricing-price-sub {
color: #888888;
margin: 6px 0 0 0;
font-size: 13px;
font-family: Inter, sans-serif;
margin-bottom: 0;
}
.process-card-desc {
color: #888888;
margin: 0;
font-size: 13px;
max-width: auto;
overflow-x: visible;
font-family: Inter, sans-serif;
line-height: 22.8px;
}
@media (max-width: 393px) {
.process-card-desc {
width: auto;
text-align: center;
}
}
.process-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
@media (max-width: 991px) {
.process-container {
padding: 0 10px 0 10px;
}
}
.proj-cta__heading {
color: #ffffff;
margin: 0;
padding: 0;
font-size: 48px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.proj-cta__heading {
text-align: left;
margin: 0px 0 0 0;
font-family: Syne, sans-serif;
font-size: 42px;
}
}
@media (max-width: 480px) {
.proj-cta__heading {
font-size: 28px;
}
}
@media (max-width: 393px) {
.proj-cta__heading {
font-size: 24px;
}
}
.proj-more__header {
display: flex;
align-items: center;
margin-bottom: 28px;
justify-content: space-between;
}
.proj-slider__dots {
gap: 8px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
.re-color-circle_1 {
background-color: #2D5BFF;
}
.re-color-circle_2 {
background-color: #D4F542;
}
.re-color-circle_3 {
border: 1px solid #e0e0e0;
background-color: #F0F2F8;
}
.re-color-circle_4 {
border: 1px solid #e0e0e0;
background-color: #FFFFFF;
}
.scard__price-dark {
color: #c8f025;
}
.services-card-num {
color: rgba(255, 255, 255, 0.07);
display: block;
font-size: 64px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
transition: color 0.18s ease;
}
.services-card:hover .services-card-num {
color: #c8f025;
}
@media (max-width: 480px) {
.services-card-num {
font-size: 54px;
}
}
@media (max-width: 393px) {
.services-card-num {
font-size: 36px;
}
}
.stages-sec__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.stages-sec__inner {
padding: 0 0px 0 0px;
}
}
@media (min-width: 1440px) {
.stages-sec__inner {
padding: 0 0px 0 0px;
}
}
.stages-sec__label {
color: #888888;
margin: 0 0 20px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.contacts-item-info {
gap: 3px;
display: flex;
flex-direction: column;
}
.design-card__label {
color: rgba(100, 100, 100, 1);
display: block;
font-size: 10px;
font-family: Inter, sans-serif;
font-weight: 500;
margin-bottom: 20px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (min-width: 1440px) {
.design-card__label {
color: rgba(119, 119, 119, 1);
font-size: 10px;
font-weight: 700;
}
}
.pc-large.pc__thumb {
aspect-ratio: 3/2;
}
.portfolio-card-img {
width: 100%;
display: block;
object-fit: cover;
background: url('../images/yiivBCJlUd__compressed.png') center / cover no-repeat scroll;
flex-shrink: 0;
aspect-ratio: 16/10;
background-color: #e8e8e8;
}
@media (min-width: 1440px) {
.portfolio-card-img {
background: url('../images/yiivBCJlUd__compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-sub {
color: #888888;
font-size: 13px;
font-family: Inter, sans-serif;
}
.portfolio-cta__btn {
width: 100%;
cursor: pointer;
display: block;
padding: 20px;
font-size: 16px;
box-sizing: border-box;
text-align: center;
transition: opacity 200ms ease;
font-family: Syne, sans-serif;
font-weight: 700;
border-radius: 999px;
text-decoration: none;
}
.portfolio-cta__sub {
color: #888888;
margin: 20px 0 0 0;
padding: 0;
font-size: 14px;
font-size: 15px;
max-width: 360px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.6;
}
.portfolio-sublabel {
color: #888888;
display: block;
font-size: 12px;
font-family: Inter, sans-serif;
font-weight: 700;
margin-bottom: 20px;
letter-spacing: 2px;
text-transform: uppercase;
}
.pricing-btn-accent {
color: #111111;
background-color: #c8f025;
}
.pricing-btn-accent:hover {
background-color: #b8e020;
}
.pricing-btn-accent[data-preview-state="hover"] {
background-color: #b8e020;
}
.pricing-card-light {
background-color: #ffffff;
}
.pricing-price-dark {
color: #c8f025;
}
.pricing-price-wrap {
gap: 6px;
display: flex;
flex-wrap: nowrap;
margin-top: 0;
align-items: baseline;
margin-bottom: 4px;
flex-direction: row;
}
.process-card-title {
color: #111111;
margin: 0;
font-size: 18px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.2;
}
@media (max-width: 393px) {
.process-card-title {
font-size: 16px;
text-align: center;
letter-spacing: 0px;
}
}
.proj-slider__slide {
gap: 12px;
width: 100%;
height: 100%;
display: flex;
min-width: 100%;
box-sizing: border-box;
align-items: center;
flex-shrink: 0;
flex-direction: column;
justify-content: center;
background: url('../images/yiivBCJlUd__compressed.png') 50% 50% / cover no-repeat scroll;
}
@media (max-width: 768px) {
.proj-slider__slide {
height: 100%;
}
}
.proj-slider__track {
width: 100%;
height: 100%;
display: flex;
transition: transform 400ms ease;
will-change: transform;
flex-direction: row;
}
.result-card__label {
color: #888888;
font-size: 12px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.4;
}
.services-card-desc {
color: #888888;
margin: 0;
flex-grow: 1;
font-size: 13px;
font-family: Inter, sans-serif;
line-height: 1.65;
}
@media (max-width: 393px) {
.services-card-desc {
margin: 0px auto 0px auto;
display: block;
font-size: 13px;
text-align: left;
}
}
.services-card-icon {
gap: 0px;
width: 52px;
height: 52px;
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: 14px;
justify-content: center;
background-color: #2a2a2a;
}
.services-card-tags {
gap: 5px;
display: flex;
flex-wrap: wrap;
max-width: auto;
margin-top: 4px;
align-items: center;
justify-content: flex-start;
}
@media (max-width: 991px) {
.services-card-tags {
align-items: center;
justify-content: center;
}
}
@media (max-width: 480px) {
.services-card-tags {
width: 100%;
}
}
.services-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
@media (max-width: 991px) {
.services-container {
padding: 0 10px 0 10px;
}
}
@media (max-width: 393px) {
.services-container {
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
}
}
.about-available-dot {
width: 8px;
height: 8px;
background: #22c55e;
flex-shrink: 0;
border-radius: 50%;
}
.breadcrumb__current {
color: #111111;
font-size: 13px;
font-family: Inter, sans-serif;
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 393px) {
.breadcrumb__current {
font-size: 11px;
}
}
.contacts-budget-btn {
color: #111111;
border: 1px solid #e0e0e0;
cursor: pointer;
padding: 10px 18px;
font-size: 14px;
box-sizing: border-box;
font-family: Inter, sans-serif;
font-weight: 500;
transition: background-color 0.2s, border-color 0.2s;
border-radius: 999px;
background-color: #ffffff;
}
.contacts-form-title {
color: #111111;
font-size: 24px;
margin-top: 0;
font-family: Syne, sans-serif;
font-weight: 700;
margin-bottom: 8px;
}
.contacts-icon-email {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
}
.contacts-icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.82a16 16 0 0 0 6.29 6.29l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}
.contacts-item-label {
color: #555555;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.contacts-item-value {
color: #ffffff;
font-size: 15px;
font-family: Inter, sans-serif;
font-weight: 600;
}
.lh-preview-flebolog {
background: linear-gradient(135deg, #e8f4f8 0%, #b8d9e8 100%);
}
.link-block-1.link_2 {
margin: 0 0 0 20px;
padding: 20px 30px 20px 30px;
border-top: 2px solid rgba(232, 232, 232, 1);
border-left: 2px solid rgba(232, 232, 232, 1);
border-right: 2px solid rgba(232, 232, 232, 1);
border-bottom: 2px solid rgba(232, 232, 232, 1);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #ffffff;
}
@media (max-width: 768px) {
.link-block-1.link_2 {
margin: 20px 0 0 20px;
font-size: 12px;
}
}
@media (max-width: 393px) {
.link-block-1.link_2 {
margin: 0px 0 0 20px;
}
}
.link-block-1.link_2:hover {
border-top: 2px solid #111111;
border-left: 2px solid #111111;
border-right: 2px solid #111111;
border-bottom: 2px solid #111111;
}
.link-block-1.link_2[data-preview-state="hover"] {
border-top: 2px solid #111111;
border-left: 2px solid #111111;
border-right: 2px solid #111111;
border-bottom: 2px solid #111111;
}
.portfolio-card-body {
padding: 16px 16px 8px 16px;
}
.portfolio-container {
width: 100%;
margin: 0 auto;
max-width: 1200px;
}
@media (max-width: 991px) {
.portfolio-container {
overflow-x: hidden;
overflow-y: hidden;
}
}
@media (max-width: 480px) {
.portfolio-container {
display: block;
align-items: stretch;
flex-direction: column;
justify-content: space-between;
}
}
.portfolio-cta__note {
color: #555555;
margin: 0;
padding: 0;
font-size: 13px;
text-align: center;
font-family: Inter, sans-serif;
}
.pricing-price-light {
color: #111111;
}
.proj-cta__btn-arrow {
color: #c8f025;
width: 28px;
height: 28px;
display: inline-flex;
font-size: 14px;
background: #111111;
align-items: center;
flex-shrink: 0;
line-height: 1;
border-radius: 50%;
justify-content: center;
}
.proj-hero__meta-col {
gap: 6px;
display: flex;
flex-direction: column;
}
@media (max-width: 480px) {
.proj-hero__meta-col {
justify-content: center;
align-items: center;
}
}
@media (max-width: 393px) {
.proj-hero__meta-col {
gap: 1px;
margin: 20px 0 0 0;
}
}
.proj-more-card__cat {
color: #111111;
display: inline-flex;
padding: 5px 12px;
font-size: 10px;
background: rgba(255, 255, 255, 0.85);
align-items: center;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1;
border-radius: 999px;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.proj-more-card__sub {
color: #888888;
font-size: 12px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.3;
}
.result-card__accent {
color: #c8f025;
}
.result-card__number {
color: #111111;
font-size: 40px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.result-card__number {
font-family: Syne, sans-serif;
}
}
.scard__divider-dark {
border-top: 1px solid #222222;
}
.services-card-title {
color: #ffffff;
margin: 0;
display: block;
font-size: 20px;
text-align: left;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.2;
}
@media (max-width: 480px) {
.services-card-title {
font-size: 15px;
}
}
@media (max-width: 393px) {
.services-card-title {
font-size: 16px;
}
}
.svg-image-1.image_2 {
display: none;
}
.text-block-1.text_2 {
color: #111111;
font-size: 15px;
font-weight: 600;
}
@media (max-width: 768px) {
.text-block-1.text_2 {
font-size: 12px;
}
}
.about-available-pill {
gap: 6px;
top: 0%;
left: 73%;
right: auto;
width: 40%;
border: 1px solid #f0f0f0;
bottom: auto;
height: 8%;
z-index: 3;
display: flex;
padding: 6px 14px;
position: absolute;
box-shadow: 0px 0px 0px 0px none;
transform: rotate(20deg);
align-items: center;
background: url("") #ffffff 50% no-repeat scroll;
border-radius: 999px;
justify-content: center;
}
@media (max-width: 768px) {
.about-available-pill {
top: -1%;
left: 71%;
height: 10%;
transform: rotate(17deg);
}
}
@media (max-width: 480px) {
.about-available-pill {
top: 0px;
left: 214px;
right: auto;
bottom: auto;
}
}
@media (max-width: 393px) {
.about-available-pill {
top: -2px;
left: 206px;
}
}
.about-available-text {
color: #111111;
font-size: 13px;
text-align: left;
font-family: Inter, sans-serif;
font-weight: 700;
}
.about-photo-gradient {
inset: 0;
z-index: 1;
position: absolute;
background: linear-gradient(180deg, rgba(200, 240, 37, 0.3) 0%, rgba(200, 240, 37, 0.6) 100%);
pointer-events: none;
}
.lh-preview-rocinante {
background: linear-gradient(135deg, #2c1a0e 0%, #6b3a1f 100%);
}
.portfolio-card-title {
color: #111111;
font-size: 16px;
font-family: Syne, sans-serif;
font-weight: 700;
margin-bottom: 4px;
}
.portfolio-cta__inner {
gap: 80px;
margin: 0 auto;
display: grid;
padding: 80px 60px 80px;
max-width: 1200px;
box-sizing: border-box;
align-items: center;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px) {
.portfolio-cta__inner {
gap: 40px;
padding: 60px 20px 60px;
grid-template-columns: 1fr;
}
}
@media (min-width: 1440px) {
.portfolio-cta__inner {
padding: 80px 0px 80px 0px;
}
}
.portfolio-cta__right {
gap: 12px;
display: flex;
flex-direction: column;
}
@media (min-width: 1280px) {
.portfolio-cta__right {
gap: 20px;
}
}
@media (min-width: 1440px) {
.portfolio-cta__right {
gap: 20px;
}
}
.portfolio-subsection {
width: 100%;
}
.pricing-card-top-row {
display: flex;
align-items: flex-start;
margin-bottom: 0;
flex-direction: row;
justify-content: space-between;
}
.pricing-divider-dark {
border-top-color: #2a2a2a;
}
.proj-hero__meta-link {
color: #111111;
font-size: 14px;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1.2;
text-decoration: underline;
text-underline-offset: 3px;
}
.proj-hero__meta-link:hover {
color: #111111;
text-decoration-color: #c8f025;
}
.proj-hero__meta-link[data-preview-state="hover"] {
color: #111111;
text-decoration-color: #c8f025;
}
.proj-more-card__body {
gap: 4px;
flex: 1;
display: flex;
padding: 16px 18px 18px;
flex-direction: column;
}
.proj-more-card__name {
color: #111111;
font-size: 16px;
font-family: Syne, sans-serif;
font-weight: 700;
line-height: 1.2;
}
.proj-slider__counter {
color: #ffffff;
right: 16px;
bottom: 16px;
padding: 5px 10px;
z-index: 10;
position: absolute;
font-size: 11px;
background: url("") rgba(0, 0, 0, 0.45) 50% no-repeat scroll;
font-family: Inter, sans-serif;
font-weight: 600;
line-height: 1;
border-radius: 999px;
letter-spacing: 0.04em;
pointer-events: none;
}
.proj-slider__slide-2 {
background: linear-gradient(135deg, #6abf4b 0%, #c8e63a 100%);
}
.proj-slider__slide-3 {
background: linear-gradient(135deg, #8b5e3c 0%, #d4a96a 100%);
}
.proj-slider__slide-4 {
background: linear-gradient(135deg, #e07b39 0%, #7ab648 100%);
}
.sec__img-placeholder {
width: 100%;
border: 1.5px dashed #dddddd;
height: 320px;
display: flex;
background: url('../images/G2Ja3LSR46_Group164_compressed.webp') 50% 50% / cover no-repeat scroll;
box-sizing: border-box;
margin-top: 32px;
align-items: center;
border-radius: 20px;
justify-content: center;
}
@media (max-width: 768px) {
.sec__img-placeholder {
height: 300px;
}
}
@media (max-width: 393px) {
.sec__img-placeholder {
height: 210px;
}
}
.services-header-desc {
color: #888888;
margin: 0px auto 0px auto;
display: block;
font-size: 14px;
text-align: right;
font-family: Inter, sans-serif;
line-height: 01.px;
letter-spacing: 0px;
}
@media (max-width: 480px) {
.services-header-desc {
text-align: left;
}
}
@media (max-width: 393px) {
.services-header-desc {
text-align: left;
}
}
.services-header-left {
gap: 25px;
display: flex;
flex-direction: column;
}
@media (max-width: 991px) {
.services-header-left {
gap: 26px;
}
}
@media (max-width: 480px) {
.services-header-left {
gap: 22px;
}
}
@media (max-width: 393px) {
.services-header-left {
gap: 15px;
order: 0;
align-items: flex-start;
justify-content: center;
}
}
.contacts-privacy-link {
color: #888888;
text-decoration: underline;
}
.pc__thumb.pc__thumb_1 {
background: url('../images/3Y9Tzjt2Qc_Frame132_compressed.png') center / cover no-repeat scroll;
}
.pc__thumb.pc__thumb_2 {
background: url('../images/6QmzL1VMEC_Slice10_compressed.png') center / cover no-repeat scroll;
}
.pc__thumb.pc__thumb_3 {
background: url('../images/sp7fjA3xFa_Slice1_compressed.png') center / cover no-repeat scroll;
}
.pc__thumb.pc__thumb_4 {
background: url('../images/w12Q8eEusy_2_compressed.png') center / cover no-repeat scroll;
}
.pc__thumb.pc__thumb_5 {
background: url('../images/5ejjP7K1dk_IMG_20260120_174231_055_compressed.png') center / cover no-repeat scroll;
}
.pc__thumb.pc__thumb_6 {
background: url('../images/MKC62A82BE_Desktop-2_compressed.png') center / cover no-repeat scroll;
}
.pc__thumb.pc__thumb_7 {
background: url('../images/HQ7JFJK8Wc__compressed.png') center / cover no-repeat scroll;
}
.portfolio-card-img._2 {
background: url('../images/3Y9Tzjt2Qc_Frame132_compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._2 {
background: url('../images/3Y9Tzjt2Qc_Frame132_compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-img._3 {
background: url('../images/6QmzL1VMEC_Slice10_compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._3 {
background: url('../images/6QmzL1VMEC_Slice10_compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-img._4 {
background: url('../images/sp7fjA3xFa_Slice1_compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._4 {
background: url('../images/sp7fjA3xFa_Slice1_compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-img._5 {
background: url('../images/w12Q8eEusy_2_compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._5 {
background: url('../images/w12Q8eEusy_2_compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-img._6 {
background: url('../images/5ejjP7K1dk_IMG_20260120_174231_055_compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._6 {
background: url('../images/5ejjP7K1dk_IMG_20260120_174231_055_compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-img._7 {
background: url('../images/MKC62A82BE_Desktop-2_compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._7 {
background: url('../images/MKC62A82BE_Desktop-2_compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-card-img._8 {
background: url('../images/HQ7JFJK8Wc__compressed.png') center / cover no-repeat scroll;
}
@media (min-width: 1440px) {
.portfolio-card-img._8 {
background: url('../images/HQ7JFJK8Wc__compressed.png') center / cover no-repeat scroll;
}
}
.portfolio-grid__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.portfolio-grid__inner {
padding: 0 20px;
}
}
.portfolio-header-left {
display: flex;
flex-direction: column;
}
.portfolio-hero__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.portfolio-hero__inner {
padding: 0 20px;
}
}
.portfolio-hero__label {
color: #888888;
margin: 0 0 16px 0;
padding: 0;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.portfolio-hero__title {
color: #111111;
margin: 0 0 16px 0;
padding: 0;
font-size: 72px;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
}
@media (max-width: 768px) {
.portfolio-hero__title {
font-size: 56px;
font-family: Syne, sans-serif;
}
}
@media (max-width: 480px) {
.portfolio-hero__title {
font-size: 42px;
font-size: 48px;
}
}
@media (max-width: 393px) {
.portfolio-hero__title {
font-size: 28px;
}
}
.pricing-divider-light {
border-top-color: #e8e8e8;
}
.proj-cta__btn-primary {
gap: 10px;
color: #111111;
display: inline-flex;
padding: 16px 28px;
font-size: 15px;
background: #c8f025;
box-sizing: border-box;
transition: opacity 200ms ease;
align-items: center;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1;
border-radius: 999px;
text-decoration: none;
}
.proj-cta__btn-primary:hover {
opacity: 0.85;
}
.proj-cta__btn-primary[data-preview-state="hover"] {
opacity: 0.85;
}
.proj-hero__meta-label {
color: #bbbbbb;
font-size: 10px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.proj-hero__meta-value {
color: #111111;
font-size: 14px;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 1.2;
}
.proj-more-card__arrow {
color: #ffffff;
right: 16px;
width: 32px;
bottom: 16px;
height: 32px;
display: flex;
opacity: 0;
position: absolute;
font-size: 14px;
background: #111111;
transition: opacity 220ms ease;
align-items: center;
line-height: 1;
border-radius: 50%;
pointer-events: none;
justify-content: center;
}
.proj-slider__btn-next {
right: 20px;
}
@media (max-width: 480px) {
.proj-slider__btn-next {
right: 8px;
}
}
.proj-slider__btn-prev {
left: 20px;
}
@media (max-width: 480px) {
.proj-slider__btn-prev {
left: 8px;
}
}
.proj-slider__viewport {
width: 100%;
height: 520px;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
box-sizing: border-box;
border-radius: 24px;
}
@media (max-width: 768px) {
.proj-slider__viewport {
height: 420px;
}
}
@media (max-width: 480px) {
.proj-slider__viewport {
height: 275px;
}
}
.proj-toc__link-active {
color: #111111;
font-weight: 600;
border-left-color: #c8f025;
}
.scard__icon-wrap-dark {
color: #c8f025;
background: #1a1a1a;
}
.services-header-right {
gap: 20px;
margin: 0px 0 0 0;
display: flex;
padding: 0px 0 0 0;
max-width: 320px;
align-items: flex-end;
padding-top: 8px;
flex-direction: column;
justify-content: flex-start;
}
@media (max-width: 480px) {
.services-header-right {
gap: 20px;
align-items: flex-start;
justify-content: center;
}
}
@media (max-width: 393px) {
.services-header-right {
order: 0;
text-align: left;
align-items: flex-start;
justify-content: center;
}
}
.portfolio-cta__heading {
color: #ffffff;
margin: 0 0 0 0;
padding: 0;
font-size: 42px;
font-size: 56px;
font-family: Syne, sans-serif;
font-family: Syne, sans-serif;
font-weight: 800;
line-height: 1.05;
}
@media (max-width: 991px) {
.portfolio-cta__heading {
font-size: 41px;
}
}
@media (max-width: 768px) {
.portfolio-cta__heading {
font-size: 29px;
}
}
@media (max-width: 480px) {
.portfolio-cta__heading {
font-size: 36px;
}
}
.portfolio-filters__bar {
gap: 8px;
display: flex;
flex-wrap: wrap;
padding-top: 32px;
margin-bottom: 48px;
}
@media (max-width: 480px) {
.portfolio-filters__bar {
gap: 15px;
align-items: center;
justify-content: center;
}
}
@media (max-width: 393px) {
.portfolio-filters__bar {
gap: 15px;
align-items: center;
justify-content: center;
}
}
.portfolio-footer__copy {
color: #555555;
font-size: 13px;
font-family: Inter, sans-serif;
}
.portfolio-footer__link {
color: #555555;
font-size: 13px;
transition: color 200ms ease;
font-family: Inter, sans-serif;
text-decoration: none;
}
.portfolio-footer__link:hover {
color: #ffffff;
}
.portfolio-footer__link[data-preview-state="hover"] {
color: #ffffff;
}
.pricing-card-icon-dark {
background: url('../images/YeouxcWSEP_SVG1.svg') center / cover no-repeat scroll;
margin-bottom: 20px;
background-color: #1a1a1a;
}
.pricing-card-name-dark {
color: #888888;
font-size: 14px;
margin-top: 20px;
font-family: Inter, sans-serif;
margin-bottom: 8px;
}
.pricing-list-text-dark {
color: #ffffff;
}
.re-preview-luxuryhouse {
background: linear-gradient(135deg, #2D5BFF 0%, #6B8CFF 60%, #B8C8F8 100%);
}
.scard__icon-wrap-light {
color: #111111;
background: #f5f5f5;
}
.portfolio-footer__inner {
margin: 0 auto;
display: flex;
padding: 24px 60px;
max-width: 1200px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
@media (max-width: 480px) {
.portfolio-footer__inner {
gap: 16px;
padding: 24px 20px;
text-align: center;
flex-direction: column;
}
}
.portfolio-footer__links {
gap: 24px;
display: flex;
align-items: center;
}
.pricing-card-icon-light {
background: url('../images/8EyWipCMg3_SVG4.svg') center / cover no-repeat scroll;
background-color: #f5f5f5;
}
.pricing-list-text-light {
color: #111111;
}
.proj-cta__btn-secondary {
color: #444444;
border: 2px solid #222222;
display: inline-flex;
padding: 15px 26px;
font-size: 15px;
background: transparent;
box-sizing: border-box;
transition: color 200ms ease, border-color 200ms ease;
align-items: center;
font-family: Inter, sans-serif;
font-weight: 600;
line-height: 1;
border-radius: 999px;
text-decoration: none;
}
.proj-cta__btn-secondary:hover {
color: #ffffff;
border-color: #888888;
}
.proj-cta__btn-secondary[data-preview-state="hover"] {
color: #ffffff;
border-color: #888888;
}
.proj-more-card__preview {
width: 100%;
height: 200px;
display: flex;
padding: 16px;
position: relative;
box-sizing: border-box;
align-items: flex-start;
}
.proj-slider__dot-active {
transform: scale(1.2);
background: #111111;
}
.proj-slider__slide-icon {
color: rgba(0, 0, 0, 0.25);
width: 32px;
height: 32px;
display: block;
}
.portfolio-filters__inner {
margin: 0 auto;
padding: 0 60px;
max-width: 1200px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.portfolio-filters__inner {
padding: 0 20px;
}
}
.portfolio-hero__subtitle {
color: #888888;
margin: 0;
padding: 0;
font-size: 15px;
max-width: 480px;
font-family: Inter, sans-serif;
font-weight: 400;
line-height: 1.6;
}
@media (max-width: 480px) {
.portfolio-hero__subtitle {
font-size: 14px;
}
}
@media (max-width: 393px) {
.portfolio-hero__subtitle {
font-size: 14px;
}
}
.lh-preview-coffee-factory {
background: linear-gradient(135deg, #1a1a1a 0%, #4a3728 100%);
}
.proj-more-card__preview-1 {
background: linear-gradient(135deg, #b8d4f0 0%, #7aaee8 100%);
}
.proj-more-card__preview-2 {
background: linear-gradient(135deg, #f5a623 0%, #f7c948 100%);
}
.proj-more-card__preview-3 {
background: linear-gradient(135deg, #c8c8c8 0%, #e8e0d0 100%);
}
.sec__img-placeholder-text {
color: #cccccc;
padding: 0 24px;
font-size: 13px;
text-align: center;
font-family: Inter, sans-serif;
font-weight: 400;
letter-spacing: 0.01em;
}
.portfolio-cta__btn-primary {
color: #111111;
border: none;
background: #c8f025;
}
.portfolio-cta__btn-primary:hover {
opacity: 0.88;
}
.portfolio-cta__btn-primary[data-preview-state="hover"] {
opacity: 0.88;
}
.proj-slider__slide-caption {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-family: Inter, sans-serif;
font-weight: 500;
letter-spacing: 0.01em;
}
.color-circle.color-circle_2 {
background-color: #7CB342;
}
@media (min-width: 1440px) {
.color-circle.color-circle_2 {
background-color: #3DBFAD;
}
}
.color-circle.color-circle_3 {
background-color: #F5E050;
}
@media (min-width: 1440px) {
.color-circle.color-circle_3 {
background-color: #F0F8F7;
}
}
.color-circle.color-circle_4 {
background-color: #4A3424;
}
@media (min-width: 1440px) {
.color-circle.color-circle_4 {
background-color: #FFFFFF;
}
}
.portfolio-all-btn.all-btn_2 {
display: none;
}
@media (max-width: 480px) {
.portfolio-all-btn.all-btn_2 {
display: block;
}
}
.portfolio-sublabel-concepts {
margin-top: 48px;
}
.portfolio-cta__btn-secondary {
color: #ffffff;
border: 1px solid #333333;
background: transparent;
}
.portfolio-cta__btn-secondary:hover {
border-color: #555555;
}
.portfolio-cta__btn-secondary[data-preview-state="hover"] {
border-color: #555555;
}
.portfolio-cta__heading-accent {
color: #c8f025;
}
.client-avatars.client-avatars_2 {
display: none;
}
@media (max-width: 480px) {
.client-avatars.client-avatars_2 {
display: flex;
}
}
.proj-slider__slide.proj-slider__slide_Corokina {
background: url('../images/lJmhN3ZAn1_Frame1000006980_compressed.png') center / cover no-repeat scroll;
}
.proj-slider__slide.proj-slider__slide_Corokina_1 {
background: url('../images/poSX5juqI6_Frame1000006982_compressed.png') center / cover no-repeat scroll;
}
.proj-slider__slide.proj-slider__slide_Corokina_2 {
background: url('../images/9pXTIfmweb_Group138_compressed.webp') center / cover no-repeat scroll;
}
.proj-scroll-preview {
width: 100%;
border: 1.5px dashed #dddddd;
height: 320px;
display: flex;
background: url('../images/WgrsGlB78O_hero020_compressed.webp') 50% 50% / cover no-repeat scroll;
box-sizing: border-box;
margin-top: 32px;
align-items: center;
border-radius: 20px;
justify-content: center;
}
@media (max-width: 768px) {
.proj-scroll-preview {
background: url('../images/WgrsGlB78O_hero020_compressed.webp') 45% 50% / cover no-repeat scroll;
height: 300px;
}
}
@media (max-width: 393px) {
.proj-scroll-preview {
height: 210px;
}
}
html {
width: 100%;
scrollbar-width: thin;
scrollbar-color: #4b5563 #111111;
}
body {
margin: 0;
width: 100%;
font-family: 'Syne', sans-serif;
scrollbar-width: thin;
scrollbar-color: #4b5563 #111111;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #111111;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
/* Дополнительные шрифтовые классы для секции "Дизайн" (флеболог и Rocinante) */
.font-sample-serif.fl-font-serif {
font-size: 26px;
font-family: 'Playfair Display', serif;
}
.font-sample-sans.fl-font-sans {
font-size: 15px;
font-family: 'Manrope', sans-serif;
}
.font-sample-serif.rc-font-serif {
font-size: 26px;
font-family: 'Raleway', sans-serif;
}
.font-sample-sans.rc-font-sans {
font-size: 15px;
font-family: 'Nunito', sans-serif;
}
/* ===== Общий футер сайта (одна строка) ===== */
.site-footer {
background: #0d0d0d;
padding: 28px 24px;
color: #a0a0a0;
}
.site-footer__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.site-footer__nav {
display: flex;
align-items: center;
gap: 12px;
}
.site-footer__nav a {
color: #a0a0a0;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
}
.site-footer__nav a:hover {
color: #c8f025;
}
.site-footer__nav a:not(:last-child) {
position: relative;
padding-right: 12px;
}
.site-footer__nav a:not(:last-child)::after {
content: '|';
position: absolute;
right: -3px;
color: #444444;
}
.site-footer__logo {
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
order: 2;
}
.site-footer__logo-text {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 26px;
color: #ffffff;
}
.site-footer__logo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #c8f025;
display: inline-block;
}
.site-footer__privacy {
color: #a0a0a0;
font-size: 14px;
text-decoration: underline;
order: 3;
}
@media (max-width: 767px) {
.site-footer__inner {
flex-direction: column;
text-align: center;
}
.site-footer__logo {
order: 0;
}
.site-footer__nav {
order: 1;
flex-wrap: wrap;
justify-content: center;
}
.site-footer__privacy {
order: 2;
}
}
/* ===== Блог: архив /blog ===== */
.blog-archive-hero {
width: 100%;
padding: 160px 60px 60px;
box-sizing: border-box;
background: #ffffff;
}
.blog-archive-hero__inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.blog-archive-hero__label {
color: #8a8a8a;
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
margin: 0 0 16px;
}
.blog-archive-hero__title {
color: #111111;
font-family: Syne, sans-serif;
font-weight: 800;
font-size: 48px;
line-height: 1.1;
margin: 0 0 16px;
}
.blog-archive-hero__sub {
color: #666666;
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.blog-archive-section {
padding-top: 0;
}
.blog-empty {
text-align: center;
padding: 60px 20px;
color: #888888;
font-family: Inter, sans-serif;
font-size: 16px;
}
.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 48px;
}
.blog-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 999px;
background: #f5f5f5;
color: #111111;
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
box-sizing: border-box;
transition: background-color 0.15s ease;
}
.blog-pagination__link:hover {
background: #c8f025;
}
.blog-pagination__link.is-current {
background: #111111;
color: #ffffff;
}
.blog-pagination__link.is-dots {
background: transparent;
cursor: default;
}
@media (max-width: 480px) {
.blog-archive-hero {
padding: 120px 20px 40px;
}
.blog-archive-hero__title {
font-size: 32px;
}
}
/* ===== Блог: отдельная статья ===== */
.blog-post__hero {
width: 100%;
padding: 40px 60px 60px;
box-sizing: border-box;
background: #ffffff;
}
.blog-post__hero-inner {
max-width: 760px;
margin: 0 auto;
}
.blog-post__badge {
display: inline-flex;
padding: 6px 14px;
border-radius: 999px;
background: #c8f025;
color: #111111;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 20px;
}
.blog-post__title {
color: #111111;
font-family: Syne, sans-serif;
font-weight: 800;
font-size: 40px;
line-height: 1.2;
margin: 0 0 16px;
}
.blog-post__meta {
color: #8a8a8a;
font-family: Inter, sans-serif;
font-size: 14px;
margin: 0;
}
.blog-post__cover {
width: 100%;
max-width: 900px;
height: 420px;
margin: 0 auto 60px;
border-radius: 20px;
background-color: #f0f0f0;
background-size: cover;
background-position: center;
box-sizing: border-box;
cursor: zoom-in;
}
.blog-post__content {
max-width: 760px;
margin: 0 auto;
padding: 0 60px 80px;
box-sizing: border-box;
font-family: Inter, sans-serif;
font-size: 17px;
line-height: 1.75;
color: #333333;
}
.blog-post__content h2 {
font-family: Syne, sans-serif;
font-weight: 700;
font-size: 28px;
color: #111111;
margin: 48px 0 16px;
}
.blog-post__content h2:first-child {
margin-top: 0;
}
.blog-post__content h3 {
font-family: Syne, sans-serif;
font-weight: 700;
font-size: 22px;
color: #111111;
margin: 36px 0 14px;
}
.blog-post__content p {
margin: 0 0 20px;
}
.blog-post__content ul,
.blog-post__content ol {
margin: 0 0 20px;
padding-left: 24px;
}
.blog-post__content li {
margin-bottom: 8px;
}
.blog-post__content img {
max-width: 100%;
height: auto;
border-radius: 16px;
margin: 24px 0;
}
.blog-post__content a {
color: #111111;
text-decoration: underline;
text-decoration-color: #c8f025;
text-decoration-thickness: 2px;
}
.blog-post__content blockquote {
margin: 32px 0;
padding: 20px 24px;
border-left: 3px solid #c8f025;
background: #f8f8f8;
border-radius: 0 12px 12px 0;
font-style: italic;
color: #444444;
}
.blog-post__content strong {
color: #111111;
}
.blog-related-section {
background: #f5f5f5;
padding: 80px 60px;
}
.blog-related-title {
color: #111111;
font-family: Syne, sans-serif;
font-weight: 800;
font-size: 28px;
margin: 0 0 32px;
text-align: center;
}
@media (max-width: 768px) {
.blog-post__hero {
padding: 24px 20px 40px;
}
.blog-post__title {
font-size: 28px;
}
.blog-post__cover {
height: 240px;
margin-bottom: 40px;
border-radius: 12px;
}
.blog-post__content {
padding: 0 20px 56px;
font-size: 16px;
}
.blog-related-section {
padding: 56px 20px;
}
}