@font-face {
  font-family: "Raleway";
  src: url(/assets/fonts/Raleway/Raleway-VariableFont_wght.ttf);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Raleway";
}

:root {
    --primary-color: #2eb185;
    --secondary-color: #fff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Raleway", sans-serif;
    padding: 0;
    margin: 0;
    word-break: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Raleway", serif;
    margin: 0;
    line-height: 1;
    color: var(--secondary-color);
}



p {
    line-height: 1.3;
    padding: 0;
    margin: 0;
    font-family: "Raleway", sans-serif;
}

b,
strong {
    font-weight: 600;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    line-height: 1.2;
    margin-bottom: 3px;
}

a {
    display: inline-block;
    text-decoration: none;
    font-family: "Raleway", sans-serif;
}

button,
input,
textarea {
    font-family: "Raleway", sans-serif;
}

input {
    font-family: "Raleway", sans-serif;
}

img {
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.container {
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    padding: 0 15px;
}


.py-7 {
    padding: 70px 0;
}

.pt-7 {
    padding-top: 70px;
}

.pb-7 {
    padding-bottom: 70px;
}

.py-10 {
    padding: 100px 0;
}

.pb-10 {
    padding-bottom: 100px;
}

.pt-10 {
    padding-top: 100px;
}

.inline-flex {
    display: inline-flex;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.wrap {
    flex-wrap: wrap;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.m-0-auto {
    margin: 0 auto
}

.bg-center {
    background-position: center;
}

.bg-cover {
    background-size: cover;
}

.bg-contain {
    background-size: contain;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.align-end {
    align-items: flex-end;
}

.bg-0-0 {
    background-position: 0% 0%;
}

.pt-80 {
    padding-top: 80px;
}

.mt-90 {
    margin-top: 90px;
}

.avatar-content span {
    margin-bottom: 0;
}

/* Global CSS End */
/* top notch styling start */
.basket_leagues-inner {
    position: relative;
}

.top_notch {
    display: flex;
    justify-content: space-between;
}

.top {
    background: var(--secondary-color);
    padding: 10px;
}
.login {
    display: inline-flex;
}
.login .btn {
    width: auto;
    margin-bottom: 0;
}
.temail a {
    color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* top notch styling end */
/* slider styling start */
.intro {
    position: relative;
    width: 100%;
    padding: 60px 0;
}

.slider {
    position: relative;
    overflow: hidden;
}

.slider ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease;
    width: calc(100% * (totalSlides + 2));
    /* Account for cloned slides */
}

.slider ul li {
    flex: 0 0 100%;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    background-color: rgba(0 0 0/50%);
    background-blend-mode: multiply;
}

.arrow-prev,
.arrow-next {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--secondary-color);
    color: #000;
    border: none;
    font-size: 15px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1;
}

.arrow-prev {
    left: 10px;
}

.arrow-next {
    right: 10px;
}

.link_add {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.link_add a {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.left h2 {
    font-size: 40px;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 50px;
}

.link_add a.current_dot {
    background: #333;
}

.slide_up {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.slide_up p {
    color: var(--secondary-color);
}

/* slider styling end */
/* Header CSS Start */
header.header-container {
    background: var(--secondary-color);
}

.top {
    background: var(--primary-color);
    padding: 10px;
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo-container {
    text-align: center;
    vertical-align: middle;
    display: inline-block;

}

.logo-container a {
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    width: 350px;
    padding: 1rem 0;
}

.menu-toggle-btn {
    display: none;
    width: 30px;
    height: 30px;
    text-align: right;
    cursor: pointer;
    margin: auto 0;
    z-index: 60;
    background-image: url("../images/menu.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.navbar-menu {
    display: flex;
}

.navbar-menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-menu ul li a {
    padding: 10px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: normal;
    position: relative;
    color: var(--primary-color);
    letter-spacing: 1px;
    font-family: "Raleway", sans-serif;
}

.navbar-menu ul li a:hover {
    color: var(--primary-color);
}

.navbar-menu ul li a.active-link {
    color: var(--primary-color);
}

.navbar-menu ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    border-radius: 5px;
    height: 1.5px;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    transform-origin: center;
    transition: all 0.3s ease-out;
}

.navbar-menu ul li a.active-link::after {
    transform: scaleX(0.9);
    background: var(--primary-color);
    transform-origin: center;
}

.navbar-menu ul li a:hover::after {
    transform: scaleX(0.9);
}

.btn {
    padding: 10px !important;
    outline: none;
    border: none;
    display: inline-block;
    background-color: var(--secondary-color);
    color: #000 !important;
    margin-left: 10px;
    transition: 0.4s all ease-in-out;
    border-radius: 0;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
}

.btn:hover {
    background-color: var(--secondary-color);
    box-shadow: var(--primary-color) 0px 3px 8px;
}

.signup-btn {
    margin-left: 15px;
}

.login-btn {
    margin-left: 10px;
    background: transparent;
    color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color);
}

.login-btn:hover {
    color: #000 !important;
}

.profile-section {
    display: flex;
    align-items: center;
}


.avatar-content a {
    display: flex;
    align-items: center;
    color: var(--secondary-color);
}

.avatar-content svg {
    width: 18px;
    height: 18px;
}

.profile-dropdown-options {
    display: inline-block;
    margin-right: 5px;
}

.menu-close-btn {
    display: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/close.png);
}

/* .profile {
    display: none;
} */

/* Header CSS End */
/* Home Banner CSS Start */
/* banner styling  start */
.football_banner {
    height: 600px;
    background-image: url(../images/home-banner-image.jpg);
    background-size: 100%;
    background-position: 100% 70%;
    background-repeat: no-repeat;
    position: relative;
    margin: 0;
}

.football_banner::before {
    position: absolute;
    content: '';
    background: #2c2b2ba3;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.banner_box {
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--secondary-color);
    width: 80%;
    transform: translate(-50%, -50%);
}

.banner_box h1 {
    font-size: 55px;
    text-transform: uppercase;
}

.banner_box p {
    font-size: 18px;
    text-transform: capitalize;
}

/* banner styling end */
/* game mode styling start */
section.game_mode {
    padding: 60px 0;
}

.game_inner p {
    color: var(--secondary-color);
}

.game_inner {
    border: 1px solid var(--secondary-color);
    padding: 40px 20px;
    margin-bottom: 20px;
    background: var(--primary-color);
    height: 100%;
}

section.game_mode .row {
    row-gap: 20px;
}

.game_inner h2 {
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.img_box {
    width: 60px;
    height: 60px;
    background-size: cover;
    margin-bottom: 20px;
}

/* game mode styling end */
/* form modal styling start */
.img_pic {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 500px;
    height: 500px;
    filter: invert(1);
    margin: 0 auto;
}

.form-set {
    padding: 20px;
    position: relative;
    max-width: 700px;
    height: auto;
    margin-top: 2em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary-color);
    border-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1)
}

section.form_modal {
    background-image: url(../images/body.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
    background-attachment: fixed;
}
section.form_modal h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 40px;
    max-width: 500px;
    margin: 20px auto;
    line-height: 1.2;
}
.form-set button {
    cursor: pointer;
    position: relative;
    text-transform: capitalize;
    font-size: 1em;
    z-index: 2;
    outline: none;
    background: var(--secondary-color);
    transition: 0.2s;
}

.form-set .btn {
    border-radius: 20px;
    border: none;
    font-weight: 500;
    font-size: 1.2em;
    padding: 0.8em 1em 0.8em 1em !important;
    transition: 0.5s;
    border: 1px solid #ebebeb;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}
.form-set button {
    margin-left: 0;
}

.form-set .login,
.form-set .signup {
    background: var(--primary-color);
    color: var(--secondary-color) !important;
    max-width: 550px;
}

.form-set .login:hover,
.form-set .signup:hover {
    background: #222;
}

.form-toggle {
    position: relative;
    width: 100%;
    height: auto;
}

.form-toggle button {
    width: 50%;
    float: left;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border: none;
    transition: 0.2s;
    font-size: 1.1em;
    font-weight: bold;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.form-toggle button:nth-child(1) {
    border-bottom-right-radius: 20px;
}

.form-toggle button:nth-child(2) {
    border-bottom-left-radius: 20px;
}

#login-toggle {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.form-set form {
    position: relative;
    width: 100%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
}
.form-set input {
    max-width: 550px !important;
    width: 100% !important;
}

#login-form,
#signup-form {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 1em;
}

#signup-form {
    display: none;
}


#login-form button,
#signup-form button {
    width: 100%;
    margin-top: 0.5em;
    padding: 0.6em;
}

.form-set input {
    position: relative;
    width: 100%;
    font-size: 1em;
    padding: 1.2em 1.7em 1.2em 1.7em;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    border-radius: 20px;
    border: none;
    background: #ebebeb;
    outline: none;
    font-weight: bold;
    transition: 0.4s;
}

.form-set input:focus,
.form-set input:active {
    transform: scaleX(1.02);
}

.form-set input::-webkit-input-placeholder {
    color: #222;
}


.form-set p {
    font-size: 16px;
    font-weight: bold;
}

.form-set p a {
    color: var(--primary-color);
    text-decoration: none;
    transition: 0.2s;
}

.form-set p a:hover {
    color: #222;
}


.form-set i {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateX(-10%) translateY(-50%);
}

.fa-google {
    color: #dd4b39;
}

.fa-linkedin {
    color: #3b5998;
}

.fa-windows {
    color: #0072c6;
}

.-box-sd-effect:hover {
    box-shadow: 0 4px 8px hsla(210, 2%, 84%, .2);
}

/* form modal styling end */
/* Footer CSS Start */


.footer-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.logo-bottom a {
    text-align: center;
    width: 350px;
    vertical-align: middle;
    display: inline-block;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

.footer-blocks {
    width: 30%;
    padding: 15px;
}
.footer-blocks:last-child {
    margin-bottom: 0;
}

.footer-blocks h3 {
    color: var(--primary-color);
    font-size: 30px;
    margin-bottom: 15px;
}

.footer-blocks ul li {
    margin-bottom: 10px;
}

.footer-blocks ul li a {
    color: var(--primary-color);
    transition: 0.4s all ease-in-out;
    font-family: "Raleway", sans-serif;
}

.footer-blocks ul li a:hover {
    color: #42aa8d;
}


.footer-socials p {
    font-size: 20px;
    margin-bottom: 15px;
}

.social-tags-container {
    display: inline-flex;
    justify-content: space-between;
    margin-top: 20px;
}

.social-icons {
    height: 50px;
    width: 50px;
    background-color: transparent;
    border: 2px solid var(--primary-color);
    margin-right: 10px;
    padding: 5px;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s all ease-in-out;
    cursor: pointer;
}



.social-ikons {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.fb {
    background-image: url("/assets/images/fb.png");
}

.insta {
    background-image: url("/assets/images/instagram.png");
}

.twitter {
    background-image: url("/assets/images/twitter.png");
}

.social-fb:hover {
    background-color: #316FF6;
    transform: translateY(-2px);
    color: var(--secondary-color);
}

.social-insta:hover {
    background-color: #e1306c;
    transform: translateY(-2px);
    color: var(--secondary-color);
}

.social-twitter:hover {
    background-color: #000;
    transform: translateY(-2px);
    color: var(--secondary-color);
}



.footer-disclaimer p {
    font-size: 15px;
    font-family: "Raleway", sans-serif;
}

.footer-copyright-ssl-wrap {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--primary-color);
    padding: 30px 10px 0 10px;
    margin-top: 30px;
    justify-content: space-between;
    align-items: center;
}

.copyright-wrap p {
    font-size: 14px;
    font-family: "Raleway", sans-serif;
    color: var(--primary-color);
}

.ssl-container {
    height: 50px;
    width: 300px;
}

.ssl-logo {
    background-image: url("/assets/images/ssl\ encryption.svg");
    filter: invert(1);
}

/* Footer CSS End*/
/* disclamir styling start */
section.discalimer {
    background-image: url(../images/body.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
    background-attachment: fixed;
    text-align: center;
}

.dis_text p {
    margin-bottom: 20px;
    color: var(--secondary-color);
}

/* disclamir styling end */
/* privacy styling start */


.true_banner-text p {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 1px;
}

.info_priterm-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 30px;
    box-shadow: #978e8e 0px 7px 11px 0px;
}

.info_priterm-content-grp {
    margin-bottom: 30px;
    border-radius: 10px;
}

.info_priterm-content-grp:last-child {
    margin-bottom: 0px;
}

.info_priterm-content-grp p {
    margin-bottom: 8px;
    line-height: 1.5;
    font-weight: normal;
}

.info_priterm-content-grp h3 {
    color: #000;
}

.info_priterm-content-grp p a {
    color: #000;
}

.info_priterm-content-grp ul {
    list-style: none;
    padding-left: 20px;
}

.info_priterm-content-grp ul li {
    position: relative;
}

.true_banner-text-wrap h4 {
    margin-bottom: 15px;
    font-size: 40px;
    color: var(--primary-color);
}

.true_banner-text p {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 1px;
}

.info_priterm-content-grp ul li:before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: -20px;
    top: 0;
    font-size: 25px;
}

.sub-banner {
    height: 500px;
    position: relative;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sub-banner::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 60%);
    height: 100%;
    width: 100%;
    z-index: -1;
}

