#services-block {}
#services-block .services__container .services__title span {
color: var(--colors-second);
}
#services-block .services__container .services {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
#services-block .services__container .services .service {
background: var(--bg-primary-main);
box-shadow: 0px 0px 50px 0px #1C1A191A;
display: flex;
flex-direction: column;
}
#services-block .services__container .services .service .service-bottom {
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
#services-block .services__container .services .service .service-bottom .service-list {
margin-top: 20px;
}
#services-block .services__container .services .service .service-bottom .service-list ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
#services-block .services__container .services .service .service-bottom .service-list ul li {
color: var(--text-primary-main);
padding-left: 10px;
}
#services-block .services__container .services .service .service-bottom .service-list ul li::before {
content: " ";
width: 10px;
height: 10px;
background: var(--colors-second);
display: inline-block;
margin-right: 10px;
}
#services-block .services__container .services .service .service-bottom .service-price {
margin-top: 30px;
}
#services-block .services__container .services .service .service-bottom .service-price span {
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 110.00000000000001%;
letter-spacing: 0%;
}
#services-block .services__container .services .service .service-btns {
display: flex;
gap: 15px;
margin-top: auto;
padding: 0 20px 20px;
}
#services-block .services__container .services .service .service-btns .btn.primary {
padding: 18px 21px;
white-space: nowrap;
gap: 10px;
border-radius: 10px;
box-shadow: 0px 4px 0px 0px #cc4500;
position: relative;
z-index: 1;
transition: var(--transition);
background: var(--hover-main);
height: 60px;
max-width: 177px;
}
#services-block .services__container .services .service .service-btns .btn.primary:hover {
box-shadow: 0px 4px 0px 0px #f65401;
transition: var(--transition);
color: var(--text-alt-head);
}
#services-block .services__container .services .service .service-btns .btn.primary::before {
content: "";
background: linear-gradient(260.8deg, #ff5700 8.5%, #ff874a 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
}
#services-block .services__container .services .service .service-btns .btn.primary:hover::before {
opacity: 0;
transition: var(--transition);
}
#services-block .services__container .services .service .service-btns .btn.invert {
border: 1px solid var(--colors-main);
background: transparent;
color: var(--colors-main);
height: 64px;
max-width: 128px;
position: relative;
z-index: 1;
transition: var(--transition);
}
#services-block .services__container .services .service .service-btns .btn.invert:hover {
color: var(--text-alt-head);
transition: var(--transition);
}
#services-block .services__container .services .service .service-btns .btn.invert::before {
content: "";
background: linear-gradient(260.8deg, #FF5700 8.5%, #FF874A 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 100%;
height: 100%;
transition: var(--transition);
border-radius: 10px;
opacity: 0;
}
#services-block .services__container .services .service .service-btns .btn.invert:hover::before {
opacity: 1;
transition: var(--transition);
}
#services-block .modal-text {
display: none;
}
@media(max-width: 1560px) {
#services-block .services__container .services {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media(max-width: 1200px) {
#services-block .services__container .services {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
@media(max-width: 768px) {
#services-block .services__container .services {
grid-template-columns: 1fr;
gap: 10px;
}
}
@media(max-width: 400px) {
#services-block .services__container .services .service .service-btns {
flex-direction: column;
gap: 10px;
}
#services-block .services__container .services .service .service-btns .btn {
max-width: unset !important;
width: 100%;
}
}