.design-box{ width: 100%; position: relative; /* margin-top: 45.6px; */ } .design-in{ padding: 15px 15px; text-align: center; background: #5eacdd; transition: .3s all ease-in-out; height: 100%; } .design-in.dark{ background: #81bee2; } .design-in h2{ color: #fff; border-bottom: 1px solid rgb(255 255 255 / 60%); font-weight: 600 !important; letter-spacing: .5px; font-size: 1.5vw !important; line-height: 1.5; margin-bottom: 10px; } .design-in p{ color: #000; font-size: 16px; line-height: 1.5; margin-bottom: 0; } a.design-btn{ display: inline-block; text-decoration: none; width: 100%; height: 0; overflow: hidden; transition: .3s all ease-in-out; position: absolute; bottom: 0%; left: 0; } .design-btn-box{ width: calc(100% - 40px); background: #000; color: #fff; text-align: center; padding: 10px; text-transform: uppercase; float: left; } .design-icon{ width: 40px; float: left; text-align: right; padding: 10px 10px 10px 0; font-size: 16px; color: #000; } .design-box:hover a.design-btn{ height: 45.6px; } .design-box:hover .design-in{ transform: translateY(-45.6px); } @media screen and (max-width: 768px){ .design-box{ margin-top: 45.6px; } .design-in h2{ font-size: 1.5em !important; } header { min-height: 130px; } @media (min-height :480 px){ header{ position: -webkit-sticky; position: sticky; top= 0; } } @media (min-device-width: 576px) and (max-device-width: 1024px) and (orientation:landscape) header { position: static; } } #header.header-effect-shrink .header-container { min-height: 70px; }