.sub-banner-content h1 {
    color: var(--secondary-color);
    text-align: center;
    font-size: 45px;
    text-transform: uppercase;
}

.info_priterm-content-grp ul li {
    color: #000;
    font-weight: 300;
    line-height: 30px;
}

.privacy_policy {
    background-image: url(../images/privacypolicy.jpg);
    background-position: top;
}

.terms_conditions {
    background-image: url(../images/termsbanner.jpg);
}

.info_priterm-content-grp a {
    color: #ec661f;
}

/* privacy styling end */
/* conatct styling start */
.header-pages-content-section {
    max-width: 1370px;
    margin: 0 auto;
}

.header-pages-cards h3 {
    color: #ec661f;
    margin-bottom: 15px;
    font-size: 25px;
}

.header-pages-cards strong {
    color: #ec661f;
}

.header-pages-cards ul li {
    color: var(--secondary-color);
}

.header-pages-cards p {
    line-height: 1.3;
    margin-bottom: 10px;

}

.header-pages-cards {
    margin-bottom: 30px;
}

.contact-page-form-section {
    margin: 50px 0;
    padding: 20px;
    border-radius: 0 20px;
    box-shadow: #ec661f 0px 5px 10px 5px;
}

.form-wrapper {
    height: auto;
    width: 100%;
}

