.services-1 { max-width: calc(298px); display: block; } /* @media (max-width: 768px) { .services-1 { max-width: calc(180px); } } @media (max-width: 576px) { .services-1 { max-width: calc(170px); } } */ @media (max-width: 320px) { .services-1 { margin-bottom: 20px; } } .serve-box { width: 100%; max-width: 100%; background-color: #fff; transition: 0.3s all ease-in-out; margin-bottom: 30px; } .serve-box figure svg{ max-width: 50px; } @media (max-width: 767px) { .serve-box { max-width: calc(250px); } } @media (max-width: 575px) { .serve-box { max-width: 100%; min-height: 220px; margin-bottom: 7px; } .serve-sec_2{ padding-top: 0!important; } .serve-box figure svg{ max-height: 45px; } } .serve-box:hover { background-color: #BD2031; } .serve-box:hover h3 { color: #fff; } .serve-box:hover figure svg g g path { fill: #fff; } .serve-box:hover figure svg g path { fill: #fff; } .serve-box a { text-decoration: none; } .serve-box figure { padding-top: 50px; padding-left: 30px; margin-bottom: 0rem; } @media (max-width:576px){ .serve-box:hover { background-color: #fff; } .serve-box:hover h3 { color: #BD2031; } .serve-box:hover figure svg g g path { fill: #BD2031; } .serve-box:hover figure svg g path { fill: #BD2031; } } @media (max-width: 768px) { .serve-box figure { padding-top: 30px; padding-left: 15px; } } .serve-box h3 { max-width: 190px; padding-top: 73px; padding-left: 31px; font-family: "Oxygen", sans-serif; text-decoration: none; padding-bottom: 60px; color: black; } @media (max-width: 1024px){ .serve-box h3{ padding-top: 35px; padding-bottom: 40px; } } @media (max-width: 991px){ .serve-box h3{ padding-top: 40px; } } @media (max-width: 768px) { .serve-box h3 { padding-bottom: 30px; padding-top: 35px; padding-left: 15px; padding-right: 15px; } }