123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- /*--------------------------------------------------------------
- 11. IconBox
- ----------------------------------------------------------------*/
- .cs_iconbox.cs_style_1 {
- padding-left: 70px;
- .cs_iconbox_icon {
- width: 55px;
- height: 55px;
- position: absolute;
- left: 0;
- top: 7px;
- transition: all 0.5s cubic-bezier(0.28, 1.84, 0.55, -0.11);
- }
- .cs_iconbox_title {
- margin-bottom: 2px;
- }
- &:hover {
- .cs_iconbox_icon {
- color: $accent;
- transform: scale(1.1);
- }
- }
- }
- .cs_iconbox.cs_style_2 {
- background-color: $white;
- box-shadow: 0px 0px 10px 1px rgba(160, 160, 160, 0.25);
- padding: 35px 35px 30px;
- transition: all 0.5s ease;
- @media (max-width: 1199px) {
- padding: 35px 25px 30px;
- }
- .cs_iconbox_icon {
- width: 76px;
- height: 52px;
- margin-bottom: 15px;
- }
- .cs_iconbox_title {
- margin-bottom: 11px;
- }
- &:hover {
- transform: scale(1.03) translateY(6px);
- }
- }
- .cs_iconbox.cs_style_3 {
- display: flex;
- align-items: center;
- gap: 25px;
- @media (max-width: 400px) {
- gap: 14px;
- }
- @media (max-width: 350px) {
- br {
- display: none;
- }
- }
- .cs_iconbox_icon {
- width: 88px;
- height: 88px;
- border: 1px solid $primary;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex: none;
- }
- .cs_iconbox_title {
- margin-bottom: 8px;
- }
- .cs_iconbox_info {
- flex: 1;
- }
- }
|