#contact {
    background-image: url("/assets/images/how-we-compare-bg.png");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    max-width: 700px;
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

fieldset:last-child {
    margin: 0;
}

#contact input,
#contact textarea,
#contact select {
    width: 100%;
    border: 1px solid #ccc;
    background: var(--secondary-color);
    margin: 0 0 5px;
    padding: 10px;
    font-size: 16px;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
}

#contact input,
#contact textarea:hover,
#contact select:hover {
    -webkit-transition: border-color 0.3s ease-in-out;
    -moz-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
}


#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}

#contact select {
    max-width: 100%;
    color: #444546;
    outline: none;
}

#contact button {
    cursor: pointer;
    border: none;
    color: #fff;
    margin: 0 0 5px;
    width: auto;
    padding: 11px 30px;
    font-size: 17px;
    transition: 0.4s all ease-in-out;
    background-color: #ec661f;

}

#contact button:hover {
    box-shadow: #ec661f 0px 5px 10px;
    background-color: var(--secondary-color);
    color: #2eb185;
}

#contact button:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
    text-align: center;
}

#contact input:focus,
#contact textarea:focus {
    outline: 0;
    border: 1px solid #444546;
}

::-webkit-input-placeholder,
::-webkit-select-placeholder {
    color: #444546;
}

:-moz-placeholder {
    color: #444546;
}

:-ms-input-placeholder {
    color: #444546;
}

.contact-card1-image {
    background-image: url("/assets/images/contactaside.jpg");
    height: 100%;
    border-radius: 0 20px;
    margin-bottom: 20px;
}

#contact select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/assets/images/contact-select-arrow.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
}

.top-pages-cards h3 {
    margin-bottom: 15px;
    color: #ec661f;
    text-transform: uppercase;
}

.top-pages-cards p a {
    color: #ec661f;
    font-weight: 600;
}

.top-pages-cards p {
    margin-bottom: 10px;
    line-height: 1.5;
    letter-spacing: 2px;

}

.top-pages-cards-content ul {
    list-style: none;
    padding-left: 20px;
}

.top-pages-cards-content ul li {
    position: relative;
}

.top-pages-cards-content ul li:before {
    content: "•";
    color: #ec661f;
    position: absolute;
    left: -20px;
    top: 3.5px;
    font-size: 16px;
}

.header-pages-cards p a {
    color: #9cc3b8;
}

.header-pages-cards ul {
    padding-left: 20px;
    margin: 10px 0;
}

.header-pages-cards ul li {
    position: relative;
}

.header-pages-cards ul li::before {
    content: "•";
    color: #ec661f;
    position: absolute;
    left: -20px;
    top: 3.5px;
    font-size: 16px;
}

section.get_touch {
    padding: 60px 0;
    text-align: center;
}

.gt_text p {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
}

.contact_us {
    background-image: url(../images/contactbanner.jpg);
}

.feedback,
.inquiry,
.connect {
    border-top: 1px solid var(--secondary-color);
}

section.choose_us {
    padding: 60px 0;
    text-align: center;
}

.chose_text {
    background: var(--secondary-color)fff8c;
    padding: 60px 0;
    border-radius: 20px;
}

.chose_text p b {
    font-size: 20px;
}

.chose_text h2 {
    font-size: 40px;
    margin-bottom: 30px;
}

.chose_text p {
    padding: 10px !important;
}

/* about styling start */
.about_head {
    text-align: center;
    margin-bottom: 40px;
}

.about_head h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.about_head h2 {
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-top: 10px;
    color: var(--primary-color);
}

.content {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    }


.column {
    flex: 1;
}

.column p {
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
}

.about_head h2 {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 20px;
}

section.our_about {
    padding: 60px 0;
}

.column p strong {
    font-size: 30px;
    font-weight: normal;
}

.column:first-child {
    padding: 40px;
    border-right: 1px solid #7a7676;
    background: var(--primary-color);
}

.column {
    padding: 40px;
    background: var(--primary-color);
}

.about_us {
    background-image: url(../images/aboutbanner.jpg);
    background-position: center bottom;
}

.img_about {
    background: url(../images/aboutpic.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
}
.our_about1 .content {
    display: flex;
    flex-wrap: wrap;
}
.our_about1 .content .column {
    width:50% !important;
}
.our_abt1_col {
    background-color: #000;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    min-height: 170px;
}
.our_abt1_col:last-child{
    min-height: 0;
}
.our_abt1_col p strong{
    font-size: 22px;
    margin-bottom: 15px;
    display: block;
}
/* about styling end */

/* gamize styling start */
section.gaime_sec {
    padding: 60px 0;
}

section.gaime_sec h2 {
    text-align: center;
    font-size: 40px;
    margin-bottom: 60px;
}

.gaime_text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
}

