.oferta-block {
display: flex;
padding: 60px 10px;
gap: 11px;
flex-wrap: wrap;
color: #000;
max-width: var(--wp--style--global--wide-size) !important;
justify-content: center;
margin: auto;
position: relative;
}
.oferta-block h2 {
color: var(--Color-Gray-Gray-900, #232323);
text-align: center;
font-family: Cardo;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 48px */
margin-top: 0px;
}
.oferta-block > .sectionTextWidth {
color: var(--Color-Pink-1-Pink-1-900, #2F7869);
text-align: center;
font-family: Cardo;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 18px */
position: relative;
width: 1240px;
padding: 0px 300px;
}
.oferta-block > .sectionTextWidth::before, .oferta-block > .sectionTextWidth::after {
content: "";
top: 10px;
background-image: url('data:image/svg+xml,');
position: absolute;
top: 0px;
height: 65px;
width: 292px;
background-size: 100%;
background-repeat: no-repeat;
}
.oferta-block > .sectionTextWidth::before {
left: 0px;
}
.oferta-block > .sectionTextWidth::after {
right: 0px;
}
.oferta-block::before, .oferta-block::after {
content: "";
top: 10px;
background-image: url('data:image/svg+xml,');
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 620px;
width: 120px;
}
.oferta-block::before {
left: 0px;
transform: translate(-50%, -50%);
}
.oferta-block::after {
right: 0px;
transform: translate(50%, -50%);
}
.oferta-block .oferta-item{ transition: all 0.4s ease-out;
flex: 0 1 78%;
padding: 30px 60px;
display: flex;
color: #000;
flex-direction: column;
gap: 0px;
transition: all .3s;
overflow: hidden;
/* border: 1px solid #e0e0e0; */
border-radius: 8px;
background-color: #fff;border-radius: 12px;
}
.oferta-block .oferta-item .icon{
display: flex;
justify-content: center;
align-items: center;
}
.oferta-block .oferta-item .icon img {
max-width: 100%;
}
.oferta-block .oferta-item .content {
flex: 0 1 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 35px 10px 160px;
}
.oferta-block .oferta-item:nth-child(odd) .content::before {
/* style np.: */
content: '';
display: block;
width: 120px;
height: 120px;background-image: url('data:image/svg+xml,');
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* Dla PARZYSTYCH .oferta-item (2., 4., 6., ...) */
.oferta-block .oferta-item:nth-child(even) .content::before {
/* style np.: */
content: '';
display: block;
width: 120px;
height: 120px;background-image: url('data:image/svg+xml,');
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.oferta-block .oferta-item .content .title { color: var(--Color-Gray-Gray-900, #232323);transition: all 1s ease-out;
font-family: Cardo;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal; margin-bottom: 0px;}
.oferta-block .oferta-item .content .desc { color: var(--Color-Gray-Gray-800, #393939);transition: all 1s ease-out;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 24px */ }
.oferta-block .oferta-item .content a { display: flex;transition: all 1s ease-out;
padding: 12px 20px;
justify-content: center;
align-items: center;
gap: 10px; border-radius: 4px;
border: 1px solid var(--Color-Blue-Blue-900, #2F7869); color: var(--Color-Pink-1-Pink-1-900, #2F7869);
font-family: Cardo;
font-size: 15px;
font-style: normal;
font-weight: 700;
align-self: flex-start;transition: all 1s ease-out;
line-height: 100%; /* 15px */}
.oferta-block .oferta-item:hover {
border-radius: 12px;
background: var(--Color-Blue-Blue-50, #EAF2F0);transition: all 1s ease-out;
}
.oferta-block .oferta-item:hover .content .title {
color: var(--Color-Pink-1-Pink-1-900, #2F7869);
font-family: Cardo;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;transition: all 1s ease-out;
}
.oferta-block .oferta-item:hover .content .desc {
color: var(--Color-Gray-Gray-800, #393939);
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 24px */transition: all 1s ease-out;
}
.oferta-block .oferta-item:hover .content a {
border-radius: 4px;
border: 1px solid var(--Color-Blue-Blue-900, #2F7869);
background: var(--Color-Pink-1-Pink-1-900, #2F7869);color: var(--Color-Base-White, #FFF);
font-family: Cardo;
font-size: 15px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 15px */transition: all 1s ease-out;
}
.oferta-block.with-bg {
/* background-image: url('../wp-content/uploads/2024/01/Group-171.png'); */
background-size: cover;
}
@media screen and (max-width: 479px) {
.oferta-block .oferta-item {
flex: 0 0 calc(100%); ;
flex-direction: column;
align-items: center;
text-align: left;
max-width: 346px;
margin: auto;
}
.oferta-block .oferta-item .content{
flex: 0 1 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 70px 20px 10px;
text-align: center;
}
.oferta-block .oferta-item .content a {
margin: auto;
}
.oferta-block > .sectionTextWidth {
padding: 80px 10px 10px;
}
.oferta-block > .sectionTextWidth::before {
height: 80px;
width: 100%;
background-size: 100%;
background-repeat: no-repeat;}
.oferta-block > .sectionTextWidth::after { display: none;}
.oferta-block h2, .ofertaList-block h2 {
color: var(--Color-Gray-Gray-900, #232323);
text-align: center;
font-family: Cardo;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 40px */
}
.oferta-block::before, .oferta-block::after {
display: none;
}
.oferta-block .oferta-item:nth-child(even) .content::before, .oferta-block .oferta-item:nth-child(odd) .content::before {
content: '';
display: block;
width: 60px;
height: 60px;
top: 0px;
transform: translateX(-50%);
left: 50%;
}
}