h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
ul, ol {
margin: 16px 0;
padding-left: 24px;
}
li {
margin-bottom: 8px;
}
.service-accordion__subtitle {
margin-bottom: 30px;
}
.services-categories__list {
margin-bottom: 32px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.pagination {
grid-column-start: 1;
grid-column-end: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.page-numbers {
color: var(--clr-gray);
font-size: 1.25rem;
font-weight: 500;
line-height: 120%;
letter-spacing: normal;
}
.page-numbers.current {
color: var(--clr-blue);
text-decoration: underline;
}
.services__article {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 24px;
}
.services__title {
margin: 0;
}
.services__text {
margin: 0;
text-align: center;
max-width: 420px;
color: var(--clr-gray);
}
.services__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 22px;
row-gap: 40px;
}
.services__item {
position: relative;
padding-bottom: 144px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.services__img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 8px;
}
.services__item--article {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0 38px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
border: 1px solid var(--clr-white-hover);
border-radius: 8px;
box-shadow: 0px 1px 4px 0px rgba(25, 33, 61, 0.08);
background: var(--clr-white);
}
.services__item--title {
margin: 0;
}
.services__item--subtitle {
margin: 0;
color: var(--clr-gray);
}
.services__item--link {
color: var(--clr-blue);
}
@media screen and (max-width: 1024px) {
.services__item--article {
bottom: 0;
margin: 0 24px;
padding: 24px;
gap: 18px;
}
}
@media screen and (max-width: 768px) {
.services__list {
display: flex;
flex-direction: column;
gap: 32px;
}
.services__item {
padding-bottom: 64px;
}
}
@media screen and (max-width: 425px) {
.services__item {
padding-bottom: 0;
}
.services__img {
height: 100%;
border-radius: 8px 8px 0 0;
}
.services__item--article {
position: relative;
margin: 0;
padding: 24px 12px;
border-radius: 0 0 8px 8px;
}
}
.service-img {
width: 100%;
height: 500px;
display: block;
object-fit: cover;
object-position: top;
border-radius: 8px;
}
.single__btn-wrap {
display: flex;
justify-content: center;
}
@media screen and (max-width: 430px) {
.services_category-title {
margin-top: 100px;
}
.service-img {
margin-top: 80px;
height: 300px;
}
.services_category-btn {
padding: 8px 12px;
font-size: 12px;
}
} .service-flex-content {
margin-top: 48px;
}
.service-default-content {
margin-bottom: 32px;
}
.service-block-editor {
line-height: 1.6;
}
.service-block-editor p {
margin: 0 0 16px 0;
}
.service-block-editor p:last-child {
margin-bottom: 0;
}
.service-block-editor h1,
.service-block-editor h2,
.service-block-editor h3,
.service-block-editor h4,
.service-block-editor h5,
.service-block-editor h6 {
margin: 24px 0 16px 0;
color: var(--clr-black);
}
.service-block-editor h1:first-child,
.service-block-editor h2:first-child,
.service-block-editor h3:first-child,
.service-block-editor h4:first-child,
.service-block-editor h5:first-child,
.service-block-editor h6:first-child {
margin-top: 0;
}
.service-block-editor ul,
.service-block-editor ol {
margin: 16px 0;
padding-left: 24px;
}
.service-block-editor li {
margin-bottom: 8px;
}
.service-block-editor a {
color: var(--clr-blue);
text-decoration: underline;
}
.service-block-editor a:hover {
color: var(--clr-blue-hover);
} .service-accordion {
margin-top: 48px;
}
.service-accordion__title {
margin: 0 0 32px 0;
color: var(--clr-black);
}
.service-accordion__list {
display: flex;
flex-direction: column;
gap: 16px;
}
.service-accordion__item {
border: 1px solid var(--clr-white-hover);
border-radius: 8px;
background: var(--clr-white);
box-shadow: var(--natural-shadow);
overflow: hidden;
}
.service-accordion__button {
width: 100%;
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
white-space: wrap;
transition: background-color 0.3s ease;
}
.service-accordion__button-text {
flex: 1;
font-size: 1rem;
font-weight: 600;
line-height: 120%;
color: var(--clr-black);
}
.service-accordion__button-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
position: relative;
transition: transform 0.3s ease;
}
.service-accordion__button-icon::before,
.service-accordion__button-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--clr-blue);
transition: transform 0.3s ease;
}
.service-accordion__button-icon::before {
width: 2px;
height: 16px;
}
.service-accordion__button-icon::after {
width: 16px;
height: 2px;
}
.service-accordion__item.active .service-accordion__button-icon::before {
transform: translate(-50%, -50%) rotate(-226deg);
}
.service-accordion__item.active .service-accordion__button-icon::after {
transform: translate(-50%, -50%) rotate(-226deg);
}
.service-accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.service-accordion__content-inner {
padding: 0 24px 24px 24px;
color: var(--clr-gray);
line-height: 1.6;
}
.service-accordion__content-inner p {
margin: 0 0 16px 0;
}
.service-accordion__content-inner p:last-child {
margin-bottom: 0;
}
.service-accordion__content-inner ul,
.service-accordion__content-inner ol {
margin: 16px 0;
padding-left: 24px;
}
.service-accordion__content-inner li {
margin-bottom: 8px;
}
.service-accordion__content-inner a {
color: var(--clr-blue);
text-decoration: underline;
}
.service-accordion__content-inner a:hover {
color: var(--clr-blue-hover);
}
@media screen and (max-width: 768px) {
.service-flex-content {
margin-top: 32px;
}
.service-accordion__title {
margin-bottom: 24px;
font-size: 2rem;
}
.service-accordion__button {
padding: 20px;
}
.service-accordion__button-text {
font-size: 1rem;
}
.service-accordion__content-inner {
padding: 0 20px 20px 20px;
}
}
@media screen and (max-width: 425px) {
.service-accordion__title {
font-size: 1.75rem;
}
.service-accordion__button {
padding: 16px;
}
.service-accordion__button-text {
font-size: 1rem;
}
.service-accordion__content-inner {
padding: 0 16px 16px 16px;
}
}