.old_game {
    padding: 20px;
    background: var(--secondary-color)fff30;
    margin: 10px;
    border-radius: 10px;
}

.old_game h3 {
    margin-bottom: 20px;
    line-height: normal;
    font-size: 22px;
}

.gaime_img {
    background: url(/assets/images/aboutfirst.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 350px;
    border-radius: 20px;
}

.gaime_img.one {
    background: url(/assets/images/gameone.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 600px;
    border-radius: 20px;
}

.personal_policy {
    background: url(../images/personaldatabanner.jpg);
}

/* gamize styling end */

/* How To Play Page CSS Start */
.how_to_play {
    background-image: url(../images/how-to-play-banner.jpg);
}

.step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 45px;
    flex-wrap: wrap;
    box-shadow: #35dfb2 0px 8px 24px;
    padding: 20px;
    border-radius: 20px 0;
}

.step-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.how_play_image {
    width: 50%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;

}

.how_play_image1 {
    background-image: url("/assets/images/how_play_img1.jpg");
    background-size: contain;
}

.how_play_image2 {
    background-image: url("/assets/images/how_play_img2.jpg");
}

.how_play_image3 {
    background-image: url("/assets/images/how_play_img3.jpg");
}

.how_play_image4 {
    background-image: url("/assets/images/how_play_img4.jpg");
    background-size: cover;
}

.how_play_image5 {
    background-image: url("/assets/images/how_play_img5.jpg");
}

.how_play_image6 {
    background-image: url("/assets/images/how_play_img6.jpg");
}

.how_play_image7 {
    background-image: url("/assets/images/how_play_img7.jpg");
    background-size: cover;
}

.how_play_image8 {
    background-image: url("/assets/images/how_play_img8.jpg");
}

.how_play_image9 {
    background-image: url("/assets/images/how_play_img9.jpg");
}

.how_play_image10 {
    background-image: url("/assets/images/how_play_img10.jpg");
}

.text {
    width: 50%;
    padding: 0 20px;
}

.step h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--primary-color);
    line-height: 1.2;
}

h3 {
    font-size: 22px;
    color: var(--secondary-color);
    margin-top: 15px;
    margin-bottom: 10px;
}

.step p {
    font-size: 16px;
    color: var(--secondary-color);
}


.cta {
    background-color: #0cdca8;
    color: var(--secondary-color);
    text-align: center;
    padding: 40px 20px;
    border-radius: 10px;
    margin-top: 50px;
}

.cta h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #000;
}

.cta p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #000;
}

/* How To Play Page CSS End */

/* Login Signup Form Pages CSS Start */
.login_signup_form {
    padding: 60px 0 100px 0;
    background: #fafafa;
    background-blend-mode: multiply;
    position: relative;
    background-image: url(../images/login-signup-page-bg.jpg);
    background-color: rgba(0 0 0/40%);
    background-position: center;
    background-size: cover;
}

.form-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#login-signup input,
#login-signup textarea,
#login-signup button {
    font-family: "Raleway", sans-serif;
}

#login-signup {
    background-color: #fff;
    backdrop-filter: blur(10px);
    padding: 20px;
    margin: 10px 0 0 0;
    border-radius: 20px;
    box-shadow: #cfcfcf 0px 5px 9px;
}

#login-signup h3 {
    display: block;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--primary-color);
    letter-spacing: 3px;
    text-transform: uppercase;
}

#login-signup h4 {
    margin: 5px 0 15px;
    display: block;
    font-size: 13px;
    font-weight: 400;
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

#login-signup input,
#login-signup textarea {
    width: 100%;
    border: 1px solid #ccc;
    background: var(--secondary-color);
    color: #000;
    margin: 0 0 5px;
    padding: 10px;
    border-radius: 5px;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
}

#login-signup input:hover,
#login-signup textarea:hover {
    -webkit-transition: border-color 0.3s ease-in-out;
    -moz-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    border: 1px solid #737373;
    font-family: "Raleway", sans-serif;
}

#login-signup textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}

#login-signup button {
    cursor: pointer;
    width: 100%;
    border: none;
    background: var(--primary-color);
    color: #fff;
    margin: 0 0 5px;
    padding: 10px;
    font-size: 20px;
    font-family: "Raleway", sans-serif;
    border-radius: 8px;
    transition: 0.4s all ease-in-out;
}

#login-signup button:hover {
    background: var(--secondary-color);
    box-shadow: var(--primary-color) 0px 4px 5px;
    color: #2eb185;
}

#login-signup button:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.jump-text a {
    color: var(--primary-color);
}


#login-signup input:focus,
#login-signup textarea:focus {
    outline: 0;
    border: 1px solid #454545;
}

::-webkit-input-placeholder {
    color: #454545;
}

:-moz-placeholder {
    color: #454545;
}

::-moz-placeholder {
    color: #454545;
}

:-ms-input-placeholder {
    color: #454545;
}

/* Login Signup Form Pages CSS Start */
/* offer styling start */
.offer-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
section.reasons-section .container>p {
    color: #000;
    margin-bottom: 25px;
    max-width: 1100px;
    margin: 20px auto;
}

.offer-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.offer-item {
    background-color: var(--primary-color);
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.offer-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.offer-item h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.offer-item p {
    line-height: 1.5;
    color: #fff;
}

/* offer styling end */
/* football styling start */
.reasons-section {
    color: var(--secondary-color);
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reasons-section h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: var(--primary-color);
    text-align: center;
}

.reason-item:first-child {
    background: #4bc75f;
}

.reason-item:last-child {
    background: #ec661f;
}

.reasons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.reason-item {
    background-color: #000;
    padding: 20px;
    border-radius: 8px;
    width: calc(33% - 20px);
    box-sizing: border-box;
    text-align: center;
}

.reason-item h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.reason-item p {
    font-size: 1rem;
    line-height: 1.6;
}

/* football styling end */

/* Leagues CSS Start */

/* League Page CSS Start */

.fanatiqs-leagues-pages {
    height: 450px;
    background-image: url("../images/leagues-banner-image.jpg");
    background-position: 10%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0 0 0/20%);
    display: flex;
    align-items: center;
    z-index: 1;
    position: relative;
}

.fanatiqs-leagues-pages::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / 45%);
    height: 100%;
    width: 100%;
    z-index: -1;
}

.fanatiqs-banner-content {
    margin-top: 50px;
}

.inline-list {
    display: inline-block;
}

