:root {
--font-primary: "Mouse Memoirs";
--font-secondary: "Poppins";
--color-black: #000000;
--color-white: #ffffff;
--color-alpha: #1B4332;
--color-bravo: #1B4332;
--link-color: #1B4332;
--link-hover: #FFD700;
--select-text-foreground: #ffffff;
--select-text-background: #000000;
--scrollbar-track: #e2e2e2;
--scrollbar-thumb: #a2a2a2;
--scrollbar-thumb-hover: #828282;
}
@font-face {
font-family: "Mouse Memoirs";
src: url("../fonts/MouseMemoirs-Regular.eot");
src: url("../fonts/MouseMemoirs-Regular.eot#iefix") format("embedded-opentype"),
url("../fonts/MouseMemoirs-Regular.woff2") format("woff2"),
url("../fonts/MouseMemoirs-Regular.woff") format("woff"),
url("../fonts/MouseMemoirs-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("../fonts/Poppins-Bold.eot");
src: url("../fonts/Poppins-Bold.eot#iefix") format("embedded-opentype"),
url("../fonts/Poppins-Bold.woff2") format("woff2"),
url("../fonts/Poppins-Bold.woff") format("woff"),
url("../fonts/Poppins-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("../fonts/Poppins-SemiBold.eot");
src: url("../fonts/Poppins-SemiBold.eot#iefix") format("embedded-opentype"),
url("../fonts/Poppins-SemiBold.woff2") format("woff2"),
url("../fonts/Poppins-SemiBold.woff") format("woff"),
url("../fonts/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("../fonts/Poppins-Medium.eot");
src: url("../fonts/Poppins-Medium.eot#iefix") format("embedded-opentype"),
url("../fonts/Poppins-Medium.woff2") format("woff2"),
url("../fonts/Poppins-Medium.woff") format("woff"),
url("../fonts/Poppins-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
h2 {
font-size: 50px;
font-family: var(--font-primary);
color: #1B4332;
}
h3 {
font-size: 40px;
font-family: var(--font-primary);
color: #1B4332;
}
p {
font-size: 16px;
font-family: var(--font-secondary);
color: #2c3e50;
margin: 10px;
}
ul, ol {
font-size: 16px;
color: #2c3e50;
}
ul {
list-style-type: disc;
}
li {
font-size: 16px;
color: #2c3e50;
}
.reddy-anna-overview-container {
max-width: 800px;
margin: 0 auto;
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.reddy-anna-overview-table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
.reddy-anna-overview-table tr.header-row {
background: #2c3e50;
color: white;
}
.reddy-anna-overview-table tr.alt-row {
background: #ecf0f1;
}
.reddy-anna-overview-table td {
padding: 12px;
border: 1px solid #ddd;
}
.reddy-anna-overview-table td.bold {
font-weight: bold;
}
.section-white-bg {
background-color: #ffffff;
padding: 80px 0;
}
.section-white-bg p,
.pro-tips-section p,
.fank-reddy-anna-guide-section p,
.fank-brand-grid p,
section[style*="background-color: #ffffff"] p,
section[style*="background: #ffffff"] p {
font-family: var(--font-secondary);
color: #2c3e50;
line-height: 1.7;
font-size: 16px;
margin: 0 0 1rem;
padding: 0;
}
.guide-content {
max-width: 800px;
margin: 0 auto;
}
.center-text {
text-align: center;
}
.margin-top-40 {
margin-top: 40px;
}
.margin-bottom-20 {
margin-bottom: 20px;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
.margin-bottom-50 {
margin-bottom: 50px;
}
.color-666 {
color: #666;
}
.color-555 {
color: #555;
}
.color-232826 {
color: #232826;
}
.padding-left-20 {
padding-left: 20px;
}
.margin-bottom-10 {
margin-bottom: 10px;
}
.margin-bottom-40 {
margin-bottom: 40px;
}
.margin-bottom-15 {
margin-bottom: 15px;
}
.margin-top-30 {
margin-top: 30px;
}
.color-white {
color: #ffffff !important;
}
.color-gold {
color: #FFD700 !important;
}
.text-center-important {
text-align: center !important;
}
.bold {
font-weight: bold;
}
.display-none {
display: none;
}
.color-2c3e50 {
color: #2c3e50 !important;
}
.color-232826 {
color: #232826 !important;
}
* {
outline: none !important;
}
*::after,
*::before,
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.25;
font-family: var(--font-primary);
background-color: #F8F9FA;
}
::-moz-focus-inner {
border: 0 solid transparent;
}
::-webkit-focus-inner {
border: 0 solid transparent;
}
*::-moz-selection {
color: var(--select-text-foreground);
background: var(--select-text-background);
}
*::selection {
color: var(--select-text-foreground);
background: var(--select-text-background);
}
*::-moz-selection {
color: var(--select-text-foreground);
background: var(--select-text-background);
}
*::-webkit-selection {
color: var(--select-text-foreground);
background: var(--select-text-background);
}
.fank-android-ios-box:last-child{
display: flex;
justify-content: center;
}
@media(max-width:767px){
.fank-android-ios-box:last-child{
display: block;
}
}
.img-fluid {
max-width: 100%;
height: auto;
}
.img-cover {
width: inherit;
height: inherit;
object-fit: cover;
}
.mb-0 {
margin-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.themcolor-1 {
color: #3AC1CD !important;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1);
}
.section-py{
padding: 50px 0;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
font-family: var(--font-primary);
line-height: 115%;
font-weight: bold;
margin: 0 0 1rem;
}
body p {
font-family: var(--font-secondary);
color: var(--color-bravo);
line-height: 170%;
margin: 0 0 1rem;
font-size: 16px;
padding: 0;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
select,
button,
a[href],
label[for],
input[type="file"],
input[type="submit"],
input[type="button"],
input[type="image"],
.pointer {
cursor: pointer;
}
input,
button,
select,
textarea {
font-family: var(--font-secondary);
}
textarea,
.resize-none {
resize: none;
}
button:focus,
.button:focus,
.form-control:focus,
.form-select:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline: none;
}
input[type="file"]::-webkit-file-upload-button {
cursor: pointer;
}
input[type="file"]::-moz-file-upload-button {
cursor: pointer;
}
input[type="file"]::-ms-file-upload-button {
cursor: pointer;
}
input[type="file"]::-o-file-upload-button {
cursor: pointer;
}
.button {
line-height: 1.35;
color: var(--color-bravo);
font-size: 1.125rem;
font-weight: normal;
padding: 0.375rem 0.75rem;
background-color: transparent;
border-color: transparent;
border-radius: 0.25rem;
display: inline-block;
cursor: pointer;
text-align: center;
vertical-align: middle;
text-decoration: none;
-webkit-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
.cover-image img,
.contain-image img,
.cover-image svg,
.contain-image svg,
.contain-image video,
.contain-image iframe {
width: 100%;
height: inherit;
max-height: inherit;
min-height: inherit;
}
.contain-image img,
.contain-image svg,
.contain-image video,
.contain-image iframe {
-o-object-fit: contain;
object-fit: contain;
}
.cover-image img,
.cover-image svg {
-o-object-fit: cover;
object-fit: cover;
}
.vertical-scroll::-webkit-scrollbar {
width: 6px;
}
.vertical-scroll::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
.horizontal-scroll::-webkit-scrollbar {
width: auto;
height: 6px;
}
.horizontal-scroll::-webkit-scrollbar-track {
background: var(--scrollbar-track);
height: 6px;
}
.vertical-scroll::-webkit-scrollbar-thumb,
.horizontal-scroll::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 10px;
}
.vertical-scroll::-webkit-scrollbar-thumb:hover,
.horizontal-scroll::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
a {
outline: none;
color: var(--link-color);
}
a:hover {
color: var(--link-hover);
}
a,
span,
button,
div a:hover,
div a:active,
div a:focus {
text-decoration: none;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.simple-list,
footer ul,
footer ol,
header ul,
header ol {
font-family: var(--font-secondary);
list-style: inside none none;
margin: 0;
padding: 0;
}
li:after,
ul:after,
.container:after {
clear: both;
display: block;
content: "";
}
.container {
width: 100%;
padding: 0 12px;
margin: 0 auto;
}
li {
list-style: none;
}
.d-align-justify {
display: flex;
align-items: center;
justify-content: center;
}
.cursor-pointer {
cursor: pointer;
}
.active-page {
color: #f8d224;
}
.d-align {
display: flex;
align-items: center;
}
.ms-auto {
margin-left: auto;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.fank-section-title {
font-weight: 400;
font-size: 67px;
line-height: 115%;
color: #1B4332;
}
.fank-section-title span {
color: #FFD700 !important;
}
.fank-section-sub-title {
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: #ffffff;
margin-bottom: 0;
}
.reddy-anna-how-to-play-section .fank-section-sub-title {
color: #2c3e50;
}
header {
padding: 18px 0;
background-color: var(--color-alpha);
box-shadow: 0px 4px 7px rgb(0 0 0 / 10%);
position: sticky;
top: 0;
z-index: 40;
}
header ul {
display: flex;
align-items: center;
}
.header-menu-ul a {
text-transform: uppercase;
color: var(--color-white);
font: normal normal 400 20px/32px var(--font-secondary);
}
.header-menu-ul a:hover,
.header-menu-ul a:active,
.header-menu-ul a:focus,
.header-menu-ul a.active-page {
color: #f8d224;
}
.header-menu-ul li.has-dropdown {
position: relative;
}
.header-menu-ul li.has-dropdown > ul.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--color-alpha);
padding: 10px 0;
min-width: 220px;
display: none !important;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 12px;
border-radius: 8px;
z-index: 100;
}
.header-menu-ul li.has-dropdown:hover > ul.dropdown-menu {
display: block !important;
}
.header-menu-ul li.has-dropdown > ul.dropdown-menu li a {
display: block;
padding: 8px 16px;
font-size: 16px;
text-transform: none;
margin-right: 0;
}
.header-menu-ul li.has-dropdown > ul.dropdown-menu li.dropdown-heading {
padding: 10px 16px 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
.header-menu-ul li.has-dropdown > ul.dropdown-menu li.dropdown-heading:not(:first-child) {
margin-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.header-menu-ul a.header-getid-btn {
text-transform: none;
font-size: 16px;
line-height: 1;
padding: 12px 16px;
}
header ul li:not(:last-child) a {
margin-right:30px;
}
.header-logo {
max-width: 150px;
height: auto;
}
.header-actions {
display: none;
align-items: center;
gap: 10px;
margin-left: auto;
}
.header-getid-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
padding: 10px 12px;
font-weight: 600;
font-size: 14px;
line-height: 1;
color: #1B4332;
background: linear-gradient(180deg, #f7b656 0%, #ffe279 100%);
text-decoration: none;
white-space: nowrap;
}
.header-getid-btn:hover {
background: linear-gradient(180deg, #00000061 0%, #000 100%);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: var(--color-white);
}
.footer-logo {
max-width: 350px;
height: auto;
}
.payment-logo {
max-width: 140px;
height: auto;
}
.social-icon-img {
max-width: 35px;
height: auto;
}
.mobile-menu-wrap {
width: 200px;
height: calc(100vh - 70px);
overflow-y: auto;
background: var(--color-alpha);
background: linear-gradient(0deg, var(--color-alpha) 0%, #2D5A3D 100%);
position: fixed;
top: 0;
left: 0;
z-index: 99;
transform: translateX(-768px);
padding: 40px 20px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: all 1s;
}
.mobile-menu-wrap .header-menu-ul {
margin: 0;
padding: 0;
}
.mobile-menu-wrap .has-dropdown > ul.dropdown-menu {
display: block;
position: static;
background: transparent;
box-shadow: none;
padding: 0;
}
.mobile-menu-wrap .has-dropdown > ul.dropdown-menu li a {
padding: 6px 0;
}
.mobile-menu-wrap .has-dropdown > ul.dropdown-menu li.dropdown-heading {
padding: 12px 0 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
border-top: 1px solid rgba(255, 255, 255, 0.14);
margin-top: 10px;
}
.mobile-menu-wrap-show {
transform: translateX(0);
transition: all 0.7s;
}
.mobile-menu-wrap li:not(:last-child) {
margin-bottom:10px;
}
.mobile-menu-wrap .close-ico {
width: 30px;
height: 30px;
background-color: var(--color-white);
color: var(--secondary-color);
border-radius: 100%;
position: relative;
top: -30px;
right: 0px;
transition: all 0.3s;
}
.mobile-menu-wrap .close-ico:hover {
background-color: var(--color-alpha);
}
.mobile-menu-wrap .close-ico:hover svg {
fill: var(--color-white);
}
.mobile-menu-wrap li a {
color: var(--color-white);
font-size: 14px;
}
header.fixed {
background-color: var(--color-alpha);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transition: all 0.3s;
}
footer {
background-color: var(--color-white);
padding: 50px 0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.footer-row {
display: flex;
grid-gap: 50px;
}
.footer-left-col {
width: 33.33%;
}
.footer-right-col {
width: 66.66%;
display: flex;
}
.footer-right-col .footer-col {
width: calc(100% / 3);
}
.footer-col p {
font-size: 16px;
font-weight: 500;
text-transform: none;
color: var(--color-black);
margin-top: 15px;
}
.footer-col h6 {
font-weight: 600;
font-size: 19px;
color: var(--color-alpha);
line-height: 34px;
font-family: var(--font-secondary);
margin-bottom: 30px;
white-space: nowrap;
}
.footer-col .footer-link li a {
color: var(--color-black);
line-height: 30px;
font-size: 20px;
font-weight: 500;
font-family: var(--font-secondary);
transition: all 0.5s;
}
.footer-col .footer-link li:not(:last-child) {
padding-bottom: 15px;
}
.hover-text {
transition: all 0.3s;
}
.hover-text:hover {
color: var(--color-alpha) !important;
}
footer .social-links {
grid-gap: 15px;
}
footer .social-links img {
max-width: 35px;
}
.sub-footer-section {
background-color: var(--color-alpha);
padding: 35px 0;
}
.sub-footer-section h5 {
color: var(--color-white);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 500;
line-height: 30px;
font-family: var(--font-secondary);
margin-bottom: 30px;
}
.sub-footer-section p {
font-size: 15px;
font-weight: 400;
line-height: 22px;
color: #FFD700;
font-family: var(--font-secondary);
margin-bottom: 0;
}
.text-center {
text-align: center;
}
.fank-hero-section {
background: url("../images/greenbackground.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fank-hero-wrapper {
display: flex;
align-items: center;
grid-gap: 16px;
padding: 68px 0;
}
.fank-hero-cover img {
max-width: 900px;
}
.fank-hero-content {
display: flex;
flex-direction: column;
}
.fank-hero-heading {
font-weight: 400;
font-size: 78px;
line-height: 115%;
color: var(--color-white);
display: flex;
flex-direction: column;
margin-bottom: 22px;
}
.fank-hero-heading span {
color: #3ac1cd;
}
.fank-hero-description {
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: #FFF8DC;
margin-bottom: 65px;
}
.fank-download-button {
padding: 18px;
border-radius: 18px;
background: linear-gradient(180deg, #f7b656 0%, #ffe279 100%);
font-weight: 600;
font-size: 25px;
line-height: 1;
color: #1B4332;
position: relative;
display: block;
overflow: hidden;
width: 100%;
max-width: 300px;
border: none;
transition: all 0.3s;
text-align: center;
}
.text-center .fank-download-button {
display: inline-block;
width: auto;
}
.fank-download-button:hover {
background: linear-gradient(180deg, #00000061 0%, #000 100%);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: var(--color-white);
}
.fank-download-stats-section {
background: linear-gradient(180deg, #f7b656 0%, #ffe279 100%);
--download-items-padding: 50px;
}
.fank-download-stats-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 26px 0;
}
.fank-download-stats {
display: flex;
align-items: center;
padding: 0 var(--download-items-padding);
color: #1B4332;
position: relative;
}
.fank-download-stats:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
height: 100%;
width: 2px;
background-color: #e0cb2a;
}
.fank-download-link-group {
display: flex;
align-items: center;
flex-direction: column;
color: #7301a8;
padding-left: var(--download-items-padding);
}
.fank-download-flex-link {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-gap: 38px;
}
.download-stats-icon {
width: 70px;
height: 70px;
margin-right: 20px;
}
.download-stats-text,
.fank-download-link-group p {
font-weight: 400;
font-size: 26px;
line-height: 1.5;
color: #7301a8;
font-family: var(--font-secondary);
display: flex;
flex-direction: column;
}
.play-fantasy-section {
background-color: #F0F8F0;
background-image: url(../images/service-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 40px 0 80px;
min-height: 600px;
}
.play-fantasy-section.play-fantasy-section--compact {
padding: 24px 0 32px;
min-height: auto;
}
.play-fantasy-section .fank-section-title {
max-width: 1100px;
margin: 0 auto 15px;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
text-wrap: balance;
font-size: clamp(24px, 6vw, 54px);
line-height: 1.2;
}
.play-fantasy-section .fank-section-title span {
color: #3ac1cd;
}
.play-fantasy-section .fank-section-sub-title {
color: #2c3e50 !important;
}
.play-fantasy-swiper-box {
background-color: var(--color-white);
height: 100%;
border-radius: 58px;
text-align: center;
}
.play-fantasy-img-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0px 3px 5px #d7d3ea;
border-top-left-radius: 58px;
border-top-right-radius: 58px;
height: 356px;
transition: all 0.3s;
}
.play-fantasy-img-title {
background-image: url(../images/service-img-1.webp);
}
.play-fantasy-img-classic {
background-image: url(../images/service-img-2.webp);
}
.play-fantasy-img-popular {
background-image: url(../images/service-img-3.webp);
}
.play-fantasy-img-crush-mode {
background-image: url(../images/service-img-4.webp);
}
.play-fantasy-play-ico-box {
height: 90px;
width: 90px;
background: #00000061;
border-radius: 100%;
transition: all 0.3s;
}
.play-fantasy-swiper-box:hover .play-fantasy-play-ico-box {
background-color: var(--color-black);
}
.play-fantasy-swiper-box .play-fantasy-play-ico-box:hover {
background-color: #353535;
}
.play-fantasy-swiper-description-box {
padding: 20px 50px 35px;
min-height: 245px;
}
.play-fantasy-title img {
margin: 0 20px 0 0;
}
.play-fantasy-title h3 {
font-weight: 600;
font-size: 32px;
font-family: var(--font-secondary);
text-transform: uppercase;
color: #543bc3;
text-shadow: 0px 1px 4px rgb(0 0 0 / 25%);
}
.play-fantasy-swiper-description-box p {
font-weight: 400;
font-size: 16px;
font-family: var(--font-secondary);
color: #212529;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
}
.play-fantasy-swiper {
margin-top: 60px;
}
.play-fantasy-ttile-crush-img {
max-width: 62px;
}
.fank-installation-section {
background: url("../images/install-background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
position: relative;
}
.fank-installation-section .fank-section-title {
text-align: center;
margin-bottom: 12px;
}
.fank-installation-section .fank-section-title span {
color: #4894ef;
}
.fank-installation-section .fank-section-sub-title {
max-width: 900px;
margin: 0 auto;
}
.fank-installation-steps-grid {
margin-top: 55px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 25px;
}
.fank-installation-steps-column {
height: 100%;
}
.fank-installation-steps-card {
background: linear-gradient(180deg, #E8F5E8 0%, #D4F1D4 100%);
border-radius: 24px;
padding: 26px;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
}
.fank-installation-steps-numbering {
display: flex;
flex-direction: column;
}
.fank-installation-steps-digit {
font-weight: 600;
font-size: 23px;
line-height: 34px;
text-align: center;
color: #1B4332;
margin-bottom: 13px;
}
.fank-installation-steps-desc {
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #4a1862;
max-width: 232px;
margin: 0 auto 12px;
}
.fank-installation-steps-info-card {
background: #fdfdfd;
border-radius: 18px;
padding: 25px;
height: 100%;
display: flex;
flex-direction: column;
}
.fank-installation-steps-info-card p {
font-weight: 400;
font-size: 15px;
line-height: 22px;
color: #353535;
text-align: left;
margin-bottom: 20px;
}
.fank-installation-steps-info-card p .break-all {
word-break: break-all;
}
.fank-installation-action-group {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: auto;
}
.fank-installation-action-group>a {
font-weight: 600;
font-size: 16px;
line-height: 24px;
transition: all 0.35s;
font-family: var(--font-secondary);
}
.fank-installation-action-group>a:hover,
.fank-installation-action-group>a:active {
text-decoration: underline;
}
.fank-installation-action-group>a:nth-child(1) {
margin-right: 30px;
color: #e36b6b;
}
.fank-installation-action-group>a:nth-child(2) {
color: #29e119;
}
.fank-feature-section {
background: url("../images/greenbackground.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 54px 0;
position: relative;
}
.fank-feature-header {
margin-bottom: 80px;
}
.fank-feature-section .fank-section-title {
text-align: center;
color: #ffffff;
}
.fank-feature-section .fank-section-sub-title {
margin: 0 auto;
}
.fank-feature-grid-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 68px;
text-align: center;
}
.fank-feature-grid-column {
display: flex;
flex-direction: column;
}
.fank-feature-logo {
width: 150px;
height: 150px;
border-radius: 100%;
background-color: var(--color-white);
color: var(--color-alpha);
position: relative;
margin: 0 auto;
z-index: 0;
padding: 50px;
}
.fank-feature-logo:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(255 255 255 / 50%);
width: calc(100% + 50px);
height: calc(100% + 50px);
border-radius: calc(100% + 50px);
z-index: -1;
}
.fank-feature-content {
display: flex;
flex-direction: column;
}
.fank-feature-title {
font-weight: 600;
font-size: 26px;
line-height: 1.5;
color: var(--color-alpha);
margin-top: 50px;
margin-bottom: 9px;
font-family: var(--font-secondary);
}
.fank-feature-details {
margin-bottom: 0;
font-weight: 500;
font-size: 18px;
line-height: 1.47;
text-align: center;
color: #2c2400;
}
.reddy-anna-games-section {
background: url('../images/greenbackground.webp') center/cover no-repeat;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.reddy-anna-games-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.reddy-anna-games-section .container {
position: relative;
z-index: 1;
}
.reddy-anna-games-title {
color: #fff;
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.reddy-anna-games-subtitle {
color: #ffffff;
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 30px;
text-align: center;
line-height: 1.6;
}
.reddy-anna-games-section .text-center.mb-5 h3 {
color: #D4AF37;
}
.games-info-list {
max-width: 900px;
margin: 0 auto 60px;
padding: 0 20px;
}
.games-info-list ul {
list-style: disc;
padding-left: 20px;
margin: 0;
text-align: left;
}
.games-info-list li {
color: #e0e0e0;
font-size: 1.15rem;
line-height: 1.6;
margin-bottom: 15px;
}
.games-info-list li::marker {
color: #ff6b35;
}
.games-info-list li strong {
color: #fff;
font-weight: 600;
}
.games-row {
display: flex;
gap: 20px;
margin-bottom: 30px;
justify-content: center;
}
.games-row-five {
flex-wrap: nowrap;
}
.games-row-two {
justify-content: center;
}
.game-card {
position: relative;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 200px;
flex: 1;
max-width: 220px;
}
.game-card-large {
min-height: 280px;
max-width: 590px;
}
.game-card[data-game="cricket"] {
position: relative;
}
.game-card[data-game="cricket"] {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('../images/cricketbackground.webp');
background-size: cover;
background-position: center;
}
.game-card[data-game="football"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/footballbackground.webp');
}
.game-card[data-game="tennis"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/tennisbackground.webp');
}
.game-card[data-game="horse-racing"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/horceracingbackground.webp');
}
.game-card[data-game="greyhound"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/greyhoundracingbackground.webp');
}
.game-card[data-game="e-cricket"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/ecricketbackground.webp');
}
.game-card[data-game="evolution"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/evolutionbackground.webp');
}
.game-card[data-game="aviator"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/aviatorbackground.webp');
}
.game-card[data-game="sportsbook"] {
background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('../images/sportsbookbackground.webp');
}
.game-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
transition: all 0.3s ease;
}
.game-card:hover .game-card-overlay {
background: rgba(0,0,0,0.7);
}
.game-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.game-card-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
width: 100%;
padding: 20px;
}
.game-title {
color: #fff;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.play-now-btn {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: #fff;
border: none;
padding: 12px 25px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}
.play-now-btn:hover {
background: linear-gradient(45deg, #ee5a24, #ff6b6b);
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}
@media (max-width: 1200px) {
.games-row-five {
justify-content: center;
flex-wrap: nowrap;
overflow-x: auto;
}
.games-row-five .game-card {
min-width: 180px;
flex-shrink: 0;
}
}
@media (max-width: 768px) {
.reddy-anna-games-title {
font-size: 2.2rem;
}
.reddy-anna-games-subtitle {
font-size: 1rem;
padding: 0 20px;
}
.games-info-list {
padding: 0 15px;
margin-bottom: 40px;
}
.games-info-list ul {
padding-left: 15px;
}
.games-info-list li {
font-size: 1rem;
margin-bottom: 12px;
}
.games-info-list li strong {
font-size: 1.1rem;
}
.games-row {
flex-direction: column;
align-items: center;
}
.game-card {
max-width: 90%;
width: 100%;
}
.games-row-five .game-card:nth-child(4),
.games-row-five .game-card:nth-child(5) {
margin-top: 0;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.games-row-five {
flex-wrap: wrap;
justify-content: center;
}
.games-row-five .game-card {
flex: 0 0 calc(33.333% - 15px);
max-width: calc(33.333% - 15px);
}
.games-row-five .game-card:nth-child(4),
.games-row-five .game-card:nth-child(5) {
margin-top: 20px;
flex: 0 0 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
.reddy-anna-how-to-play-section {
background: #fafafa;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.reddy-anna-how-to-play-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
opacity: 0.3;
}
.how-to-play-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.how-to-play-title {
font-size: 48px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
text-shadow: none;
font-family: var(--font-secondary);
}
.how-to-play-header ul.fank-step-play-fantasy li {
color: #2c3e50 !important;
font-size: 18px;
font-weight: 500;
margin-bottom: 12px;
line-height: 1.6;
}
.how-to-play-subtitle {
font-size: 18px;
color: #5a6c7d;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
font-weight: 400;
}
.how-to-play-steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.step-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px 25px;
text-align: center;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.step-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
background: rgba(255, 255, 255, 1);
}
.step-number {
position: absolute;
top: -15px;
right: 20px;
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
}
.step-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}
.step-title {
font-size: 22px;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
font-family: var(--font-secondary);
}
.step-description {
font-size: 15px;
color: #5a6c7d;
line-height: 1.6;
margin: 0;
}
.pro-tips-section {
background: #ffffff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 1px solid #e1e8ed;
position: relative;
z-index: 2;
}
.pro-tips-title {
font-size: 28px;
font-weight: 600;
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
text-shadow: none;
font-family: var(--font-secondary);
}
.fank-feature-section .pro-tips-title {
color: #FFD700 !important;
}
.pro-tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.tip-item {
display: flex;
align-items: center;
background: #f8f9fa;
padding: 20px;
border-radius: 15px;
border: 1px solid #e1e8ed;
transition: all 0.3s ease;
}
.tip-item:hover {
background: #ffffff;
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.tip-icon {
font-size: 24px;
margin-right: 15px;
flex-shrink: 0;
}
.tip-item p {
color: #2c3e50;
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
@media (max-width: 768px) {
.reddy-anna-how-to-play-section {
padding: 60px 0;
}
.how-to-play-title {
font-size: 36px;
}
.how-to-play-subtitle {
font-size: 16px;
}
.how-to-play-steps-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.step-card {
padding: 25px 20px;
}
.pro-tips-section {
padding: 30px 20px;
}
.pro-tips-grid {
grid-template-columns: 1fr;
}
.tip-item {
padding: 15px;
}
}
@media (max-width: 480px) {
.how-to-play-title {
font-size: 28px;
}
.step-icon {
font-size: 36px;
}
.step-title {
font-size: 18px;
}
.pro-tips-title {
font-size: 22px;
}
}
.how-to-play-steps-grid {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.step-card {
position: relative;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 18px;
padding: 24px 26px;
color: var(--color-white);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.step-card::after {
content: "";
position: absolute;
top: -20px;
right: 24px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.0) 60%);
pointer-events: none;
}
.step-number {
position: absolute;
top: 16px;
right: 20px;
font-weight: 600;
font-size: 14px;
line-height: 1;
color: #FFD700;
font-family: var(--font-secondary);
}
.step-title {
font-size: 20px;
line-height: 1.4;
margin-bottom: 12px;
color: #FFD700;
font-weight: 600;
font-family: var(--font-secondary);
}
.step-description {
font-size: 16px;
line-height: 1.7;
color: #ffffff;
font-weight: 400;
font-family: var(--font-secondary);
}
.reddy-anna-how-to-play-section {
background: #F0F8F0;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.reddy-anna-how-to-play-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='grain' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='50' cy='50' r='1' fill='%23ffffff' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23grain)'/%3E%3C/svg%3E") repeat;
opacity: 0.3;
}
.how-to-play-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.how-to-play-title {
font-size: 48px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 20px;
text-shadow: none;
font-family: var(--font-secondary);
}
.how-to-play-subtitle {
font-size: 18px;
color: #5a6c7d;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
font-weight: 400;
}
.pro-tips-section {
background: #ffffff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid #e8f4e8;
position: relative;
z-index: 2;
}
.reddy-anna-how-to-play-section .pro-tips-title {
font-size: 28px;
font-weight: 600;
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
text-shadow: none;
font-family: var(--font-secondary);
}
.pro-tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.tip-item {
display: flex;
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 24px;
border-radius: 15px;
border: 2px solid #e8f4e8;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.tip-item:hover {
background: linear-gradient(145deg, #ffffff, #ffffff);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
border-color: #ffd700;
}
.tip-icon {
font-size: 32px;
margin-right: 20px;
flex-shrink: 0;
min-width: 32px;
text-align: center;
}
.tip-item p {
color: #2c3e50;
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
}
.tip-item p strong {
color: #ffd700;
font-weight: 600;
}
.reddy-anna-how-to-play-section .step-card {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.reddy-anna-how-to-play-section .step-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.reddy-anna-how-to-play-section .step-card::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background-color: rgba(255, 215, 0, 0.1);
border-radius: 50%;
z-index: 1;
}
.reddy-anna-how-to-play-section .step-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 14px;
font-weight: 600;
color: rgba(255, 215, 0, 0.7);
z-index: 2;
}
.reddy-anna-how-to-play-section .step-icon {
font-size: 48px;
margin-bottom: 15px;
color: #fff;
z-index: 2;
}
.reddy-anna-how-to-play-section .step-title {
font-size: 22px;
font-weight: 600;
color: #1B4332;
margin-bottom: 15px;
z-index: 2;
}
.reddy-anna-how-to-play-section .step-description {
font-size: 16px;
color: #fff;
line-height: 1.6;
margin: 0;
z-index: 2;
}
.fank-brand-section {
background-color: var(--color-white);
position: relative;
}
.fank-brand-section:before,
.fank-brand-section:after {
-webkit-clip-path: polygon(0% 0%, 92.5% 0%, 100% 50%, 92.5% 100%, 0% 100%);
clip-path: polygon(0% 0%, 92.5% 0%, 100% 50%, 92.5% 100%, 0% 100%);
content: "";
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.fank-brand-section:before {
width: 40%;
background-color: #E8F5E8;
z-index: 0;
}
.fank-brand-section:after {
width: calc(40% - 20px);
background-color: #F0F8F0;
z-index: 1;
}
.fank-brand-flex-items {
display: flex;
align-items: center;
}
.fank-brand-flex-header {
z-index: 2;
padding: 24px 0;
}
.fank-brand-flex-header .fank-section-title span {
color: #FFD700;
}
.fank-brand-flex-header .fank-section-sub-title {
color: #1B4332;
font-weight: 600;
font-size: 18px;
margin-top: 8px;
}
.fank-brand-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 50px;
z-index: 2;
margin-left: auto;
}
.fank-brand-placeholder {
width: 100%;
max-width: 175px;
}
.fank-faq-section {
background: url("../images/greenbackground.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 56px 0;
}
.fank-faq-section .fank-section-title {
display: block;
margin-bottom: 56px;
color: #FFFFFF;
white-space: nowrap;
}
.goex777-page .fank-section-title,
.goex777-page .fank-section-sub-title,
.goex777-page h1,
.goex777-page h2,
.goex777-page h3,
.goex777-page p {
text-align: center !important;
}
.goex777-page .fank-step-play-fantasy,
.goex777-page .fank-step-play-fantasy li {
text-align: left !important;
}
.goex777-page a {
color: #FFD700 !important;
}
.goex777-page a:hover {
color: #f8d224 !important;
}
.goex777-page .fank-hero-heading,
.goex777-page .fank-hero-subtext {
text-align: left !important;
}
.goex777-page .fank-download-button {
color: #1B4332 !important;
}
.fank-brand-flex-header .fank-section-title {
color: #1B4332;
}
.fank-faq-section .fank-section-title span {
color: #FFD700 !important;
}
.fank-accordion {
background-color: rgba(255, 255, 255, 0.95);
color: #1B4332;
cursor: pointer;
padding: 18px 80px 18px 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-weight: 500;
font-size: 20px;
transition: 0.4s;
border-radius: 10px;
position: relative;
}
.fank-accordion {
border: 1px solid transparent;
transition: all 0.3s;
}
.fank-accordion:hover {
border-color: var(--color-alpha);
}
.fank-accordion-wrapper:not(:last-child) {
margin-bottom: 16px;
}
.fank-accordion.active {
border-radius: 10px 10px 0 0;
}
.fank-accordion:after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23697689' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z' opacity='.4'%3E%3C/path%3E%3Cpath fill='%23697689' d='M12 15.01c-.19 0-.38-.07-.53-.22l-3.53-3.53a.754.754 0 010-1.06c.29-.29.77-.29 1.06 0l3 3 3-3c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-3.53 3.53c-.15.15-.34.22-.53.22z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
width: 32px;
height: 32px;
position: absolute;
top: 50%;
right: 2%;
background-position: center;
background-size: contain;
transform: translateY(-50%);
transition: all 0.35s;
font-size: medium;
font-weight: 500;
}
.fank-accordion.active:after {
transform: translateY(-50%) rotate(180deg);
transition: all 0.35s;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
border-radius: 0 0 10px 10px;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
font-size: 17px;
line-height: 1.5;
font-weight: 400;
color: #1B4332;
margin: 0;
user-select: none;
-moz-user-select: none;
}
.fank-accordion.active+.panel {
padding: 18px 18px;
border-top: 1px solid #e6e6e6;
}
.panel .simple-list li {
line-height: 2;
}
.rbc-page .fank-accordion {
background-color: rgba(255, 255, 255, 0.95);
color: #1B4332;
border: 1px solid #e6e6e6;
padding: 18px 80px 18px 18px;
}
.rbc-page .fank-accordion:hover {
border-color: #D4AF37;
}
.rbc-page .fank-accordion:after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill='%23697689' d='M12 15.01c-.19 0-.38-.07-.53-.22l-3.53-3.53a.754.754 0 010-1.06c.29-.29.77-.29 1.06 0l3 3 3-3c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-3.53 3.53c-.15.15-.34.22-.53.22z'/%3E%3C/svg%3E");
}
.rbc-page .panel {
background-color: #ffffff;
color: #1B4332;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
border-left: 3px solid #D4AF37;
}
.rbc-page .panel p {
color: #2c3e50;
}
.rbc-page .fank-accordion.active + .panel {
border-top: 1px solid #e6e6e6;
}
.rbc-page a.gold-link { color: #D4AF37 !important; }
.rbc-page h2,
.rbc-page h3,
.rbc-page .fank-section-title {
text-align: center !important;
}
.rbc-page p,
.rbc-page .fank-section-sub-title,
.rbc-page .panel p {
text-align: center !important;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
z-index: 99;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 100%;
background-color: var(--color-alpha);
position: absolute;
top: -40px;
right: 0;
}
.close-button:hover {
background-color: var(--color-black);
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.play-fantasy-modal .modal-content {
max-width: 600px;
width: 100%;
height: auto;
}
.play-fantasy-modal-body {
height: 400px;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
.d-none {
display: none;
}
.why-we-love-fantasy-khildai-section {
background-color: #faf5ff;
background-image: url(../images/ribin-cover.png);
padding: 80px 0;
}
.why-we-love-fantasy-khildai-section .fank-section-title span {
color: #3ac1cd;
}
.why-we-love-fantasy-khildai-review-wrap .swiper-container {
position: relative;
width: 100%;
overflow-x: hidden;
}
.why-we-love-fantasy-khildai-review-wrap .swiper-slide {
transition: all 200ms linear;
transform: scale(0.8);
}
.quote-container {
min-height: 450px;
position: relative;
background: linear-gradient(180deg, #FFFFFF 0%, #F0F8F0 100%);
box-shadow: rgb(17 17 26 / 10%) 0px 0px 0px, rgb(17 17 26 / 10%) 0px 8px 18px, rgb(17 17 26 / 10%) 0px 16px 28px;
height: auto;
overflow: hidden;
border: 0px;
border-radius: 25px;
text-align: center;
margin: 0 0 40px;
padding: 30px 18px;
border: 1px solid transparent;
transition: all 0.3s;
}
.why-we-love-fantasy-khildai-review-wrap .swiper-slide-active .quote-container {
border-color: var(--color-alpha);
}
.quote-container:hover {
border-color: var(--color-black);
}
.quote-container::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(../images/shedow.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
.why-we-love-fantasy-khildai-review-wrap .swiper-slide-active {
transform: scale(1);
}
.position-relative {
position: relative;
}
.mx-auto {
margin: 0 auto;
}
.quote-container h5 {
color: #1B4332;
font-size: 28px;
font-weight: 600;
font-family: var(--font-secondary);
text-align: center;
margin-top: 15px;
}
.quote-container h6 {
color: #242324;
font-size: 20px;
font-weight: 500;
font-family: var(--font-secondary);
margin-bottom: 10px;
}
.quote-container-winner-wrap {
background-image: url(../images/green_icon.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 20px 52px 47px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
width: 100%;
}
.quote-container-winner-wrap h4 {
font-size: 27px;
color: var(--color-white);
font-family: var(--font-secondary);
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0;
}
.quote-container p {
font-size: 20px;
text-align: center;
font-weight: 500;
padding: 0 20px;
line-height: 27px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
}
.why-we-love-fk-review .swiper-arrow {
width: 60px;
height: 60px;
background-color: var(--color-white);
border-radius: 100%;
margin-top: 0;
top: 50%;
transform: translateY(-50%);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
transition: all 0.3s;
}
.why-we-love-fk-review .swiper-arrow:hover {
background-color: var(--color-alpha);
}
.why-we-love-fk-review .swiper-arrow:hover svg {
fill: var(--color-white);
}
.why-we-love-fk-review .swiper-arrow::after {
display: none;
}
.why-we-love-fk-review .swiper-arrow svg {
width: 40px;
height: 40px;
}
.fank-about-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 50px;
}
.fank-about-content {
width: 100%;
max-width: calc(58.33% - 16px);
}
.fank-about-app-image {
width: 100%;
max-width: calc(41.666667% - 16px);
}
.fank-about-content h1 {
font-weight: 600;
font-size: 32px;
line-height: 1.18;
color: var(--color-bravo);
font-family: var(--font-secondary);
text-align: left;
margin-bottom: 24px;
}
.fank-about-content h1 span {
color: #1B4332;
}
.fank-about-content p {
font-size: 16px;
font-weight: 400;
line-height: 2;
}
.fank-about-content p:not(:last-child) {
margin-bottom: 32px;
}
.fank-about-content a {
color: #007bff;
}
.fank-about-content a:hover {
color: #0056b3;
}
.fank-amazing-feature-section {
background-color: #e6edf7;
margin-top: 48px;
padding: 115px 0 120px;
}
.fank-amazing-feature-grid {
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(3, 1fr);
}
.fank-amazing-header {
margin-bottom: 64px;
}
.fank-amazing-header h2 {
margin-bottom: 0;
}
.fank-amazing-feature-card {
background-color: var(--color-white);
border-radius: 10px;
padding: 40px 30px;
position: relative;
overflow: hidden;
height: 100%;
}
.fank-amazing-feature-bubble {
width: 150px;
height: 150px;
background-color: #1B4332;
border-radius: 200px;
position: absolute;
top: -75px;
right: -75px;
border: 5px solid #504f93;
z-index: 1;
transition: all .6s ease-in-out;
opacity: .5;
}
.fank-amazing-feature-card:hover .fank-amazing-feature-bubble {
transform: scale(10);
transition: all .9s ease-in-out;
}
.fank-amazing-feature-content-column {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
z-index: 2;
}
.fank-amazing-feature-icon-wrapper {
width: 70px;
height: 70px;
border-radius: 100px;
background-color: var(--color-alpha);
transition: all .9s ease-in-out;
}
.fank-amazing-feature-card:hover .fank-amazing-feature-icon-wrapper {
background-color: var(--color-white);
transition: all .6s ease-in-out;
}
.fank-amazing-feature-icon {
padding: 20%;
color: var(--color-white);
transition: all .9s ease-in-out;
}
.fank-amazing-feature-card:hover .fank-amazing-feature-icon {
transition: all .6s ease-in-out;
color: var(--color-alpha);
}
.fank-amazing-feature-title {
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
margin: 26px 0 16px;
}
.fank-amazing-feature-text {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
transition: all .9s ease-in-out;
}
.fank-amazing-feature-card:hover .fank-amazing-feature-text {
transition: all .6s ease-in-out;
color: var(--color-white);
}
.fank-contact-us-section {
--con-sec-gutter-space: 15px;
background-color: #eee;
padding: 100px 0;
}
.fank-contact-row {
display: flex;
justify-content: space-between;
}
.fank-contact-details {
width: 100%;
max-width: calc(58.33% - var(--con-sec-gutter-space));
margin-right: var(--con-sec-gutter-space);
}
.fank-contact-map {
width: 100%;
max-width: calc(41.666667% - var(--con-sec-gutter-space));
margin-left: var(--con-sec-gutter-space);
}
.fank-contact-card {
width: 100%;
height: 100%;
background-color: var(--color-white);
padding: 50px 0 30px 30px;
border-radius: 20px 0 0 20px;
box-shadow: 20px 22px 44px #cccc;
position: relative;
display: flex;
}
.break-all {
word-break: break-all;
}
.fank-contact-card::before {
background: linear-gradient(to top right, #1B4332 -5%, #2D5A3D 100%);
content: "";
width: 20%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
}
.fank-contact-form,
.fank-contact-link-wrapper {
width: 100%;
max-width: 47%;
}
.fank-contact-form-header {
display: flex;
flex-direction: column;
margin-bottom: 35px;
}
.fank-contact-form-header h1 {
color: var(--color-alpha);
font-size: 40px;
font-weight: 600;
margin-bottom: 10px;
line-height: 1.2;
}
.fank-contact-form-header p {
color: var(--color-black);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 0;
}
.fank-contact-form-container {
width: 100%;
}
.fank-contact-form-row {
margin-bottom: 16px;
}
.form-input-control {
border-radius: 0;
border: none;
border-bottom: 1px solid #ccc;
display: block;
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
color: #495057;
background-color: var(--color-white);
resize: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-input-control:focus {
outline: 0;
box-shadow: none;
color: var(--color-bravo);
background-color: var(--color-white);
border-color: var(--color-alpha);
}
.fank-contact-form-submission {
background: linear-gradient(to top right, #1B4332, #2D5A3D, #1B4332, #2D5A3D);
border: none;
color: var(--color-white);
padding: 12px 15px;
width: 100%;
border-radius: 35px;
cursor: pointer;
font-size: 16px;
margin-top: 25px;
background-size: 100% 300%;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.fank-contact-form-submission:hover {
background-position: 0 100%;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.fank-contact-link-wrapper {
width: 50%;
position: absolute;
background-color: #2d2d2d;
right: 1px;
top: 50%;
padding: 40px;
border-radius: 25px 0 0 25px;
color: #fff;
transform: translateY(-50%);
}
.fank-contact-link-wrapper h2 {
font-family: var(--font-secondary);
font-size: 24px;
font-weight: 500;
line-height: 1.16;
margin-bottom: 24px;
}
.fank-contact-link-list {
padding: 0;
display: flex;
flex-direction: column;
margin: 0;
}
.fank-contact-link-list .fank-contact-link-list-item:not(:last-child) {
margin-bottom: 30px;
}
.fank-contact-link {
display: flex;
align-items: center;
width: 100%;
color: var(--color-white);
font-family: var(--font-secondary);
font-size: 14px;
line-height: 1.5;
font-weight: 400;
}
.fank-contact-link:hover {
color: var(--color-white);
}
.fank-contact-link-icon {
min-width: 20px;
min-height: 20px;
width: 20px;
height: 20px;
margin-right: 10px;
}
.fank-contact-link-text {
display: inline-block;
color: #4894ef;
}
.text-white {
color: var(--color-white);
}
.fank-follow-social {
margin-top: 35px;
}
.fank-follow-social p {
font-size: 16px;
font-weight: 300;
letter-spacing: 0;
line-height: 1;
margin-bottom: 16px;
}
.fank-follow-social-link-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
.fank-follow-social-link {
width: 40px;
height: 40px;
color: var(--color-bravo);
transition: all .35s ease-in-out;
}
.fank-follow-social-link:hover {
color: var(--color-alpha);
transform: scale(1.1);
transition: all .35s ease-in-out;
}
.fank-contact-map h4 {
font-size: 26px;
line-height: 1.5;
font-weight: 300;
margin-bottom: 30px;
text-align: center;
font-family: var(--font-secondary);
color: var(--color-alpha);
}
.map_bind {
width: 100%;
height: 92%;
}
.map_bind iframe{
border-radius: 20px 0;
}
.rng-certificate-section p{
font-size: 18px;
}
.rng-certificate-section h3{
font-family: var(--font-primary);
font-size: 28px;
font-weight: 500;
}
.game-feature-row{
display: flex;
flex-wrap: wrap;
margin-top: 50px;
align-items: center;
}
.game-feature-col {
width: calc(100% / 3);
}
.game-feature-col h4{
font-size: 24px;
font-weight: 600;
color: #212529;
font-family: var(--font-secondary);
margin-bottom: 10px;
}
.game-feature-col p{
font-size: 16px;
font-weight: 400;
color: #212529;
font-family: var(--font-secondary);
margin-bottom: 0;
}
.game-feature-col li{
list-style: none;
transition: all 0.3s;
}
.game-feature-col li:hover h4{
color: var(--color-alpha);
}
.game-feature-col li:not(:last-child){
margin-bottom: 20px;
}
.game-feature-img-wrap img{
position: relative;
left: 20px;
}
.all-policy-details-wrap{
margin-top: 30px;
}
.all-policy-details-wrap h3{
font-size: 28px;
font-weight: var(--font-secondary);
}
.all-policy-details-wrap p,.all-policy-details-wrap li,.all-policy-details-wrap span{
font-size: 16px;
}
.all-policy-details-wrap li{
list-style: disc;
font-family: var(--font-secondary);
}
.all-policy-details-wrap li:not(:last-child){
margin-bottom: 15px;
}
span.policy-icon{
padding-right: 8px;
font-size: 26px;
font-weight: 500;
color: var(--color-alpha);
}
.terms-box {
background-color: rgb(143 143 143 / 10%);
padding: 20px;
}
.play-fantasy-img-box,.fank-download-button,.fank-accordion,.quote-container,.cursor-pointer.trigger,.footer-col .footer-link li a,.header-menu-ul a,.fank-installation-action-group a,.fank-faq-section .fank-section-title span,.swiper-container .swiper-arrow,.download-stats-text span,.swiper-wrapper .swiper-slide,header .container > a,.footer-col a,.fank-hero-heading span,.fank-section-title span,.fank-accordion-wrapper .panel a,.fank-installation-steps-info-card .break-all,.fank-download-button span{
transition: none;
}
.mobile-menu-wrap {
display: none;
}
.mobile-app-logo{
display: flex;
align-items: center;
justify-content: center;
grid-gap: 10px;
background: linear-gradient(0deg, var(--color-alpha) 0%, #2D5A3D 100%);
padding: 15px 0;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
position: sticky;
bottom: 0;
z-index: 99;
}
.mobile-app-logo img {
max-width: 150px;
margin: 0;
}
.whatsapp-btn-wrap{
width: 40px;
height: 40px;
border-radius: 100%;
background-color: var(--color-white);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.fank-download-col{
width: calc(100% / 2);
float: left;
background: #ffda9f;
padding: 32px;
border-radius: 24px;
}
.fank-download-col.android_dowanload ul,.fank-download-col.ios_dowanlod ul{
padding:0px
}
.fank-download-col.android_dowanload li,.fank-download-col.ios_dowanlod li,ul.fank-step-play-fantasy li{
font-size: 16px;
font-weight: 600;
color: #ffffff;
font-family: var(--font-secondary);
margin-bottom: 10px;
line-height: 28px;
position: relative;
padding-left: 25px;
}
ul.fank-step-play-fantasy li::before {
content: '→';
position: absolute;
left: 0;
color: currentColor;
font-size: 18px;
font-weight: bold;
}
.fank-download-cols{
width: calc(100% / 1);
float: left;
background: #ffda9f;
padding: 32px;
border-radius: 24px;
}
.fank-download-cols.android_dowanload ul,.fank-download-col.ios_dowanlod ul{
padding:0px
}
.fank-download-cols.android_dowanload li,.fank-download-col.ios_dowanlod li,ul.fank-step-play-fantasy li{
font-size: 16px;
font-weight: 600;
color: #ffffff;
position: relative;
padding-left: 25px;
font-family: var(--font-secondary);
margin-bottom: 10px;
line-height: 28px;
}
.android_dowanload .download_heading,.ios_dowanlod .download_heading{
margin: 0 0 0 10px;
}
.fank-android-ios-box,.fank-box-heading{
display: flex;
}
.android_dowanload{
margin-right: 2%;
}
.ios_dowanlod {
margin-left: 2%;
}
.fank-box-heading img.mobile-icon {
height: 25px;
width: 25px;
margin: 10px 0 0 0;
}
.fank-android-ios-box {
margin-top: 10px;
} 
.fank-box-heading .fank-download-link{
color: var(--color-alpha);
}
ul.fank-step-play-fantasy { color: inherit; }
ul.fank-step-play-fantasy li { color: inherit; }
.fank-section-header .fank-section-sub-title{
margin-bottom: 10px
}
.dropbtn {
border-radius: 18px;
background: transparent;
font-weight: 500;
font-size: 18px;
line-height: 1;
color: #fff;
position: relative;
display: block;
overflow: hidden;
border: none;
transition: all 0.3s;
text-transform: uppercase;
}
.dropbtn:hover, .dropbtn:focus {
}
.dropdown {
position: relative;
display: inline-block;
width: max-content;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 200px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 10px;
border-radius: 10px;
background: linear-gradient(180deg, #f7b656 0%, #ffe279 100%);
padding: 10px 0;
max-height: 200px;
overflow-y: auto;
}
header .dropdown-content a{
color: var(--color-alpha);
padding: 0px 15px;
text-decoration: none;
display: block;
font-size: 14px;
font-family: var(--font-secondary);
font-weight: 700;
text-align: left;
width: 100%;
}
.dropdown-content a:hover {color: #000;}
.dropdown .show {display: block;}
.dropdown a {
cursor: pointer;
display:flex;
}
header ul li .dropdown-content a {
margin-right: 0;
width: 100%;
}
.dropbtn span{
margin-right: 10px;
line-height: 0;
}
.dropbtn span svg{
width: 25px;
height: 25px;
}
.fank-hero-content .fank-download-button{
background: linear-gradient(180deg, #f7b656 0%, #ffe279 100%);
color: #1B4332;
border: none;
}
.fank-hero-content .fank-download-button:hover {
background: linear-gradient(180deg, #e3a64d 0%, #ffd966 100%);
color: #1B4332;
}
.fank-hero-content button.fank-download-button span:after {
content: "";
top: 5px;
transform: translate(100%) skew(-15deg);
width: 4.375rem;
height: 2.75rem;
position: absolute;
z-index: 1;
animation: svelte-b3sc0h-slide 2s infinite;
background: linear-gradient(98.44deg,rgb(3 255 178 / 0%) 22.31%,rgba(255,255,255,.331287) 50.8%,rgba(255,255,255,0) 76.4%);
}
@keyframes svelte-b3sc0h-slide {
0% {
transform: translate(-500%) skew(-15deg)
}
to {
transform: translate(500%) skew(-15deg)
}
}
.fank-hero-wrapper {
position: relative;
}
.speen-wheel-wrap {
position: relative;
width: 325px;
height: 325px;
transform: rotate(-90deg);
z-index: 0;
}
.box-0 .spin-wheel-point-crown-img {
position: absolute;
max-width: 190px;
transform: translate(-50%, -100%);
left: 50%;
margin-top: 20px;
z-index: 1;
}
.box-0 .spin-wheel-stand-img {
position: absolute;
max-width: 160px;
transform: translateX(-50%);
left: 50%;
z-index: -2;
bottom: -80px;
}
.box-0 {
position: absolute;
z-index: 0;
right: 50px;
}
.box-0::after {
content: "";
width: 405px;
height: 405px;
position: relative;
border-radius: 50%;
background-image: url(../images/imgpsh_fullsize_anim.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: all ease-in-out 5s;
position: absolute;
top: 51.7%;
transform: translate(-50%, -50%);
left: 50%;
z-index: -1;
}
.box-0::before {
content: "";
width: 355px;
height: 355px;
position: relative;
border-radius: 50%;
border: 15px solid #d71973;
transition: all ease-in-out 5s;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
z-index: -1;
}
.speen-wheel-wrap .box {
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #ffffff;
overflow: hidden;
transition: all ease-in-out 5s;
transform: rotate(90deg);
}
.speen-wheel-wrap span {
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
}
.speen-wheel-wrap .span1 {
clip-path: polygon(0 17%, 0 50%, 50% 50%);
background-color: green;
}
.speen-wheel-wrap .span2 {
clip-path: polygon(0 17%, 30% 0, 50% 50%);
background-color: red;
}
.speen-wheel-wrap .span3 {
clip-path: polygon(30% 0, 71% 0, 50% 50%);
background-color: blue;
}
.speen-wheel-wrap .span4 {
clip-path: polygon(71% 0, 100% 18%, 50% 50%);
background-color: salmon;
}
.speen-wheel-wrap .span5 {
clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
background: #ff8300;
}
.speen-wheel-wrap .box2 {
width: 100%;
height: 100%;
transform: rotate(180deg);
}
.speen-wheel-wrap .font-medium {
color: white;
font-size: 20px;
}
.speen-wheel-wrap .main-title {
font-size: 16px;
}
.speen-wheel-wrap b {
font-family: var(--font-secondary);
}
.speen-wheel-wrap .box1 .span1 b {
position: absolute;
top: 34%;
right: 89%;
transform: rotate(300deg);
text-align: center;
}
.speen-wheel-wrap .box1 .span2 b {
position: absolute;
top: 14%;
right: 73%;
transform: rotate(-40deg);
}
.speen-wheel-wrap .box1 .span3 b {
position: absolute;
top: 15%;
right: 41%;
transform: rotate(90deg);
}
.speen-wheel-wrap .box1 .span4 b {
position: absolute;
top: 12%;
right: 21%;
transform: rotate(50deg);
margin-top: 15px;
}
.speen-wheel-wrap .box1 .span5 b {
position: absolute;
top: 36%;
right: 8%;
transform: rotate(80deg);
text-align: center;
}
.speen-wheel-wrap .box2 .span1 b {
position: absolute;
top: 33%;
right: 88%;
transform: rotate(300deg);
}
.speen-wheel-wrap .box2 .span2 b {
position: absolute;
top: 0%;
right: 70%;
transform: rotate(50deg);
text-align: center;
margin-top: 45px;
}
.speen-wheel-wrap .box2 .span3 b {
position: absolute;
top: 4%;
right: 47%;
transform: rotate(360deg);
right: 47%;
}
.speen-wheel-wrap .box2 .span4 b {
position: absolute;
top: 13%;
right: 20%;
transform: rotate(60deg);
}
.speen-wheel-wrap .box2 .span5 b {
position: absolute;
top: 33%;
right: 6%;
transform: rotate(70deg);
text-align: center;
}
.speen-wheel-wrap .spin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid white;
background-color: #2D5A3D;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
z-index: 1000;
}
.speen-wheel-wrap .spin:active {
width: 70px;
height: 70px;
font-size: 20px;
}
.speen-wheel-wrap.animate:after {
animation: animateSpinWheelArrow 0.7s ease infinite;
}
audio {
display: none;
}
@keyframes animateSpinWheelArrow {
50% {
right: -50px;
}
}
.text-uppercase {
text-transform: uppercase;
}
.box-0 .box .span_03_img {
max-width: 30px;
position: absolute;
top: 3%;
right: 25%;
transform: rotate(130deg);
margin-top: 60px;
display: block;
}
.box-0 .box .span_04_img {
max-width: 20px;
position: absolute;
top: 40%;
right: 15%;
transform: rotate(140deg);
text-align: center;
}
.box-0 .box .span_05_img {
max-width: 30px;
position: absolute;
top: 12%;
right: 76%;
transform: rotate(0);
margin-top: 70px;
display: block;
}
.box-0 .box .span_06_img {
max-width: 30px;
position: absolute;
top: 0%;
right: 44%;
transform: rotate(90deg);
margin-top: 45px;
display: block;
}
.box-0 .box .span_07_img {
max-width: 20px;
position: absolute;
top: 20%;
right: 26%;
transform: rotate(125deg);
text-align: center;
}
.box-0 .box .span_08_img {
max-width: 30px;
position: absolute;
top: 23%;
right: 14%;
transform: rotate(140deg);
margin-top: 40px;
display: block;
}
.box-0 .box .span_01_img {
max-width: 20px;
position: absolute;
top: 21%;
right: 79%;
transform: rotate(0deg);
margin-top: 55px;
display: block;
}
.box-0 .box .span_02_img {
max-width: 30px;
position: absolute;
top: 13%;
right: 64%;
transform: rotate(40deg);
margin-top: 25px;
display: block;
object-fit: unset;
width: auto;
height: auto;
max-height: initial;
min-height: auto;
}
.speen-wheel-wrap .elusive-blue-color {
background-color: #dee4e9;
}
.speen-wheel-wrap .chaste-blossoms-color {
background-color: #FFD700;
}
.speen-wheel-wrap .malachite-color {
background-color: #00dc56;
}
.speen-wheel-wrap .loudicious-pink-color {
background-color: #df36ad;
}
.speen-wheel-wrap .gilded-leaves-color {
background-color: #e7a240;
}
.speen-wheel-wrap .pervenche-color {
background-color: #0096ec;
}
.box-0 .box img {
object-fit: unset;
width: auto;
height: auto;
max-height: initial;
min-height: auto;
}
.spinner .fank-download-button{
margin-bottom: 50px;
margin-top: 50px;
}
.spinwin-modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-size: 0;
overflow-y: auto;
background-color: rgba(0,0,0,.4);
z-index: 10000;
pointer-events: auto;
opacity: 1;
transition: opacity .3s;
}
.spinwin-modal-box {
width: 100%;
height: 100%;
margin: 0;
opacity: 1;
background-color: #000000b8;
position: relative;
}
.spinwin-modalbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.spinwin-body-section {
color: #fff;
font-size: 45px;
font-weight: 700;
position: relative;
float: none;
line-height: normal;
vertical-align: top;
text-align: left;
display: inline-block;
margin: 0;
padding: 0 10px;
font-family: "Poppins";
max-width: calc(100% - 20px);
overflow-wrap: break-word;
box-sizing: border-box;
}
p.ruppesword {
font-size: 70px;
color: #ffde69;
}
p.withdrawl {
color: #fff;
margin: 0px 0 2rem;
}
a.downloadnow {
background: #13b913;
color: #fff;
display: block;
position: relative;
border: none;
box-shadow: none;
border-radius: 18px;
font-weight: 600;
font-size: 20px;
padding: 24px 24px;
margin: 0;
width: 100%;
cursor: pointer;
font-family: 'Poppins';
overflow: hidden;
}
.spinwin-footerbar {
width: 20%;
margin: auto;
}
.spinwin-headerbar {
margin-bottom: 13px;
}
a.downloadnow:after {
content: "";
top: 5px;
transform: translate(100%) skew(-15deg);
width: 4.375rem;
height: 2.75rem;
position: absolute;
z-index: 1;
animation: svelte-b3sc0h-slide 2s infinite;
background: linear-gradient(98.44deg,rgb(3 255 178 / 0%) 22.31%,rgba(255,255,255,.331287) 50.8%,rgba(255,255,255,0) 76.4%);
}
.back-button{
margin: 20px auto;
}
.back-button a{
color: white;
font-size: 26px;
font-family: 'Poppins';
}
.hero-register-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 16px;
padding: 12px 24px;
border: 3px solid #ffffff;
border-radius: 22px;
color: #ffffff;
text-decoration: none;
font-family: var(--font-primary);
font-size: 28px;
line-height: 1;
background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(180deg, #335b48 0%, #2a4c3c 100%);
box-shadow: inset 0 0 0 0 rgba(0,0,0,0.12);
transition: all 0.2s ease-in-out;
}
.hero-register-btn:hover {
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #3a6651 0%, #2f5745 100%);
transform: translateY(-1px);
}
@media (max-width: 768px) {
.hero-register-btn {
font-size: 20px;
padding: 10px 18px;
border-width: 2px;
border-radius: 18px;
}
}
.reddy-anna-games-section .hero-register-btn,
.fank-feature-section .hero-register-btn {
font-size: 20px;
padding: 10px 18px;
border-width: 2px;
border-radius: 18px;
}
.reddy-anna-games-section .fank-download-button,
.fank-feature-section .fank-download-button {
font-size: 20px;
padding: 12px;
border-radius: 16px;
}
.app-usage-content {
width: 100%;
max-width: 1000px;
margin: 20px auto 0;
}
.reddy-app-usage-section {
background: #ffffff;
padding: 80px 0;
}
.reddy-app-usage-section .fank-section-title {
color: #1B4332;
white-space: normal;
}
.reddy-app-usage-section .reddy-app-usage-subtitle {
color: #2c3e50 !important;
text-align: center;
max-width: 900px;
margin: 12px auto 0;
line-height: 1.65;
font-weight: 600;
}
.reddy-app-usage-section .app-usage-content {
max-width: 1100px;
margin-top: 28px;
}
.reddy-app-usage-section .app-usage-grid {
grid-template-columns: repeat(3, 1fr);
grid-gap: 18px;
}
.reddy-app-usage-section .app-usage-card {
background: #F0F8F0;
border: 1px solid rgba(27, 67, 50, 0.12);
box-shadow: 0px 3px 5px #d7d3ea;
backdrop-filter: none;
}
.reddy-app-usage-section .app-usage-card::after,
.reddy-app-usage-section .app-usage-card::before {
display: none;
}
.reddy-app-usage-section .reddy-app-usage-card-head {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
.reddy-app-usage-section .reddy-app-usage-card-icon {
width: 42px;
height: 42px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(27, 67, 50, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex: 0 0 42px;
}
.reddy-app-usage-section .app-usage-card .pro-tips-title {
color: #1B4332;
margin: 0;
text-align: left;
font-weight: 800;
font-size: 18px;
line-height: 1.38;
overflow-wrap: anywhere;
word-break: break-word;
}
.reddy-app-usage-section .app-usage-card .fank-section-sub-title {
color: #2c3e50 !important;
margin-bottom: 0;
text-align: left;
font-weight: 600;
}
@media only screen and (max-width: 575px) {
.reddy-app-usage-section .app-usage-card .pro-tips-title {
font-size: 16px;
line-height: 1.42;
}
}
.reddy-app-usage-section .love-wrap .pro-tips-title {
color: #1B4332;
}
.reddy-app-usage-section .love-list li {
color: #2c3e50;
}
.reddy-app-usage-section .love-list li::before {
color: #F2BE5C;
}
@media only screen and (max-width: 991px) {
.reddy-app-usage-section .app-usage-grid {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width: 1199px) {
.reddy-app-usage-section .app-usage-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.app-usage-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 28px;
}
.app-usage-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(27, 67, 50, 0.55) 0%, rgba(36, 79, 60, 0.55) 100%);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
padding: 22px 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, background-color .28s ease, border-color .28s ease;
will-change: transform, box-shadow;
}
.app-usage-card .pro-tips-title {
margin: 0 0 10px;
color: #FFD700;
}
.app-usage-card .fank-section-sub-title {
margin-bottom: 0;
color: #ffffff;
line-height: 1.7;
}
.app-usage-card::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 140px;
height: 140px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.12) 0%, rgba(255, 255, 255, 0) 60%);
pointer-events: none;
}
.app-usage-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.25);
}
.app-usage-card::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 120%;
height: 100%;
background: linear-gradient(120deg, rgba(255, 215, 0, 0.0) 20%, rgba(255, 215, 0, 0.18) 50%, rgba(255, 215, 0, 0.0) 80%);
transform: translateX(0);
transition: transform .8s cubic-bezier(.22,.61,.36,1);
pointer-events: none;
}
.app-usage-card:hover::before {
transform: translateX(220%);
}
.app-usage-card:focus-visible {
outline: 2px solid #F2BE5C;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.app-usage-card,
.app-usage-card::before {
transition: none !important;
}
.app-usage-card:hover {
transform: none !important;
}
}
.love-wrap {
margin-top: 32px;
}
.love-list {
padding: 0;
margin: 14px auto 0;
max-width: 1000px;
}
.love-list li {
list-style: none;
position: relative;
padding-left: 26px;
margin-bottom: 10px;
font-size: 16px;
font-family: var(--font-secondary);
color: #ffffff;
text-align: left;
text-align-last: auto;
}
.love-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #FFD700;
font-weight: 700;
}
.love-wrap .pro-tips-title {
color: #FFD700;
}
@media only screen and (max-width: 991px) {
.app-usage-grid {
grid-template-columns: repeat(1, 1fr);
}
}
body h3 { color: #1B4332; }
.fank-hero-section h3,
.fank-faq-section h3,
.reddy-anna-games-section h3 {
color: #FFD700;
}
.fank-bonus-section h3 { color: #FFD700; }
.fank-feature-section .features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 20px;
}
.fank-feature-section .feature-card {
background: linear-gradient(180deg, #1B4332 0%, #244F3C 100%);
border-radius: 16px;
padding: 24px;
color: #ffffff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
will-change: transform, box-shadow;
}
.fank-feature-section .feature-card::after {
content: "";
position: absolute;
top: -30px;
right: -30px;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.12) 0%, rgba(255, 255, 255, 0) 60%);
pointer-events: none;
}
.fank-feature-section .feature-card::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 120%;
height: 100%;
background: linear-gradient(120deg, rgba(255, 215, 0, 0.0) 20%, rgba(255, 215, 0, 0.16) 50%, rgba(255, 215, 0, 0.0) 80%);
transform: translateX(0);
transition: transform .8s cubic-bezier(.22,.61,.36,1);
pointer-events: none;
}
.fank-feature-section .feature-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.18);
}
.fank-feature-section .feature-card:hover::before {
transform: translateX(220%);
}
.fank-feature-section .feature-card .pro-tips-title {
color: #FFD700 !important;
margin-bottom: 10px;
}
.fank-feature-section .feature-card .fank-section-sub-title {
color: #ffffff !important;
margin: 0;
font-size: 16px;
line-height: 1.7;
}
.fank-feature-section .feature-card:focus-visible {
outline: 2px solid #F2BE5C;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.fank-feature-section .feature-card,
.fank-feature-section .feature-card::before {
transition: none !important;
}
.fank-feature-section .feature-card:hover {
transform: none !important;
}
}
@media only screen and (max-width: 1024px) {
.fank-feature-section .features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 767px) {
.fank-feature-section .features-grid {
grid-template-columns: 1fr;
}
.fank-feature-section .feature-card {
padding: 20px;
}
}
.fank-bonus-section {
background: linear-gradient(180deg, rgba(15, 47, 34, 0.85) 0%, rgba(27, 67, 50, 0.85) 100%),
url('../images/greenbackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fank-bonus-section .fank-section-title { color: #ffffff; }
.fank-bonus-section .fank-section-sub-title { color: #ffffff; }
.fank-bonus-section .fank-feature-header {
margin-bottom: 34px;
}
.fank-bonus-section .reddy-bonus-grid {
margin-top: 10px;
}
.fank-bonus-section .reddy-bonus-claim-wrap {
max-width: 980px;
margin: 24px auto 0;
}
.fank-bonus-section .reddy-bonus-claim-title {
text-align: center;
margin-bottom: 12px;
}
.fank-bonus-section .reddy-bonus-claim-wrap .fank-section-sub-title {
text-align: left !important;
}
.fank-bonus-section .reddy-bonus-steps {
margin: 0 0 14px;
padding-left: 18px;
color: #ffffff !important;
font-weight: 600;
font-size: 16px;
line-height: 1.75;
font-family: var(--font-secondary);
}
.fank-bonus-section .reddy-bonus-steps li {
margin-bottom: 10px;
color: #ffffff;
}
.fank-bonus-section .reddy-bonus-steps li::marker {
color: #ffffff;
}
.fank-bonus-section .reddy-bonus-steps li:last-child {
margin-bottom: 0;
}
.fank-bonus-section .reddy-bonus-note {
margin-bottom: 0;
}
.fank-payments-section {
background: linear-gradient(180deg, rgba(15, 47, 34, 0.85) 0%, rgba(27, 67, 50, 0.85) 100%),
url('../images/greenbackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fank-payments-section .fank-section-title { color: #ffffff; }
.fank-payments-section .fank-section-sub-title { color: #ffffff; }
.fank-payments-section .pro-tips-title { color: #F2BE5C; }
.fank-legal-section {
background: linear-gradient(180deg, rgba(15, 47, 34, 0.85) 0%, rgba(27, 67, 50, 0.85) 100%), url('../images/greenbackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fank-legal-section .fank-section-title { color: #ffffff; }
.fank-legal-section .fank-section-sub-title { color: #ffffff; }
.fank-legal-section .pro-tips-title { color: #F2BE5C; }
.fank-legal-guidelines {
margin: 0 0 14px;
padding-left: 18px;
color: #ffffff;
font-weight: 600;
line-height: 1.75;
font-family: var(--font-secondary);
}
.fank-legal-guidelines li { margin-bottom: 10px; }
.fank-legal-guidelines li:last-child { margin-bottom: 0; }
.fank-legal-section .fank-legal-guidelines li { color: #ffffff; }
.fank-legal-section .fank-legal-guidelines li::marker { color: #ffffff; }
.fank-responsible-section {
background: linear-gradient(180deg, rgba(9, 30, 22, 0.86) 0%, rgba(15, 47, 34, 0.86) 100%), url('../images/greenbackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 60px 0;
}
.fank-responsible-section .fank-section-title { color: #ffffff; }
.fank-responsible-section .fank-section-sub-title { color: rgba(255, 255, 255, 0.92); }
.fank-responsible-section .pro-tips-title { color: #F2BE5C; }
.reddy-trust-logos {
display: flex;
flex-wrap: wrap;
gap: 16px 22px;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
}
.reddy-trust-logos img {
height: 34px;
width: auto;
max-width: 180px;
opacity: 0.95;
}
.reddy-responsible-content {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.reddy-responsible-text {
max-width: 980px;
margin-left: auto !important;
margin-right: auto !important;
}
.reddy-responsible-subtitle {
margin-top: 18px;
margin-bottom: 10px;
}
.reddy-contact-grid {
display: grid;
gap: 10px;
max-width: 820px;
margin: 0 auto;
}
.reddy-contact-item {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
align-items: baseline;
color: #ffffff;
font-family: var(--font-secondary);
font-weight: 600;
line-height: 1.7;
}
.reddy-contact-label { opacity: 0.9; }
.reddy-contact-link {
color: #F2BE5C;
text-decoration: none;
font-weight: 800;
}
.reddy-contact-link:hover { text-decoration: underline; }
.reddy-contact-value { opacity: 0.95; }
@media (max-width: 767px) {
.fank-responsible-section { padding: 46px 0; }
.reddy-trust-logos { gap: 12px 16px; }
.reddy-trust-logos img { height: 30px; }
}
.fank-section-sub-title,
.how-to-play-subtitle,
.reddy-anna-games-subtitle,
.fank-hero-subtext {
max-width: none !important;
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
.fank-aboutus {
padding: 32px 0 40px;
}
.fank-aboutus .fank-section-title {
margin-bottom: 12px;
}
.fank-aboutus .fank-section-sub-title {
color: #232826 !important;
text-align: left;
margin-bottom: 10px;
}
.reddy-anna-how-to-play-section .booking-steps .step-title {
text-align: center;
}
.reddy-betting-id-section {
background: url("../images/greenbackground.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.reddy-betting-id-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.38) 100%),
radial-gradient(circle at 18% 78%, rgba(120, 119, 198, 0.28) 0%, transparent 50%),
radial-gradient(circle at 80% 18%, rgba(255, 119, 198, 0.14) 0%, transparent 50%);
pointer-events: none;
}
.reddy-betting-id-section .container {
position: relative;
z-index: 1;
}
.reddy-betting-id-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
gap: 28px;
align-items: center;
}
.reddy-betting-id-title {
color: #ffffff;
white-space: normal;
text-align: left;
margin-bottom: 10px;
}
.reddy-betting-id-link {
color: inherit;
text-decoration: none;
}
.reddy-betting-id-link:hover {
text-decoration: underline;
}
.reddy-betting-id-subtitle {
color: rgba(255, 255, 255, 0.92) !important;
text-align: left;
margin: 0 0 18px;
font-weight: 600;
line-height: 1.65;
}
.reddy-betting-id-panel {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(27, 67, 50, 0.14);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.16);
}
.reddy-betting-id-panel .booking-steps {
text-align: left;
}
.reddy-betting-id-panel .step-title {
color: #1B4332;
font-weight: 900;
font-size: 18px;
margin: 18px 0 8px;
}
.reddy-betting-id-panel .step-title:first-child {
margin-top: 0;
}
.reddy-betting-id-panel .fank-section-sub-title {
color: #2c3e50 !important;
text-align: left;
font-weight: 600;
margin-bottom: 0;
}
.reddy-betting-id-panel .step-title + .fank-section-sub-title {
margin-bottom: 12px;
}
.reddy-betting-id-types-wrap {
max-width: 1100px;
margin: 34px auto 0;
}
.reddy-betting-id-types-title {
margin: 0 0 14px;
color: #ffffff;
font-weight: 900;
font-size: 24px;
line-height: 1.2;
font-family: var(--font-secondary);
text-align: center;
}
.reddy-betting-id-types-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.reddy-betting-id-type-card {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(27, 67, 50, 0.14);
border-radius: 18px;
padding: 16px;
box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.14);
height: 100%;
}
.reddy-betting-id-type-title {
margin: 0 0 10px;
color: #1B4332;
font-weight: 900;
font-size: 18px;
line-height: 1.25;
font-family: var(--font-secondary);
}
.reddy-betting-id-type-list {
margin: 0;
padding-left: 18px;
color: #2c3e50;
font-weight: 600;
font-size: 14px;
line-height: 1.6;
font-family: var(--font-secondary);
}
.reddy-betting-id-type-list li {
margin-bottom: 8px;
}
.reddy-betting-id-type-list li:last-child {
margin-bottom: 0;
}
.reddy-betting-id-visual {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.reddy-betting-id-img {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 991px) {
.reddy-betting-id-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.reddy-betting-id-title,
.reddy-betting-id-subtitle {
text-align: center;
}
.reddy-betting-id-types-title {
text-align: center;
}
.reddy-betting-id-types-grid {
grid-template-columns: 1fr;
}
.reddy-betting-id-panel .booking-steps {
text-align: left;
}
.reddy-betting-id-visual {
align-items: center;
justify-content: center;
}
}
.reddy-features-white-section {
background: #ffffff !important;
padding: 80px 0;
}
.reddy-features-white-section .fank-section-title {
color: #1B4332 !important;
white-space: normal;
}
.reddy-features-white-section .fank-section-sub-title {
color: #2c3e50 !important;
max-width: 950px;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.7;
font-weight: 600;
}
.reddy-features-white-section .features-grid {
margin-top: 24px;
}
.reddy-features-white-section .feature-card {
background: #F0F8F0;
border: 1px solid rgba(27, 67, 50, 0.12);
box-shadow: 0px 3px 5px #d7d3ea;
}
.reddy-features-white-section .feature-card::before,
.reddy-features-white-section .feature-card::after {
display: none;
}
.reddy-features-white-section .feature-card .pro-tips-title {
color: #1B4332 !important;
text-align: left;
margin: 0 0 10px;
font-size: 18px;
font-weight: 800;
}
.reddy-features-white-section .feature-card .fank-section-sub-title {
color: #2c3e50 !important;
text-align: left;
margin-bottom: 0;
font-weight: 600;
line-height: 1.65;
}
.reddy-kyc-section {
background: url("../images/greenbackground.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.reddy-kyc-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.45) 100%),
radial-gradient(circle at 18% 78%, rgba(120, 119, 198, 0.25) 0%, transparent 50%),
radial-gradient(circle at 80% 18%, rgba(255, 119, 198, 0.12) 0%, transparent 50%);
pointer-events: none;
}
.reddy-kyc-section .container {
position: relative;
z-index: 1;
}
.reddy-kyc-header {
text-align: center;
margin-bottom: 22px;
}
.reddy-kyc-title {
color: #ffffff;
white-space: normal;
margin-bottom: 10px;
}
.reddy-kyc-subtitle {
color: rgba(255, 255, 255, 0.92) !important;
max-width: 950px;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.7;
font-weight: 600;
}
.reddy-kyc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
.reddy-kyc-card {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(27, 67, 50, 0.14);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 10px 28px rgba(0, 0, 0, 0.16);
height: 100%;
}
.reddy-kyc-card-title {
margin: 0 0 12px;
color: #1B4332;
font-weight: 900;
font-size: 20px;
line-height: 1.2;
font-family: var(--font-secondary);
}
.reddy-kyc-list {
margin: 0;
padding-left: 20px;
color: #2c3e50;
font-weight: 600;
font-size: 14px;
line-height: 1.7;
font-family: var(--font-secondary);
}
.reddy-kyc-list li {
margin-bottom: 8px;
}
.reddy-kyc-notes {
margin: 14px 0 0;
padding-left: 18px;
color: rgba(44, 62, 80, 0.92);
font-weight: 600;
font-size: 13px;
line-height: 1.7;
font-family: var(--font-secondary);
}
.reddy-kyc-notes li {
margin-bottom: 8px;
}
.reddy-kyc-notes li:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.reddy-kyc-grid {
grid-template-columns: 1fr;
}
}
.reddy-betting-works-section {
background: #ffffff;
padding: 80px 0;
}
.reddy-betting-works-header {
text-align: center;
margin-bottom: 24px;
}
.reddy-betting-works-heading {
color: #1B4332;
margin-bottom: 10px;
}
.reddy-betting-works-subheading {
color: #2c3e50 !important;
max-width: 980px;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.7;
font-weight: 600;
}
.reddy-betting-works-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.reddy-betting-works-card {
background: #F0F8F0;
border: 1px solid rgba(27, 67, 50, 0.12);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
height: 100%;
}
.reddy-betting-works-step {
width: 44px;
height: 44px;
border-radius: 999px;
background: #1B4332;
color: #ffffff;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
font-family: var(--font-secondary);
margin-bottom: 14px;
}
.reddy-betting-works-title {
margin: 0 0 10px;
color: #1B4332;
font-weight: 900;
font-size: 18px;
line-height: 1.25;
font-family: var(--font-secondary);
text-align: left;
}
.reddy-betting-works-text {
color: #2c3e50 !important;
text-align: left;
margin-bottom: 0;
font-weight: 600;
line-height: 1.65;
}
@media (max-width: 1024px) {
.reddy-betting-works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.reddy-betting-works-grid {
grid-template-columns: 1fr;
}
}
.reddy-cricket-id-benefits-section {
background: url("../images/greenbackground.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.reddy-cricket-id-benefits-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.48) 100%),
radial-gradient(circle at 18% 78%, rgba(120, 119, 198, 0.25) 0%, transparent 50%),
radial-gradient(circle at 80% 18%, rgba(255, 119, 198, 0.12) 0%, transparent 50%);
pointer-events: none;
}
.reddy-cricket-id-benefits-section .container {
position: relative;
z-index: 1;
}
.reddy-cricket-id-benefits-header {
text-align: center;
margin-bottom: 22px;
}
.reddy-cricket-id-benefits-title {
color: #ffffff;
white-space: normal;
margin-bottom: 10px;
}
.reddy-cricket-id-benefits-subtitle {
color: rgba(255, 255, 255, 0.92) !important;
max-width: 980px;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.7;
font-weight: 600;
}
.reddy-cricket-id-benefits-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.reddy-cricket-id-benefit-card {
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(27, 67, 50, 0.14);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 10px 28px rgba(0, 0, 0, 0.16);
height: 100%;
}
.reddy-cricket-id-benefit-title {
margin: 0 0 10px;
color: #1B4332;
font-weight: 900;
font-size: 18px;
line-height: 1.25;
font-family: var(--font-secondary);
}
.reddy-cricket-id-benefit-text {
color: #2c3e50 !important;
text-align: left;
margin-bottom: 0;
font-weight: 600;
line-height: 1.65;
}
@media (max-width: 1024px) {
.reddy-cricket-id-benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.reddy-cricket-id-benefits-grid {
grid-template-columns: 1fr;
}
}
.fank-feature-section.reddy-payments-white-section {
background: #ffffff;
padding: 80px 0;
}
.fank-feature-section.reddy-payments-white-section .fank-section-title {
color: #1B4332 !important;
}
.fank-feature-section.reddy-payments-white-section .fank-section-sub-title {
color: #2c3e50 !important;
}
.fank-feature-section.reddy-payments-white-section .pro-tips-title {
color: #1B4332 !important;
}
.fank-feature-section.reddy-features-white-section {
background: #ffffff;
padding: 80px 0;
}
.fank-feature-section.reddy-features-white-section .fank-section-title {
color: #1B4332 !important;
}
.fank-feature-section.reddy-features-white-section .fank-section-sub-title {
color: #2c3e50 !important;
}
.fank-feature-section.reddy-features-white-section .pro-tips-title {
color: #1B4332 !important;
}
.reddy-safety-list {
margin: 12px 0 0;
padding-left: 18px;
color: #2c3e50;
font-weight: 600;
line-height: 1.75;
font-family: var(--font-secondary);
}
.reddy-safety-list li {
margin-bottom: 10px;
}
.reddy-safety-list li:last-child {
margin-bottom: 0;
}
.reddy-safety-list .safety-emoji {
margin-right: 6px;
}
.reddy-safety-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 12px;
}
.reddy-safety-card {
background: #ffffff;
border: 1px solid rgba(27, 67, 50, 0.12);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
height: 100%;
}
.reddy-safety-metrics {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 12px 0 10px;
}
.reddy-metric-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(27, 67, 50, 0.14);
color: #1B4332;
font-weight: 800;
font-size: 13px;
line-height: 1;
font-family: var(--font-secondary);
}
.reddy-metric-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin: 14px 0 18px;
}
.reddy-metric-card {
background: #F0F8F0;
border: 1px solid rgba(27, 67, 50, 0.14);
border-radius: 22px;
padding: 20px;
text-align: center;
color: #1B4332;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.reddy-metric-icon {
width: 48px;
height: 48px;
margin: 0 auto 8px;
color: #D4AF37;
}
.reddy-metric-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
stroke: currentColor;
stroke-width: 1.2;
}
.reddy-metric-text {
font-style: normal;
font-weight: 900;
color: #1B4332;
font-family: var(--font-secondary);
}
@media (max-width: 1024px) {
.reddy-metric-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.reddy-metric-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 1024px) {
.reddy-safety-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.reddy-safety-cards {
grid-template-columns: 1fr;
}
}
.reddy-payments-header {
text-align: center;
margin-bottom: 26px;
}
.reddy-payments-white-section .reddy-payments-subtitle {
max-width: 980px;
margin-left: auto !important;
margin-right: auto !important;
line-height: 1.7;
font-weight: 600;
}
.reddy-payments-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 18px;
align-items: start;
}
.reddy-payments-panel {
background: #F0F8F0;
border: 1px solid rgba(27, 67, 50, 0.12);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
height: 100%;
}
.reddy-payments-panel-title {
margin: 0 0 12px;
color: #1B4332;
font-weight: 900;
font-size: 20px;
line-height: 1.2;
font-family: var(--font-secondary);
text-align: left;
}
.reddy-payments-white-section .reddy-payments-text {
text-align: left;
margin-bottom: 14px;
font-weight: 600;
line-height: 1.65;
}
.reddy-payment-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.reddy-payment-logos {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.reddy-payment-logo {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 16px;
background: #ffffff;
border: 1px solid rgba(27, 67, 50, 0.14);
height: 52px;
}
.reddy-payment-logo img {
display: block;
width: auto;
max-height: 28px;
}
.reddy-payment-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(27, 67, 50, 0.14);
color: #1B4332;
font-weight: 800;
font-size: 13px;
line-height: 1;
font-family: var(--font-secondary);
}
.reddy-payments-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.reddy-payments-card {
background: #ffffff;
border: 1px solid rgba(27, 67, 50, 0.12);
border-radius: 22px;
padding: 22px;
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
height: 100%;
}
.reddy-payments-card-title {
margin: 0 0 10px;
color: #1B4332;
font-weight: 900;
font-size: 18px;
line-height: 1.25;
font-family: var(--font-secondary);
text-align: left;
}
.reddy-payments-white-section .reddy-payments-card-text {
text-align: left;
margin-bottom: 0;
font-weight: 600;
line-height: 1.65;
}
.reddy-payments-bullets {
margin: 0;
padding-left: 18px;
color: #2c3e50;
font-weight: 600;
font-size: 14px;
line-height: 1.7;
font-family: var(--font-secondary);
}
.reddy-payments-bullets li {
margin-bottom: 8px;
}
.reddy-payments-bullets li:last-child {
margin-bottom: 0;
}
@media (max-width: 1024px) {
.reddy-payments-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.reddy-payments-cards {
grid-template-columns: 1fr;
}
}
.fank-reviews-slider {
display: flex;
gap: 18px;
overflow-x: auto;
padding: 10px 6px 22px;
scroll-snap-type: x proximity;
}
.fank-review-card {
background: #ffffff;
border-radius: 20px;
padding: 34px 26px;
min-width: 320px;
width: 340px;
flex: 0 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
border: 1px solid rgba(27, 67, 50, 0.10);
scroll-snap-align: start;
}
.fank-review-avatar {
font-size: 3.2rem;
margin-bottom: 14px;
text-align: center;
}
.fank-review-text {
font-style: italic;
color: #2c3e50;
margin: 0;
line-height: 1.7;
font-size: 1.05rem;
text-align: center;
}
.fank-review-author {
border-top: 2px solid #e6f3e6;
padding-top: 16px;
margin-top: 18px;
text-align: center;
}
.fank-review-name {
font-weight: 900;
color: #1B4332;
margin: 0;
font-size: 1.05rem;
font-family: var(--font-secondary);
}
.fank-review-location {
color: #4A6741;
margin: 6px 0 0 0;
font-family: var(--font-secondary);
font-weight: 600;
}
.fank-review-card:hover .quote-icon {
opacity: 0.12;
}
.fank-reviews-slider:focus-visible {
outline: 2px solid #F2BE5C;
outline-offset: 4px;
}
.fank-reviews-slider::-webkit-scrollbar { height: 10px; }
.fank-reviews-slider::-webkit-scrollbar-track { background: #e6f3e6; border-radius: 10px; }
.fank-reviews-slider::-webkit-scrollbar-thumb { background: #4CAF50; border-radius: 10px; }
.fank-reviews-slider::-webkit-scrollbar-thumb:hover { background: #388E3C; }
.fank-review-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.fank-review-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 35px rgba(76, 175, 80, 0.2); }
.fank-review-stars { color: #FFD700; font-size: 1.4rem; margin: 15px 0; text-align: center; }
.fank-review-text { word-wrap: break-word; white-space: normal; overflow-wrap: break-word; }
.quote-icon { position: absolute; font-size: 4rem; opacity: 0.07; color: #4CAF50; top: 20px; left: 20px; }
@media (max-width: 767px) {
.fank-review-card {
min-width: 280px;
width: 280px;
padding: 28px 20px;
}
.fank-review-text {
font-size: 1rem;
}
}
.fank-feature-section .fank-reviews-header .fank-section-title {
color: #ffffff !important;
}
.fank-feature-section .fank-reviews-header .fank-section-sub-title {
color: #ffffff !important;
}
.fank-bonus-section .fank-section-title { color: #ffffff; }
.fank-bonus-section .fank-section-sub-title { color: #ffffff; }
.fank-payments-section {
background: linear-gradient(180deg, rgba(15, 47, 34, 0.85) 0%, rgba(27, 67, 50, 0.85) 100%),
url('../images/greenbackground.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fank-payments-section .fank-section-title { color: #ffffff; }
.fank-payments-section .fank-section-sub-title { color: #ffffff; }
.fank-payments-section .pro-tips-title { color: #F2BE5C; }
.fank-section-sub-title,
.how-to-play-subtitle,
.reddy-anna-games-subtitle,
.fank-hero-subtext {
max-width: none !important;
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: center;
}
.fank-aboutus {
padding: 32px 0 40px;
}
.fank-aboutus .fank-section-title {
margin-bottom: 12px;
}
.fank-aboutus .fank-section-sub-title {
color: #232826 !important;
text-align: left;
margin-bottom: 10px;
}
.reddy-anna-how-to-play-section .booking-steps .step-title {
text-align: center;
}
.golden-link {
color: #D4AF37 !important;
text-decoration: none;
}
.golden-link:hover {
text-decoration: underline !important;
}
EOF~