section[data-cattype="705"].wrapper_middle{ padding: 60px 120px; position: relative; z-index: 1; } [data-cattype="705"] h1{ color: #000000; text-align: center; font-size: 48px; } [data-cattype="705"] h1 span{ color: #f79206; text-align: left; } [data-cattype="705"] ul.box { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; padding: 30px 0px 0px 0px; } [data-cattype="705"] ul.box li { width: auto; margin: 10px 30px; text-align: center; list-style: none; position: relative; padding: 0px 20px; transition: 0.3s; text-transform: capitalize; } [data-cattype="705"] ul.box li:hover { transition: 0.3s; } [data-cattype="705"] ul.box li::after { } [data-cattype="705"] ul.box li:hover::after { background-color: #999999; right: -65px; transition: 0.3s; } [data-cattype="705"] h4 { color: #f79206; text-align: center; font-size: 20px; } [data-cattype="705"] p { color: #000; text-align: center; font-size: 25px; font-weight: 500; transition: 0.3s; } [data-cattype="705"] p:hover { color: #dc661d; transition: 0.3s; } [data-cattype="705"] .graphic-animation { position: absolute; right: -240px; top: -140px; width: 50%; } [data-cattype="705"] .animation { position: absolute; bottom: -57%; right: 0; left: 35%; z-index: -2; } @media only screen and (max-width: 1440px) and (min-width: 1200px) { section[data-cattype="705"] { padding: 60px 40px; } [data-cattype="705"] ul.box li { margin: 20px 10px; } [data-cattype="705"] .animation { position: absolute; bottom: -6%; right: 0; left: 40%; } } @media (min-width: 768px) and (max-width: 980px) { section[data-cattype="705"].wrapper_middle { padding: 30px; position: relative; } [data-cattype="705"] ul.box li { width: 30%; margin: 10px; text-align: center; list-style: none; position: relative; padding: 0; transition: 0.3s; } [data-cattype="705"] .animation { bottom: -40%; } } @media (max-width: 767px) { } @media (max-width: 480px) { section[data-cattype="705"].wrapper_middle { padding: 30px 0px 20px 0px; overflow: hidden; position: relative; } [data-cattype="705"] h1 { text-align: center; font-size: 35px; } [data-cattype="705"] ul.box li { width: 46%; margin: 7px; padding: 0px; } [data-cattype="705"] ul.box li::after { padding: 10px 12px; right: -15px; bottom: -1px; } [data-cattype="705"] h4 { font-size: 18px; } [data-cattype="705"] p { font-size: 17px; margin: 0px 0px 5px 0px; } [data-cattype="705"] ul.box li:hover::after { right: -25px; } [data-cattype="705"] .animation { position: absolute; top: -255px; right: 0; left: 0%; width: 100% !important; } [data-cattype="705"] ul.box { padding: 0px 0px 0px 0px; margin: 0; } }