.inline-list h3 a,
.inline-list h3 {
    color: var(--secondary-color);
    font-size: 25px;
}

.home-list {
    padding-right: 25px;
}

.next-page-list {
    padding-left: 30px;
    position: relative;
}

.next-page-list::before {
    position: absolute;
    content: "";
    background-image: url(../images/leagues-arrow.png);
    top: 50%;
    left: -5px;
    height: 20px;
    width: 20px;
    background-size: cover;
    color: var(--secondary-color);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fanatiqs-leagues-pages .leagues-ul {
    background: var(--primary-color);
    display: inline-flex;
    padding: 15px 30px;
    border-radius: 3px;
    align-items: center;
}

.leagues-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.league-item a {
    display: flex;
    align-items: center;
    background-color: #ffffff69;
    border-radius: 10px;
    margin-bottom: 2rem;
    justify-content: center;
}

/* 
.league-item a:hover .league-details h6 {
    color: var(--secondary-color);
}

.league-item a:hover .league-details .type {
    color: var(--secondary-color);
}

.league-item a:hover .league-details .start-date,
.league-item a:hover .league-details .end-date {
    color: var(--secondary-color);
} */
.fanatiqs_leagues {
    position: relative;
    overflow: hidden;
}

.vd_naive {
    position: relative;
}

.odd_naive .matches-list ul {
    gap: 0;
}

.vd_naive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.5;
}

.fanatiqs_leagues .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.fanatiqs_leagues-inner {
    position: relative;
    z-index: 1;
}

.fanatiqs-league-header h6 {
    color: var(--secondary-color);
    font-family: "Raleway", sans-serif;
}

.fanatiqs-league-header {
    background-color: var(--primary-color);
    display: flex;
    padding: 2rem 1.875rem;
    margin-bottom: 20px;
    border-radius: 0 20px;
}

.fanatiqs-league-header .league-details h6 {
    color: var(--secondary-color);
}

.league-logo {
    background: var(--primary-color);
    max-width: 300px;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    z-index: 9;
    position: relative;
    height: calc(100% + 40px);
    top: -20px;
}

.league-details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

.league-logo img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.league-details h6 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    font-family: "Raleway", sans-serif;
    color: #fff;
}

.league-details p {
    margin: 0.5rem 0;
    font-size: 16px;
    font-family: "Raleway", sans-serif;
}

.league-details .type {
    color: #fff;
    font-family: "Raleway", sans-serif;
}

.league-details .start-date,
.league-details .end-date {
    color: #fff;
}

.leagues-list .league-item a {
    text-decoration: none;
    color: inherit;
    font-family: "Raleway", sans-serif;
    transition: 0.4s all ease-in-out;
    border-radius: 0 20px;
}

.leagues-list {
    padding: 3.125rem;
    border-radius: 0 20px;
}



.inline-list {
    display: inline-block;
}

.inline-list h3 a,
.inline-list h3 {
    color: var(--secondary-color);
    font-size: 1.875rem;
    font-family: "Raleway", sans-serif;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 0;
}

.home-list {
    padding-right: 1.5625rem;
}

.next-page-list {
    padding-left: 1.875rem;
    position: relative;
}

.next-page-list::before {
    position: absolute;
    content: "";
    background-image: url(../images/leagues-arrow.png);
    top: 63%;
    left: -5px;
    height: 20px;
    width: 20px;
    background-size: cover;
    color: var(--secondary-color);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.fanatiqs_leagues-inner h2 {
    font-size: 35px;
    color: var(--secondary-color);
    margin-bottom: 50px;
    font-family: "Raleway", sans-serif;
}

.league-details-main {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 100px;
    position: relative;
}

.league-details-main .league-details {
    width: calc(100% / 4);
}

/* League Page CSS End */

/* matches pages css */
.matches-details .table-color li {
    padding: 30px 0;
}

.matches-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.matches-list li.match-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    border-radius: 0 20px;
}

.leagues-h2 {
    font-size: 35px;
    color: var(--secondary-color);
    font-family: "Raleway", sans-serif;
}

.match-team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-team-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-team-inner img {
    height: 35px;
    width: 35px;
    margin: 0 auto;
    text-align: center;
    display: block;
}

.match-info {
    flex: 1;
    text-align: center;
}

.match-info h6 {
    margin: 10px 0 0 0;
    letter-spacing: 1px;
    font-family: "Raleway", sans-serif;
    color: #fff;
}

.match-info.match-width.mid {
    background: var(--primary-color);
    max-width: 300px;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    z-index: 9;
    position: relative;
    height: calc(100% + 40px);
    top: -20px;
}

.match-info p {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
}

.match-info span {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 0;
}

.match-team h6 {
    margin: 10px 0 0 0;
    letter-spacing: 1px;
    font-family: "Raleway", sans-serif;
    color: #fff;
}

.match-team a::before {
    content: "";
    position: absolute;
    background: transparent;
    inset: 0;
}

.matches-list li .match-team:last-child {
    justify-content: flex-end !important;
}

.matches-list li .match-team h6 {
    text-align: right;
}

/* matches pages css start */

