.divTitleOff{
font-size: 32px;
color: #172C55;
font-weight: 400;
text-align: center;
margin-bottom: 60px;
}
.contentOffer{
margin-bottom: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 100px 100px;
}
.contentOffer .offer{

}
.contentOffer .offer .oferta{
display: block;
text-align: center;
}
.contentOffer .offer .oferta .ico{
display: block;
width: 79px;
height: 79px;
margin: 0px auto;
margin-bottom: 18px;
transition: all 0.5s ease-out 0s;
box-sizing: border-box;
padding: 6px;
}

.contentOffer .offer .oferta:hover .ico{
background-color: #172C55;
}

.contentOffer .offer .oferta .ico span{
display: block;
width: 67px;
height: 67px;
margin: 0px auto;
transition: all 0.5s ease-out 0s;
background-size: 100% auto;
background-repeat: no-repeat;
}

.contentOffer .offer .oferta:hover .ico span{
filter: brightness(0%) invert(100%);
}

.contentOffer .offer .oferta .titleOff{
color: #172C55;
font-size: 20px;
font-weight: 400;
}

@media screen and (max-width:1200px){
.divTitleOff{font-size: 27px;margin-bottom: 40px}
.contentOffer{grid-gap:30px 30px;margin-bottom: 50px}
}
@media screen and (max-width:900px){
.contentOffer .offer .oferta .titleOff{font-size: 17px}
.contentOffer .offer .oferta .ico{margin-bottom: 5px}
}
@media screen and (max-width:670px){
.contentOffer{grid-template-columns:1fr 1fr 1fr}
}
@media screen and (max-width:470px){
.contentOffer{grid-template-columns:1fr 1fr}
}