.feature-icon { font-size: 60px; color: var(--gcg-color-secondary); display: inline-block; } .feature-blocks { margin-left: 40px; margin-right: 40px; padding-left: 70px; padding-top: 80px; padding-right: 70px; @include desktop-xl { padding-right: 10%; } @include desktop-lg { padding-right: 50px; padding-left: 50px; padding-top: 40px; h3 { font-size: 20px; } } @include desktop { margin-top: 0; padding: 50px; h3 { font-size: 25px; } } @include mobile { margin-left: 0px; margin-right: 0px; } } .hover-shadow { transition: .3s ease; &:hover { box-shadow: 0px 4px 25px 0px rgba(27, 39, 71, 0.15); } } .success-video { min-height: 300px; .play-btn { position: absolute; top: 50%; left: 0; transform: translateY(-50%); @include tablet { left: 50%; transform: translate(-50%, -50%); } } } .play-btn { display: inline-block; height: 80px; width: 80px; border-radius: 50%; background: var(--gcg-color-primary); color: white; font-size: 25px; text-align: center; i { line-height: 80px; } &::before { position: absolute; content: ""; height: 0; width: 0; transform: translate(-50%, -50%); background: white; border-radius: 50%; top: 50%; left: 50%; z-index: -2; transition: .3s ease; transition-delay: .2s; } &::after { position: absolute; content: ""; height: 80%; width: 80%; transform: translate(-50%, -50%); background: var(--gcg-color-primary); border-radius: 50%; top: 50%; left: 50%; z-index: -1; transition: .3s ease; } &:hover { &::before { height: 80%; width: 80%; transition-delay: 0s; } &::after { height: 0; width: 0; transition: 0s ease; } } } .bg-footer { background-color: #182b45; } .logo-footer { margin-top: -20px; display: inline-block; } .footer { border-color: #494a43 !important; padding-top: 75px; }