.matches-list li.match-item .match-width {
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-color {
    background-color: var(--primary-color);
    display: flex;
    padding: 2rem 1.875rem;
    margin-bottom: 20px;
    border-radius: 0 20px;
}

.header-color h6 {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    color: var(--secondary-color);
    font-family: "Raleway", sans-serif;
}

.table-color li {
    background-color: #ffffff69;
    border-radius: 10px;
    margin-bottom: 2rem;
    padding: 0rem 1.875rem;
    transition: 0.5s all ease-in-out;
    border-radius: 0 20px;
}

.national-table .match-team-inner {
    display: block;
}

.national-table .match-width:last-child {
    text-align: right;
}


/* 
.table-color li:hover {
    background-color: var(--primary-color);
} */

/* .table-color li:hover .match-team h6,
.table-color li:hover .match-info h6,
.table-color li:hover .match-info p,
.table-color li:hover .match-info span {
    color: var(--secondary-color);
} */

.matches-list li.match-item a {
    display: flex;
    width: 100%;
}

/* matches pages css end */

/* matches details css start */
.matches-details .fanatiqs_leagues-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.plyr-hedr {
    color: var(--secondary-color);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 14px;
    padding: 1.25rem;
    margin: 0 0 50px;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.plyr-hedr::after {
    background: var(--primary-color);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: -1;
    border-radius: 14px;
}

td.match-score h4 {
    color: #000;
    font-size: 17px;
}

.plyr-hedr .team-logo img {
    width: 60px;
    width: 60px;
    aspect-ratio: 1;
    text-align: center;
    margin: auto;
    object-fit: contain;
}

.matches-details .team_inner {
    margin-bottom: 10px;
}

.plyr-hedr .team-logo:last-child {
    text-align: right;
}

.plyr-hedr .match-details {
    text-align: center;
}

.plyr-hedr .team-logo span {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    padding: 0 5px;
}

.tab-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.toggle-target {
    background: var(--primary-color);
    width: 100%;
    padding: 10px 30px;
    max-width: 1000px;
    margin: 0 auto;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--secondary-color);
    flex-wrap: wrap;
}
.plyr-hedr .team-logo h6 {
    text-align: center;
}

.matches-details .matches-list {
    padding: 2rem 0;
}

.toggle-target a {
    color: var(--secondary-color);
    font-size: 19px;
    padding: 10px 30px;
    font-weight: 500;
    width: 25%;
    text-align: center;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

a.tab.active {
    background: var(--secondary-color);
    color: #000;
}

.leagues-list,
.matches-list,
.team-view-table,
.fanatiqs_leagues-inner-content {
    width: 100%;
    border-radius: 14px;
}

.matches-details .matches-list {
    max-width: 1000px;
    margin: 0 auto;
}

.plyr-hedr h6 {
    color: #000;
}

.plyr-hedr p {
    color: var(--secondary-color);
    font-size: 13px;
}

.fanatiqs-header .header-color {
    background-color: var(--primary-color);
    border-radius: unset;
}

.fanatiqs-header-main .matches-list {
    border-radius: 0;
    position: relative;
}

.matches-list .fanatiqs-header .header-color .match-width {
    width: calc(100% / 4);
    text-align: left;
    justify-content: left;
}

.matches-list .fanatiqs-header li {
    margin-bottom: 0;
}

.fanatiqs-header {
    margin-bottom: 0;
}

.fanatiqs-header-main .table-color li {
    border-radius: 0 20px;
    margin-bottom: 0;
    position: relative;
}

.fanatiqs-header-main .table-color {
    margin: 0;
}

.matches-list .fanatiqs-table li.match-item .match-width {
    width: calc(100% / 4);
    text-align: left;
}


.matches-list .fanatiqs-table li.match-item .match-width:last-child {
    position: absolute;
    right: -8%;
    top: 54%;
    transform: translateY(-50%);
}

.team-logo {
    text-align: center;
    margin: 0 auto;
    background: #fff;
    margin-top: -50px;
    padding: 10px 50px;
    border-radius: 10px;
}
.team-logo h6 {
    text-align: center;
}
.cen_mid h6 {
    color: #fff;
}

.matches-list .fanatiqs-table li.match-item .match-width img {
    width: 41px;
}

button.player-toggle {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 2px 2px 5px 0 rgba(0 0 0 / 50%);
}

.table-color li:hover button.plus.player-toggle {
    box-shadow: 0px 2px 5px 0 var(--secondary-color);
}


button.player-toggle i {
    color: var(--secondary-color);
}

.team-btns a {
    padding: 9px 52px;
    background-color: var(--secondary-color);
    color: #000;
    margin-left: 10px;
    transition: 0.4s all ease-in-out;
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    border-radius: 5px;
    display: inline-block;
}

.match-details span {
    margin-bottom: 0;
}

.matches-details .matches-list li.match-item {
    margin-bottom: 20px;
}

.matches-details .matches-list li.match-item:hover button.plus.player-toggle {
    background-color: var(--secondary-color);
}

.matches-details .matches-list li.match-item:hover button.plus.player-toggle i {
    color: var(--primary-color);
}

/* matches details css end */

/* Team view page css start */
.team-view-header ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
    margin: 20px auto 0;
    border: 1px solid var(--secondary-color);
    border-width: 1px;
    padding: 10px 0;
    border-radius: 10px;
}

.team-view-header {
    color: var(--secondary-color);
    border-radius: 14px;
    padding: 30px;
    margin: 0 0 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background: url(/assets/images/Background.jpg);
    position: relative;
    z-index: 1;
}

.team-view-header::after {
    background: var(--primary-color);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: -1;
    border-radius: 0 20px;
}


.team-view-header ul li {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.c-details h6 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--secondary-color);
    font-family: "Raleway", sans-serif;
}

.table-color li:hover .captain-width h6 {
    color: var(--secondary-color);
}

.c-details p {
    font-size: 16px;
    color: var(--secondary-color);
}

.c-logo {
    background: var(--primary-color);
    width: 30px;
    height: 30px;
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--secondary-color);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    box-shadow: 2px 2px 5px 0 rgba(0 0 0 / 50%);
    margin-bottom: 0;
    letter-spacing: 0px;
}

.table-color li:hover .c-logo {
    box-shadow: 0px 2px 5px 0 var(--secondary-color);
}

.team-view-page .team-view-header .c-logo {
    background: var(--secondary-color);
    color: #000;
}

.team-view-header h4 {
    font-size: 18px;
    text-align: center;
    color: var(--secondary-color);
    font-family: "Raleway", sans-serif;
}

td.player-dp img {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    object-fit: cover;
}

.team-view-page .table-color li {
    padding: 20px;
}

.captain-width h6 {
    color: #fff;
    font-weight: 500;
    font-family: "Raleway", sans-serif;
    transition: 0.3s all ease-in-out;
}

.my-team li {
    display: flex;
}

