* {margin: 0;padding: 0;box-sizing: border-box;}body, html {width: 100%;height: 100%;}.hero {width: 100%;min-height: 100vh;display: flex;align-items: center;justify-content: center;text-align: center;color: #fff;display: flex;}h3, span, div {font-family: Arial, Verdana, sans-serif;color: white;font-weight: 700;}h3 {font-size: 0.9rem;font-size: clamp(0.9rem, 0.8300000000000001rem + 0.35vw, 1.25rem);}span {font-size: 0.7rem;font-size: clamp(0.7rem, 0.6799999999999999rem + 0.10000000000000009vw, 0.8rem);}.hero .content {max-width: 320px;min-height: 100vh;background-color: red;background: url('/sbo/ftn/background.jpg') center / cover no-repeat;background-size: 100% 100%;display: flex;flex-direction: column;flex: 1;justify-content: center;}.content > .row {display: flex;flex-direction: column;padding: 1rem;row-gap: 1rem;}.row.logo-wrap {align-items: center;margin-top: 5rem;}.content > .row-col {display: flex;padding: 1rem;column-gap: 8px;}.colum-button {border-radius: 5px;}.content > .row-col > .colum-button {display: flex;flex: 1;}.card {height: 150px;animation: swap1 6s forwards;}.content > .row > .card {display: flex;border: 1px solid white;border-radius: 10px;}.card-wrap > .card {display: flex;justify-content: flex-end;cursor: pointer;}.hero .btn {display: inline-block;background: rgba(255, 215, 0, 0.9);color: #000;text-decoration: none;font-size: 1rem;border-radius: 4px;}.img-logo {width: 50%;}@media (min-width: 480px) {.hero h1 {font-size: 2.8rem;}.hero p {font-size: 1.4rem;}.hero .content {max-width: 515px;}.card {height: 188px;}}.card-item {width: 280px;clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);display: flex;align-items: center;flex-direction: column;flex-wrap: wrap;justify-content: center;padding: 1.5rem 0.2rem 1.5rem 4rem;transition: width 0.3s ease-in-out, clip-path 0.3s ease-in-out, padding 0.3s ease-in-out;border-top-right-radius: 10px;border-bottom-right-radius: 10px;opacity: 0;}.card:nth-child(1) .card-item {background: linear-gradient(90deg,rgba(43, 50, 64, 1) 0%, rgba(0, 45, 181, 1) 100%, rgba(237, 221, 83, 1) 100%);}.card:nth-child(2) .card-item {background: linear-gradient(90deg,rgba(43, 50, 64, 1) 0%, rgba(0, 45, 181, 1) 100%, rgba(237, 221, 83, 1) 100%);}.card:nth-child(3) .card-item {background: linear-gradient(90deg,rgba(43, 50, 64, 1) 0%, rgba(0, 45, 181, 1) 100%, rgba(237, 221, 83, 1) 100%);}.card:hover > .card-item {width: 500px;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);border-top-left-radius: 10px;border-bottom-left-radius: 10px;padding: auto;}.card:nth-child(1) {background-image: url('/sbo/ftn/slot-1.jpg');background-size: 100% 100%;background-repeat: no-repeat;animation-name: swap1;animation-delay: 0s;}.card:nth-child(2) {background-image: url('/sbo/ftn/CASINO.jpg');background-size: 100% 100%;background-repeat: no-repeat;animation-name: swap2;animation-delay: 0s;}.card:nth-child(3) {background-image: url('/sbo/ftn/SPORTS-1.jpg');background-size: 100% 100%;background-repeat: no-repeat;animation-name: swap3;animation-delay: 0s;}.buy-actions{margin-top:16px;display:flex;gap:8px;z-index: 1000;}.buy-actions .login, .buy-actions .sign-up, .buy-actions .bonus {position: relative;overflow: hidden;background: linear-gradient(90deg,rgba(43, 50, 64, 1) 0%, rgba(0, 45, 181, 1) 100%, rgba(237, 221, 83, 1) 100%);background-size: 200% 200%;animation: shineGold 3s linear infinite, kedut 1.2s infinite;color: #fff;border: none;padding: 12px 18px;border-radius: 8px;cursor: pointer;font-size: 15px;font-weight: 600;text-decoration: none;flex: 1;text-align: center;border: 1px solid white;}.buy-actions .login::after, .card > .card-item::after, .buy-actions .sign-up::after, .buy-actions .bonus::after {content: "";position: absolute;top: 0;left: -75%;width: 50%;height: 100%;background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100% );transform: skewX(-25deg);animation: shineSweep 4s infinite;}.running-text-wrap {position: relative;overflow: hidden;font-size: 24px;font-weight: bold;display: flex;align-items: center;justify-content: center;}.running-text-wrap div {position: absolute;width: 100%;text-align: center;opacity: 0;animation: textSlider 6s infinite forwards;}.running-text-wrap div:nth-child(1) {animation-delay: 0s;}.running-text-wrap div:nth-child(2) {animation-delay: 2s;}.running-text-wrap div:nth-child(3) {animation-delay: 4s;}.text-wrap {max-width: 200px;display: flex;align-items: center;flex-direction: column;flex-wrap: wrap;word-wrap: break-word;overflow-wrap: break-word;white-space: normal;justify-content: center;}.card-item {animation: shuffleThenSlide 7s ease forwards;}@media (max-width: 767px) {.hero .content {max-width: 100%;overflow: hidden;}}@keyframes swap1 {0% {transform: translateY(0) scale(1);opacity: 1;}20% {transform: translateY(150px) scale(0.9);opacity: 0.7;}40% {transform: translateY(-70px) scale(0.9);opacity: 0.7;}60% {transform: translateY(0) scale(0.9);opacity: 1;}100% {transform: translateY(0);scale(1);opacity: 1;}}@keyframes swap2 {0% {transform: translateY(160px) scale(0.9);opacity: 0.7;}20% {transform: translateY(-220px) scale(0.9);opacity: 0.7;}40% {transform: translateY(0) scale(1);opacity: 1;}60% {transform: translateY(160px) scale(0.9);opacity: 0.7;}100% {}}@keyframes swap3 {0% {transform: translateY(-140px) scale(0.9);opacity: 0.7;}20% {transform: translateY(0) scale(1);opacity: 1;}40% {transform: translateY(80px) scale(0.9);opacity: 0.7;}60% {transform: translateY(-220px) scale(0.9);opacity: 0.7;}100% {}}@keyframes shuffleThenSlide {0%, 80% {transform: translateY(0);}81% {transform: translateY(40px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}}@keyframes textSlider {0% {opacity: 0;transform: translateY(100%);}10% {opacity: 1;transform: translateY(0);}40% {opacity: 1;transform: translateY(0);}50% {opacity: 0;transform: translateY(-100%);}100% {opacity: 0;transform: translateY(-100%);}}@keyframes shineGold {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}@keyframes shineSweep {0% {left: -75%;}60% {left: 125%;}100% {left: 125%;}}@keyframes kedut {0% {transform: scale(1) rotate(0deg);}20% {transform: scale(1.05) rotate(-1deg);}40% {transform: scale(0.97) rotate(1deg);}60% {transform: scale(1.04) rotate(-1deg);}80% {transform: scale(0.98) rotate(1deg);}100% {transform: scale(1) rotate(0deg);}}@keyframes zoomInOut {0% {transform: scale(1, 1);}50% {transform: scale(1.05, 1.05);}100% {transform: scale(1, 1);}}