.service__banner__inner {
background-color: #F7F6F4;
border-radius: 24px;
padding: 35px 48px 48px 65px;
display: flex;
align-items: stretch;
gap: 20px;
margin-top: 80px;
justify-content: space-between;
}
.service__banner__img {
width: 50%;
height: auto;
border-radius: 30px;
overflow: hidden;
}
.service__banner__content {
display: flex;
flex-direction: column;
align-items: start;
padding: 7px 0 17px;
}
.service__banner__subtitle {
text-wrap: balance;
color: var(--green);
font-size: 35px;
line-height: 1.2;
font-weight: 500;
font-family: 'Inter';
margin-bottom: 36px;
letter-spacing: -0.05em;
}
.service__banner__text {
font-size: 18px;
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.04em;
color: #5a5a5a;
font-family: 'Inter';
margin-bottom: 55px;
}
.service__banner__text li:before {
content: '- ';
}
.service__banner__text li {
margin-bottom: 11px;
}
.service__banner__text>* {
margin-bottom: 20px;
}
.service__banner__price {
font-size: 35px;
line-height: 1.2;
font-weight: 500;
letter-spacing: -0.05em;
color: var(--green);
text-transform: uppercase;
margin-bottom: 36px;
font-family: 'Inter';
margin-top: auto;
}
.service__banner__price small {
text-decoration: line-through;
opacity: 0.5;
}
.service__banner__button {
margin-top: 0;
font-family: 'Inter';
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--green);
border: 1px solid var(--green);
background-color: transparent;
border-radius: 44px;
padding: 23px 80px;
text-align: center;
}
.service__banner__button:hover {
color: #fff;
background-color: var(--green);
}
.service__banner__img img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media (max-width: 961px) {
.service__banner__inner {
flex-direction: column;
}
.service__banner__img {
width: 100%;
max-height: 400px;
}
}
@media (max-width: 768px) {
.service__banner__inner {
background-color: #F7F6F4;
border-radius: 14px;
padding: 20px 20px;
display: flex;
align-items: start;
gap: 20px;
margin-top: 40px;
}
.service__banner__img {
max-height: 400px;
}
.service__banner__content {
display: flex;
flex-direction: column;
align-items: start;
padding: 7px 0 17px;
}
.service__banner__subtitle {
text-wrap: balance;
color: var(--green);
font-size: 18px;
margin-bottom: 24px;
letter-spacing: -0.05em;
}
.service__banner__text {
font-size: 14px;
margin-bottom: 15px;
}
.service__banner__price {
font-size: 16px;
margin-bottom: 36px;
font-family: 'Inter';
margin-top: 0;
}
.service__banner__button {
margin-top: 0 !important;
font-family: 'Inter';
font-size: .875rem;
line-height: 1.5rem;
font-weight: 600;
letter-spacing: -0.03em;
text-transform: uppercase;
color: var(--green);
border: 1px solid var(--green);
background-color: transparent;
border-radius: 20px;
padding: 15px 20px;
text-align: center;
}
} .service__navigation {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
}
.service__nav__link {
background-color: #335655;
border: 2px solid #33565580;
padding: 26px 60px;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.04em;
font-family: 'Inter';
font-weight: 500;
color: #fff;
border-radius: 18px;
}
@media (max-width: 1024px) {
.service__navigation {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.service__nav__link {
padding: 16px 30px;
font-size: 16px;
border-radius: 10px;
flex-grow: 1;
text-align: center;
}
} .tech {
padding: 6rem 0;
}
.tech__inner {
background-color: #E8E4DF;
padding: 4.5rem;
border-radius: 25px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
font-size: 1rem;
line-height: 26px;
font-weight: 500;
font-family: 'Inter';
letter-spacing: -0.05em;
color: #3A3A3A;
text-wrap: balance;
}
.tech__inner p:not(:last-child) {
margin-bottom: 20px;
}
@media (max-width: 1024px) {
.tech {
padding: 3rem 0;
}
.tech__inner {
padding: 4rem 4rem 400px 4rem;
border-radius: 25px;
background-size: 150%;
background-repeat: no-repeat;
background-position: bottom center;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
font-size: 1rem;
line-height: 26px;
font-weight: 500;
font-family: 'Inter';
letter-spacing: -0.05em;
color: #3A3A3A;
text-wrap: balance;
}
.tech__inner p:not(:last-child) {
margin-bottom: 20px;
}
}
@media (max-width: 410px) {
.tech {
padding: 3rem 0;
}
.tech__inner {
padding: 2rem 2rem 200px 2rem;
background-size: 150%;
background-repeat: no-repeat;
background-position: bottom center;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
font-size: 0.75rem;
line-height: 1.5;
font-weight: 500;
font-family: 'Inter';
letter-spacing: -0.05em;
color: #3A3A3A;
text-wrap: balance;
}
.tech__inner p:not(:last-child) {
margin-bottom: 20px;
}
}
.services-green__inner {
background-color: #335655;
padding: 50px 60px;
color: #fff;
font-size: 18px;
line-height: 27px;
letter-spacing: -0.04em;
font-weight: 500;
font-family: 'Inter';
border-radius: 25px;
text-wrap: balance;
}
.green-block__btn {
background-color: #fff;
color: #335655;
padding: 14px 16px 11px 16px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.03em;
margin-top: 50px;
border-radius: 8px;
}
.services-green__inner p:not(:last-child),
.services-green__inner ul:not(:last-child) {
margin-bottom: 30px;
}
.services-green__inner h3 {
font-family: 'OrchideaPro';
font-size: 30px;
line-height: 1;
letter-spacing: -0.01em;
font-weight: 400;
margin-bottom: 20px;
}
.services-green__inner ul {
list-style-type: disc;
padding-left: 1rem;
}
.services-green__inner ol {
list-style-type: decimal;
padding-left: 1rem;
}
@media (max-width: 768px) {
.services-green__inner {
padding: 20px 30px;
font-size: 14px;
line-height: 1.2;
}
.green-block__btn {
margin-top: 30px;
}
.services-green__inner p:not(:last-child),
.services-green__inner ul:not(:last-child) {
margin-bottom: 20px;
}
.services-green__inner h3 {
font-family: 'OrchideaPro';
font-size: 22px;
line-height: 1;
letter-spacing: -0.01em;
font-weight: 400;
margin-bottom: 15px;
}
.services-green__inner ul {
list-style-type: disc;
padding-left: 1rem;
}
.services-green__inner ol {
list-style-type: decimal;
padding-left: 1rem;
}
}
.usluga-page .specialists {
padding-top: 0;
}
.tech__img {
border-radius: 20px;
overflow: hidden;
}
.tech__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1024px) {
.tech__img {
max-height: 430px;
}
.tech__inner:has(.tech__img) {
padding-bottom: 4rem;
}
}