.services {
flex: 1;
padding: 40px 0 100px 0;
}
h1.services__title {
font-family: var(--second-family);
font-weight: 700;
font-size: 50px;
text-transform: uppercase;
color: var(--tekst-zagolovkm);
margin-bottom: 70px;
} .services-nav {
margin-bottom: 30px;
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
}
.services-nav .container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
.services-nav__breadcrumb {
font-family: var(--font-family);
font-weight: 600;
font-size: 18px;
color: var(--text-medium);
}
.services-nav__category-link {
color: var(--text-medium);
text-decoration: none;
padding: 8px 16px;
transition: all 0.2s linear;
}
.services-nav__category-link:hover {
background: var(--blue);
color: var(--belyy);
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-between;
gap: 24px;
transition: opacity 0.3s ease;
}
.service-card {
display: flex;
flex-direction: column;
padding: 24px;
background: linear-gradient(270deg, #dfecfb 0%, #f5f5eb 100%);
min-height: 292px;
text-decoration: none;
transition: all .2s linear;
position: relative;
cursor: pointer;
}
.service-card__icon {
margin-bottom: 24px;
width: 160px;
height: 160px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-card:hover {
transform: scale(0.98);
}
.service-card__title {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
color: var(--text-medium);
margin-bottom: 16px;
}
.service-card__actions {
display: flex;
gap: 12px;
margin-top: auto;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.service-card--parent:hover .service-card__actions {
opacity: 1;
transform: translateY(0);
}
.service-card__view-services {
flex: 1;
background: var(--knopka---akcentnyy);
font-family: var(--second-family);
font-weight: 500;
font-size: 18px;
line-height: 130%;
color: var(--belyy);
border: none;
padding: 10px 16px;
border-radius: 0px;
cursor: pointer;
transition: all 0.3s linear;
position: relative;
}
.service-card__view-services::before,
.service-card__view-details::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, #6dacf3 0%, #65558f 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
}
.service-card__view-services:hover::before {
opacity: 1;
}
.service-card__view-services span,
.service-card__view-services a {
position: relative;
z-index: 1;
}
.service-card__view-details {
flex: 1;
font-family: var(--second-family);
font-weight: 500;
font-size: 18px;
line-height: 130%;
color: var(--belyy);
padding: 10px 16px;
border-radius: 0px;
cursor: pointer;
transition: all 0.3s linear;
position: relative;
text-decoration: none;
border: 1px solid var(--text);
color: var(--text);
text-align: center;
}
.service-card__view-details:hover {
color: var(--knopka---akcentnyy);
border: 1px solid var(--knopka---akcentnyy);
} .services-loading {
text-align: center;
padding: 60px 20px;
font-family: var(--font-family);
}
.services-loading__spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--knopka---akcentnyy);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.services-loading p {
color: var(--text-medium);
font-size: 16px;
margin: 0;
} .services-error {
background: #fee;
border: 1px solid #fcc;
border-radius: 6px;
padding: 16px;
margin-bottom: 20px;
color: #c33;
font-family: var(--font-family);
font-size: 14px;
}
.no-services-message {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
font-family: var(--font-family);
font-size: 18px;
color: var(--text-medium);
background: rgba(255, 255, 255, 0.5);
border: 2px dashed #e0e0e0;
} @media screen and (max-width: 1279px) {
.services {
padding: 40px 0 100px 0;
}
.services>.container {
padding: 20px 40px;
}
}
@media screen and (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 1023px) {
.service-card__actions {
opacity: 1;
}
}
@media screen and (max-width: 959px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.service-card {
min-height: 220px;
padding: 20px;
}
.service-card__title {
font-size: 20px;
}
.services-nav {
flex-direction: column;
gap: 16px;
text-align: center;
}
h1.services__title {
font-size: 36px;
margin-bottom: 40px;
}
}
@media screen and (max-width: 767px) {
.services {
padding: 40px 0 70px 0;
}
.services>.container {
padding: 0 15px;
}
h1.services__title {
margin-bottom: 20px;
}
.services-nav .container {
flex-direction: column;
gap: 20px;
align-items: flex-start;
padding: 20px 15px;
}
.services-nav__back {
order: 2;
}
.services-nav__category-link {
padding: 0;
}
}
@media screen and (max-width: 630px) {
.services-grid {
grid-template-columns: 1fr;
}
.service-card__actions {
opacity: 1;
transform: translateY(0);
}
}