.team-view-list {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.team-btns {
    text-align: center;
    margin: 20px 0 0;
}

.next-btn {
    display: inline-block;
    background: var(--secondary-color);
    color: #000;
    text-decoration: none;
    padding: 8px 20px;
    text-transform: uppercase;
    border-radius: 8px;
    transition: all 0.3s linear;
    letter-spacing: 2px;
    font-weight: 600;
}

.next-btn:hover {
    opacity: 0.9;
}

ul.my-team .player-dp img {
    height: 50px;
    width: 50px;
    aspect-ratio: auto;
    object-fit: contain;
}

.header-width {
    width: calc(100% / 4);
}

.header-color li {
    width: 100%;
}

.captain-main .table-color {
    padding: 0;
}

.captain-main .captain-width {
    width: calc(100% / 4);
    display: flex;
    align-items: center;
    gap: 10px;
}

.captain-main p.team_captain {
    margin: 0;
}

.team-view-page .fanatiqs_leagues-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.captain-header {
    padding: 2rem 1.875rem !important;
    margin-bottom: 20px !important;
    border-radius: 0 20px;
}

/* Team view page css en */

/* My matches CSS Start */
.matches-list {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 0 20px;
}

li.my-match-item {
    display: flex;
    align-items: center;
    padding: 20px;
}

.my-matches .match-team-header h6 {
    color: var(--secondary-color);
}

.my-match-team-logo img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.brooklyn-header .match-width {
    width: calc(100% / 5);
}

.brooklyn-main .matches-list {
    max-width: 1160px;
}

.brooklyn-main .table-color .match-width {
    width: calc(100% / 5);
}

.brooklyn-main ul {
    padding: 0 10px;
}

.my-match-info span {
    margin-bottom: 0;
}

.match-team-header .my-match-info h6 {
    color: var(--secondary-color);
}

.my-match-info h6,
.my-match-team-logo h6,
.my-match-info p {
    color: #fff;
    font-family: "Raleway", sans-serif;
}

.my-match-score h4 {
    color: #fff;
    font-size: 20px;
    font-family: "Raleway", sans-serif;
}

p.win {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
}

.my-matches li.my-match-item {
    display: flex;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.my-match-info span {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
}

.my-match-score h4 {
    color: #fff;
}

.table-color li:hover .my-match-info h6,
.table-color li:hover .my-match-team-logo h6,
.table-color li:hover .my-match-info p,
.table-color li:hover .my-match-info span,
.table-color li:hover .win,
.table-color li:hover .my-match-score h4 {
    color: var(--secondary-color);
}

/*Match Details CSS Start */
.palyer-header {
    color: var(--secondary-color);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 14px;
    padding: 2rem 1.875rem;
    margin: 0 0 3.125rem;
    background: url(/assets/images/Background.jpg);
    align-items: center;
    width: 100%;
    max-width: 62.5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.palyer-header::after {
    background: var(--primary-color);
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: -1;
    border-radius: 0 20px;
}

.palyer-header .team-logo img {
    width: 3.75rem;
    aspect-ratio: 1;
    object-fit: cover;
    height: 3.75rem;
}

.match-details-page .palyer-header .team-logo img {
    margin-bottom: 0.625rem;
}


.palyer-header .match-details {
    text-align: center;
}

.palyer-header .team-logo span {
    font-size: 1rem;
    font-weight: 700;
}

.palyer-header .team-logo h6 {
    text-transform: capitalize;
    font-size: 1rem;
    font-family: "Raleway", sans-serif;
    text-align: center;
    color: #000;
}

.team_inner {
    display: flex;
    align-items: center;
}

.palyer-header .team-logo:last-child .team_inner {
    justify-content: flex-end;
}

.back-btn a {
    display: inline-block;
    padding: 0.3125rem 1.625rem;
    background: var(--secondary-color);
    border-radius: 4px;
    margin: 0 0 1.25rem;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

.back-btn a svg {
    fill: var(--primary-color);
}

.back-btn a:hover {
    opacity: 0.9;
}

li.team-member {
    display: flex;
    padding: 20px;
}

li.team-member .match-team-logo img {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

.association-main .div-tbl {
    max-width: 1000px;
    margin: 0 auto;
}

.association-header {
    padding: 0;
}

.association-header .match-width {
    width: calc(100% / 4);
}

.association-main .table-color {
    padding: 0;
}

.team-member .match-width {
    width: calc(100% / 4);
}


.team-member .match-width {
    margin-bottom: 0;
}

.match-details-page .fanatiqs_leagues-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.match-details span {
    color: var(--secondary-color);
    font-size: 17px;
}

.match-details span {
    color: var(--secondary-color);
    font-size: 17px;
}

li.my-match-item h6 {
    color: var(--secondary-color);
}

p.player-name,
p.match-score,
p.match-position {
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 17px;
    font-weight: 500;

}

ul.team-list li:hover p.player-name,
ul.team-list li:hover p.match-score,
ul.team-list li:hover p.match-position {
    color: var(--secondary-color);
}

/*Match Details CSS Start */

/* My Profile Section CSS Start */
.avatar-content img {
    width: 45px;
    aspect-ratio: 1;
    border-radius: 50%;
}

.avatar .dropdown {
    position: absolute;
    background: var(--secondary-color);
    padding: 10px;
    width: max-content;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    left: 0;
    top: 120%;
    display: none;
    z-index: 999;
}

.profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dbd7d7;
}

.profile {
    position: relative;
    /* display: none; */
    margin-left: 30px;
}

.avatar-content span {
    color: #000;
    font-size: 14px;
    margin-left: 10px;
}

.dropdown li a {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    padding: 5px 0;
    display: inline-block;
    text-transform: capitalize;
}

.dropdown li a img {
    margin-right: 10px;
    max-width: 20px;
}

div#mySidenavs {
    display: flex;
    gap: 20px;
}

div#mySidenavs {
    display: flex;
    gap: 20px;
}

.avatar-content a span {
    color: var(--secondary-color);
    font-size: 17px;
}

.avatar-content svg {
    height: 20px;
    width: 20px;
    background: #2eb185;
    fill: var(--secondary-color);
}

.profile-dropdown-options {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
}

.profile-image-dropdown {
    background-image: url("../images/dummy.png");
}


.profile-image-stadium {
    background-image: url("../images/stadium.png");
}

.profile-image-logout {
    background-image: url("../images/logout.png");
}

.avatar-content i {
    color: var(--secondary-color)f;
    cursor: pointer;
}

.avatar-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-content a {
    display: flex;
    align-items: center;
}

.dropdown ul {
    display: block !important;
}

.dropdown ul li a {
    color: #000 !important;
}

.dropdown ul li::after {
    display: none !important;
}

.dropdown ul li {
    margin-left: 0 !important;
}

.profile ul li a {
    padding: 5px 0 !important;
    text-transform: capitalize !important;
    display: flex;
    align-items: center;
}

.mmy-profile-inner {
    display: flex;
    width: 100%;
    margin-bottom: 80px;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: #c7c7c7 0px 8px 15px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    background-blend-mode: multiply;
    background-image: url(/assets/images/profile_section_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.my-profile {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    background-image: url(../images/login-signup-page-bg.jpg);
    background-color: rgba(0 0 0/40%);
    background-blend-mode: multiply;

}

.profile-side {
    width: 100%;
    height: auto;
    padding: 20px 10px;
    border-radius: 20px 0 0 20px;
}

.col-sec {
    width: 100%;
}

.user-content-update {
    padding: 1.875rem;
    border-radius: 0 1.25px 1.25px 0;
}

.user-img {
    text-align: center;
    position: relative;
}

.update_img_user {
    position: relative;
    width: 5rem;
    margin: 0 auto;
    height: 5rem;
    border-radius: 50%;
}

.update_img_user_img {
    position: relative;
    width: 80px;
    margin: 0 auto;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #2eb185;
    overflow: hidden;
}

.update_img_user_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.edit_pan svg {
    height: 12px;
    fill: var(--secondary-color);
}

.edit_pan {
    position: absolute;
    top: 63%;
    background: #2eb185;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    transform: translate(0%, 0%);
    border-radius: 50%;
    font-size: 1rem;
    padding: 5px;
    cursor: pointer;
}

.user_name h3 {
    font-size: 1.25rem;
    margin: 0.625rem 0 0;
    color: var(--secondary-color);
}

.content-bar {
    margin-bottom: 0.625rem;
}

.content-bar a {
    display: inline-block;
    color: var(--secondary-color);
    background-color: #2eb185;
    padding: 0.625rem;
    border-radius: 10px;
    transition: 0.3s all ease-in-out;
    font-weight: 600;
}

.content-bar a:hover {
    background-color: var(--secondary-color);
    box-shadow: #2eb185 0px 3px 8px;
    color: #2eb185;
}

.content-bar span {
    background: #2eb185;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 30px;
    color: #000;
    cursor: pointer;
    font-weight: 600;
    display: inline-block;
    transition: 0.4s all ease-in-out;
}

.content-bar span:hover {
    background: var(--secondary-color);
    box-shadow: #2eb185 0px 3px 8px;
}

.edit_option_bar {
    text-align: center;
    margin-top: 12px;
}

.user-img {
    text-align: center;
    position: relative;
}

span.edit_pan i {
    color: var(--secondary-color)f;
}

.basket_leagues .row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 20px;
}

.basket_leagues .row .mb-3.col-sm-6 {
    width: 48%;
}

.basket_leagues .row .mb-3.col-sm-6 input {
    width: 100%;
}

.user-content-box input {
    color: #000;
    outline: none;
    padding: 12px 12px;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    display: block;
}

.user-content-box {
    text-align: center;
}

.para {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.556;
    color: #fafaff;
}

.user-content-box button {
    width: auto;
    padding: 0.625rem 1.875rem;
    display: inline-block;
    margin-left: 0;
    background-color: #2eb185;
    border: 2px solid #2eb185;
    outline: none;
    font-size: 1.125rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
    transition: 0.4s all ease-in-out;
    color: #fff !important;
    padding: 10px 30px !important;
    margin-top: 20px;

}

.user-content-box button:hover {
    background-color: var(--secondary-color);
    color: #2eb185 !important;
    box-shadow: none !important;
}

.reset-password {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0.75rem;
}

.reset-password a {
    color: var(--secondary-color);
    text-decoration: underline;
    cursor: pointer;
    text-underline-offset: 5px;
}

/* My Profile Section CSS End */
/* Leagues CSS End */
.playing-guide h1 {
    color: var(--secondary-color);
    font-size: 34px;
    margin: 0 0 20px;
}

.playing-guide h2 {
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.playing-guide ul {
    list-style-type: none;
    padding: 0;
}

.playing-guide li {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.playing-guide ul li::before {
    content: '\2713';
    /* Checkmark */
    color: var(--secondary-color);
    margin-right: 10px;
}

.playing-guide p {
    color: var(--secondary-color)f;
    font-size: 18px;
    margin: 10px 0;
}


.playing-guide {
    padding: 80px 0;
    margin: 0 auto;
    background-image: url(https://phpstack-1180784-5168116.cloudwaysapps.com/assets/images/body.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.playing-guide-warp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.faq-container {
    margin: 20px auto;
    padding: 20px;
    background: var(--secondary-color);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.faq-item:last-child {
    border-bottom: none;
}



.faq-title {
    cursor: pointer;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f1f1;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.faq-title:hover {
    background-color: #e1e1e1;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 15px;
    font-size: 16px;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/aboutpic.jpg);
}

.faq-content img {
    max-width: 100%;
    margin-top: 10px;
    border-radius: 8px;
}

.faq-content.show {
    max-height: 500px;
    padding: 15px;
}

.faq-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.faq-icon.rotate {
    transform: rotate(180deg);
}

.faq-content p {
    margin: 10px 0;
    color: var(--secondary-color);
}

.faq-content ul li {
    color: var(--secondary-color);
    line-height: 30px;
}

/* play styling start */
.home_leagues_btn {
    padding: 0.9375rem 1.875rem;
    font-size: 1.25rem;
}

.butn {
    padding: 0.625rem 0.9375rem;
    outline: none;
    border: none;
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    margin-left: 10px;
    transition: 0.4s all ease-in-out;
    border-radius: 0;
    font-weight: 600;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.butn:hover {
    background-color: #fff;
    box-shadow: var(--primary-color) 0px 3px 8px;
    color: var(--primary-color);
    border-color: #fff;
}


/* Modal CSS Start */
.modal-body p {
    color: #000;
    font-size: 20px;
    text-align: center;
}

.modal-footer {
    justify-content: center;
}

.modal-image {
    height: 100px;
    width: 100%;
    margin-bottom: 20px;
}

.modal-images-inner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    margin: 0 auto;
}
.modal-title{
    display: none;
}
.modal-footer {
    justify-content: center;
}
.modal-footer .modal-btn {
    background: #2eb185;
    padding: 10px 20px !important;
    border-radius: 5px;
    color: #fff !important;
}
.modal-failure-image {
    background-image: url(../images/modal-close.png);
}

.modal-success-image {
    background-image: url(../images/modal-check.png);
}

.modal-btn {
    color: #fff;
    background-color: #ea592e;
    border: none;
    padding: 11px 30px !important;
    width: auto;
    font-size: 17px;
    font-weight: 600;
    border: 1px solid #ea592e;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
}

.modal-btn:hover {
    background-color: #fff;
    border: 1px solid #ea592e;
    color: #000;
}

.modal-header {
    border-bottom: 1px solid #ea592e;
}

.modal-footer {
    border-top: 1px solid #ea592e;
}

/* Modal CSS Start */



/* Fixes */
span.alert {
    position: absolute;
    left: 50%;
    top: -50px;
    min-width: 280px;
    padding: 5px;
    transform: translateX(-50%);
}