/*=====================================================
PlayinExchange
Main Stylesheet
Bootstrap 5
======================================================*/

/*==============================
Google Font
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
Root
==============================*/

:root{

    --primary:#FDBA12;
    --primary-dark:#d99b00;

    --secondary:#222831;

    --dark:#0d0d0d;

    --dark2:#161616;

    --dark3:#1f1f1f;

    --white:#fff;

    --light:#f7f7f7;

    --text:#c8c8c8;

    --border:#2e2e2e;

    --success:#00c853;

    --danger:#ff5252;

    --radius:12px;

    --transition:.35s ease;

    --shadow:0 10px 30px rgba(0,0,0,.35);

}

/*==============================
Reset
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#101010;

    color:#fff;

    font-size:15px;

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:.3s;

}

ul{

    list-style:none;

    margin:0;
    padding:0;

}

button{

    outline:none;

    border:none;

}

.section{

    padding:80px 0;

}

.section-sm{

    padding:60px 0;

}

.bg-dark2{

    background:#161616;

}

.bg-dark3{
    background:#1d1d1d;
}
.bg-dark3{
    background: #242424;
}

.text-primary{

    color:var(--primary)!important;

}

.text-light{

    color:#ddd!important;

}

/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

}

::-webkit-scrollbar-track{

    background:#111;

}

/*==============================
Headings
==============================*/

h1,h2,h3,h4,h5,h6{

    color:#fff;

    font-weight:700;

}

.section-title{

    margin-bottom:50px;

}

.section-title span{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    display:block;

    margin-bottom:10px;

}

.section-title h2{

    font-size:40px;

    margin-bottom:15px;

}

.section-title p{

    color:#bfbfbf;

    max-width:700px;

}

/*==============================
Buttons
==============================*/

.btn-theme{

    background:var(--primary);

    color:#111;

    padding:13px 35px;

    font-weight:700;

    border-radius:40px;

    transition:.3s;

}

.btn-theme:hover{

    background:#fff;

    color:#111;

}

.btn-outline-theme{

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:40px;

    padding:12px 30px;

}

.btn-outline-theme:hover{

    background:var(--primary);

    color:#111;

}

/*==============================
Cards
==============================*/

.card-box{

    background:#181818;

    border:1px solid #292929;

    border-radius:15px;

    overflow:hidden;

    transition:.3s;

    height:100%;

}

.card-box:hover{

    transform:translateY(-7px);

    border-color:var(--primary);

}

.card-body{

    padding:25px;

}

/*==============================
Common Icon Box
==============================*/

.icon-box{

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(253,186,18,.08);

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:20px;

}

/*==============================
Section Backgrounds
==============================*/

.section-gradient{

background:linear-gradient(180deg,#111,#1b1b1b);

}

.section-pattern{

position:relative;

overflow:hidden;

}

.section-pattern:before{

content:"";

position:absolute;

width:500px;

height:500px;

background:rgba(253,186,18,.04);

border-radius:50%;

top:-200px;

right:-200px;

}

/*==============================
Image Hover
==============================*/

.img-hover{

overflow:hidden;

border-radius:12px;

}

.img-hover img{

transition:.5s;

}

.img-hover:hover img{

transform:scale(1.08);

}

/*==============================
Feature Box
==============================*/

.feature-box{

background:#181818;

border-radius:15px;

padding:30px;

border:1px solid #2b2b2b;

transition:.3s;

height:100%;

}

.feature-box:hover{

border-color:var(--primary);

transform:translateY(-8px);

}

.feature-box h5{

margin-top:20px;

}

.feature-box p{

color:#bdbdbd;

margin-top:15px;

}

/*==============================
Sports Cards
==============================*/

.sports-card{

background:#181818;

border-radius:12px;

overflow:hidden;

position:relative;

transition:.3s;

}

.sports-card img{

height:230px;

object-fit:cover;

width:100%;

}

.sports-card .overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:20px;

background:linear-gradient(to top,#000,transparent);

}

.sports-card:hover{

transform:translateY(-8px);

}

/*==============================
Casino Cards
==============================*/

.casino-card{

background:#1a1a1a;

border-radius:12px;

overflow:hidden;

transition:.3s;

}

.casino-card img{

height:180px;

object-fit:cover;

width:100%;

}

.casino-card:hover{

transform:scale(1.03);

}

/*==============================
Statistics
==============================*/

.counter-box{

text-align:center;

padding:40px;

background:#181818;

border-radius:15px;

border:1px solid #2d2d2d;

}

.counter-box h2{

font-size:45px;

color:var(--primary);

}

.counter-box p{

margin:0;

}

/*==============================
Testimonials
==============================*/

.testimonial{

background:#181818;

padding:35px;

border-radius:15px;

border:1px solid #2f2f2f;

height:100%;

}

.testimonial img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

margin-bottom:20px;

}

.stars{

color:#ffc107;

margin-bottom:15px;

}

/*==============================
FAQ
==============================*/

.accordion-item{

background:#181818;

border:1px solid #2f2f2f;

margin-bottom:15px;

border-radius:10px!important;

overflow:hidden;

}

.accordion-button{

background:#181818;

color:#fff;

font-weight:600;

}

.accordion-button:not(.collapsed){

background:var(--primary);

color:#111;

box-shadow:none;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

background:#111;

color:#ccc;

}

/*==============================
Forms
==============================*/

.form-control{

background:#181818;

border:1px solid #333;

color:#fff;

height:55px;

}

.form-control:focus{

background:#181818;

border-color:var(--primary);

box-shadow:none;

color:#fff;

}

textarea.form-control{

height:180px;

}

/*==============================
Badges
==============================*/

.badge-theme{

background:var(--primary);

color:#111;

padding:8px 16px;

border-radius:30px;

font-weight:600;

}

/*==============================
Play Button
==============================*/

.play-btn{

width:70px;

height:70px;

border-radius:50%;

background:var(--primary);

display:flex;

justify-content:center;

align-items:center;

color:#111;

font-size:28px;

}

/*==============================
Divider
==============================*/

.divider{

width:80px;

height:4px;

background:var(--primary);

margin:20px 0;

}

/*==============================
Utilities
==============================*/

.shadow-theme{

box-shadow:var(--shadow);

}

.rounded-theme{

border-radius:15px;

}

.border-theme{

border:1px solid #2b2b2b;

}

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

.py-100{

padding:100px 0;

}

/*==============================
Back To Top
==============================*/

.back-top{

position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

background:var(--primary);

color:#111;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

z-index:999;

display:none;

cursor:pointer;

}

/*==============================
Animations
==============================*/

.transition{

transition:.35s ease;

}

.hover-up:hover{

transform:translateY(-7px);

}

.zoom:hover{

transform:scale(1.04);

}


/*=====================================================
HEADER
======================================================*/

.top-bar{
    background:#0b0b0b;
    border-bottom:1px solid #262626;
    font-size:13px;
    color:#cfcfcf;
}

.top-bar a{
    color:#cfcfcf;
}

.top-bar a:hover{
    color:var(--primary);
}

.top-bar .top-item{
    display:flex;
    align-items:center;
    gap:8px;
}

.top-bar i{
    color:var(--primary);
}

/*=====================================================
NAVBAR
======================================================*/

.navbar{
    background:#111;
    padding:14px 0;
    transition:.35s;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.navbar.fixed-top{
    animation:slideDown .4s;
}

.navbar.scrolled{
    background:#0d0d0d;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
}

@keyframes slideDown{

from{
    transform:translateY(-100%);
}

to{
    transform:translateY(0);
}

}

.navbar-brand img{
    height:48px;
}

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

.navbar-nav .nav-item{
    margin:0 4px;
}

.navbar-nav .nav-link{

    color:#fff;
    font-size:15px;
    font-weight:500;
    padding:12px 18px;
    position:relative;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-nav .nav-link.active{

    color:var(--primary);

}

.navbar-nav .nav-link::after{

content:"";
position:absolute;
left:18px;
bottom:8px;
width:0;
height:2px;
background:var(--primary);
transition:.3s;

}

.navbar-nav .nav-link:hover::after{

width:calc(100% - 36px);

}

.nav-right{

display:flex;
align-items:center;
gap:12px;

}

/*=====================================================
HEADER BUTTONS
======================================================*/

.btn-login{

padding:10px 22px;

border:2px solid #2d2d2d;

border-radius:40px;

color:#fff;

font-weight:600;

transition:.3s;

}

.btn-login:hover{

background:#fff;

color:#111;

}

.btn-register{

background:var(--primary);

color:#111;

padding:11px 26px;

border-radius:40px;

font-weight:700;

transition:.3s;

}

.btn-register:hover{

background:#fff;

transform:translateY(-2px);

}

/*=====================================================
WHATSAPP BUTTON
======================================================*/

.btn-whatsapp{

background:#25D366;

color:#fff;

padding:11px 22px;

border-radius:40px;

font-weight:600;

display:flex;

align-items:center;

gap:8px;

}

.btn-whatsapp:hover{

background:#20bc5a;

color:#fff;

}

/*=====================================================
DROPDOWN
======================================================*/

.dropdown-menu{

background:#181818;

border:1px solid #2d2d2d;

border-radius:12px;

padding:10px;

margin-top:18px;

}

.dropdown-item{

color:#ddd;

padding:12px 18px;

border-radius:8px;

}

.dropdown-item:hover{

background:var(--primary);

color:#111;

}

/*=====================================================
MEGA MENU
======================================================*/

.mega-menu{

width:850px;

padding:30px;

}

.mega-title{

font-size:16px;

font-weight:700;

margin-bottom:15px;

color:#fff;

}

.mega-menu a{

display:block;

padding:8px 0;

color:#cfcfcf;

}

.mega-menu a:hover{

color:var(--primary);

padding-left:8px;

}

/*=====================================================
SEARCH
======================================================*/

.nav-search{

position:relative;

}

.nav-search input{

width:240px;

height:45px;

background:#181818;

border:1px solid #303030;

border-radius:40px;

padding-left:45px;

padding-right:20px;

color:#fff;

}

.nav-search input:focus{

outline:none;

border-color:var(--primary);

}

.nav-search i{

position:absolute;

left:18px;

top:14px;

color:#888;

}

/*=====================================================
NOTIFICATION BADGE
======================================================*/

.menu-badge{

position:absolute;

top:2px;

right:4px;

background:#ff4444;

width:18px;

height:18px;

border-radius:50%;

font-size:10px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

}

/*=====================================================
OFFCANVAS
======================================================*/

.offcanvas{

background:#111;

color:#fff;

}

.offcanvas-header{

border-bottom:1px solid #2d2d2d;

}

.offcanvas-body{

padding:25px;

}

.offcanvas-body .nav-link{

padding:15px 0;

font-size:16px;

font-weight:500;

border-bottom:1px solid #222;

color:#fff;

}

.offcanvas-body .nav-link:hover{

color:var(--primary);

}

/*=====================================================
HAMBURGER
======================================================*/

.navbar-toggler{

border:none;

padding:0;

}

.navbar-toggler:focus{

box-shadow:none;

}

.hamburger{

width:30px;

height:22px;

display:flex;

flex-direction:column;

justify-content:space-between;

}

.hamburger span{

height:3px;

background:#fff;

border-radius:10px;

transition:.3s;

}

.navbar-toggler:hover .hamburger span{

background:var(--primary);

}

/*=====================================================
HEADER INFO
======================================================*/

.header-info{

display:flex;

align-items:center;

gap:25px;

}

.info-item{

display:flex;

align-items:center;

gap:12px;

}

.info-item i{

width:42px;

height:42px;

background:#1b1b1b;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:var(--primary);

font-size:18px;

}

.info-item h6{

margin:0;

font-size:14px;

}

.info-item span{

font-size:13px;

color:#aaa;

}

/*=====================================================
STICKY EFFECT
======================================================*/

.sticky-shadow{

box-shadow:0 15px 40px rgba(0,0,0,.45);

}

/*=====================================================
HEADER SPACING
======================================================*/

/*=====================================================
HERO SECTION
======================================================*/

.hero{
    position:relative;
    overflow:hidden;
    background:#0d0d0d;
    padding:100px 0;
}

.hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border-radius:50%;
    background:rgba(253,186,18,.05);
    right:-250px;
    top:-250px;
    filter:blur(10px);
}

.hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(253,186,18,.03);
    left:-200px;
    bottom:-200px;
}

.hero-content{
    position:relative;
    z-index:10;
}

.hero-subtitle{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:rgba(253,186,18,.12);

    color:var(--primary);

    padding:10px 20px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-subtitle i{

font-size:18px;

}

.hero h1{

font-size:60px;

font-weight:800;

line-height:1.15;

margin-bottom:25px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

font-size:17px;

color:#c9c9c9;

max-width:600px;

margin-bottom:35px;

}

.hero-btns{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:30px;

}

.hero-image{

position:relative;

z-index:2;

}

.hero-image img{

border-radius:20px;

box-shadow:0 25px 60px rgba(0,0,0,.45);

}

/*=====================================================
FLOATING CARDS
======================================================*/

.hero-card{

position:absolute;

background:#181818;

padding:15px 20px;

border-radius:14px;

box-shadow:0 15px 40px rgba(0,0,0,.45);

border:1px solid #2b2b2b;

display:flex;

align-items:center;

gap:15px;

z-index:20;

}

.hero-card i{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(253,186,18,.12);

color:var(--primary);

border-radius:50%;

font-size:22px;

}

.hero-card h5{

margin:0;

font-size:18px;

}

.hero-card p{

margin:0;

font-size:13px;

color:#bbb;

}

.hero-card.card-one{

left:-40px;

top:60px;

}

.hero-card.card-two{

right:-40px;

bottom:60px;

}

/*=====================================================
LIVE USERS
======================================================*/

.live-users{

display:inline-flex;

align-items:center;

gap:12px;

margin-top:40px;

}

.live-users img{

width:42px;

height:42px;

border-radius:50%;

border:3px solid #111;

margin-left:-12px;

}

.live-users img:first-child{

margin-left:0;

}

.live-users span{

color:#bbb;

font-size:15px;

}

.live-users strong{

color:var(--primary);

}

/*=====================================================
FEATURE STRIP
======================================================*/

.hero-features{

margin-top:45px;

display:flex;

flex-wrap:wrap;

gap:18px;

}

.hero-feature{

display:flex;

align-items:center;

gap:12px;

background:#181818;

border:1px solid #2c2c2c;

padding:12px 18px;

border-radius:50px;

transition:.3s;

}

.hero-feature:hover{

border-color:var(--primary);

transform:translateY(-4px);

}

.hero-feature i{

color:var(--primary);

font-size:20px;

}

.hero-feature span{

font-weight:600;

}

/*=====================================================
HERO BADGES
======================================================*/

.hero-badge{

position:absolute;

padding:12px 20px;

background:#181818;

border:1px solid #2c2c2c;

border-radius:50px;

font-weight:600;

box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.badge-top{

top:40px;

right:120px;

}

.badge-bottom{

bottom:40px;

left:100px;

}

.hero-badge i{

color:var(--primary);

margin-right:8px;

}

/*=====================================================
HERO SHAPES
======================================================*/

.hero-shape{

position:absolute;

border-radius:50%;

animation:float 6s infinite ease-in-out;

}

.shape1{

width:18px;

height:18px;

background:var(--primary);

left:12%;

top:20%;

}

.shape2{

width:12px;

height:12px;

background:#fff;

right:18%;

top:28%;

animation-delay:2s;

}

.shape3{

width:22px;

height:22px;

background:var(--primary);

left:42%;

bottom:18%;

animation-delay:4s;

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0px);
}

}

/*=====================================================
PLAY BUTTON
======================================================*/

.hero-play{

display:flex;

align-items:center;

gap:15px;

margin-top:35px;

}

.hero-play .play-btn{

flex-shrink:0;

}

.hero-play h6{

margin:0;

}

.hero-play span{

font-size:14px;

color:#bbb;

}

/*=====================================================
TRUST BAR
======================================================*/

.trust-bar{

margin-top:60px;

display:flex;

flex-wrap:wrap;

align-items:center;

gap:35px;

}

.trust-item{

display:flex;

align-items:center;

gap:12px;

}

.trust-item i{

font-size:28px;

color:var(--primary);

}

.trust-item h6{

margin:0;

font-size:15px;

}

.trust-item small{

display:block;

color:#999;

}

/*=====================================================
SLIDER
======================================================*/

.hero-slider{

position:relative;

}

.hero-slider .carousel-item{

padding:40px 0;

}

.hero-slider .carousel-indicators{

bottom:-55px;

}

.hero-slider .carousel-indicators button{

width:14px;

height:14px;

border-radius:50%;

background:var(--primary);

}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{

width:55px;
height:55px;
background:#181818;
border-radius:50%;
top:50%;
transform:translateY(-50%);
opacity:1;

}

.hero-slider .carousel-control-prev:hover,
.hero-slider .carousel-control-next:hover{

background:var(--primary);

}

.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon{

filter:invert(1);

}

/*=====================================================
HERO RESPONSIVE PLACEHOLDERS
======================================================*/

@media(max-width:1200px){

.hero h1{

font-size:52px;

}

.hero-card{

display:none;

}

}

@media(max-width:992px){

.hero{

padding:80px 0;

text-align:center;

}

.hero h1{

font-size:42px;

}

.hero p{

margin:auto auto 30px;

}

.hero-btns{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.trust-bar{

justify-content:center;

}

.hero-image{

margin-top:60px;

}

}

@media(max-width:576px){

.hero{

padding:70px 0;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:15px;

}

.hero-btns{

flex-direction:column;

}

.hero-btns .btn-theme,
.hero-btns .btn-outline-theme,
.hero-btns .btn-whatsapp{

width:100%;

text-align:center;

justify-content:center;

}

.hero-feature{

width:100%;

justify-content:center;

}

.trust-item{

width:100%;

justify-content:center;

}

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{

display:none;

}

}


/*=====================================================
POPULAR SPORTS
======================================================*/

.popular-sports{
    background:#141414;
    position:relative;
}

.sport-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#1b1b1b;
    transition:.35s;
    border:1px solid #2a2a2a;
    height:100%;
}

.sport-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.5s;
}

.sport-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.15));
    z-index:1;
}

.sport-card-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:25px;
}

.sport-card h4{
    font-size:22px;
    margin-bottom:10px;
}

.sport-card p{
    color:#ccc;
    font-size:14px;
    margin-bottom:15px;
}

.sport-card:hover{
    transform:translateY(-8px);
    border-color:var(--primary);
}

.sport-card:hover img{
    transform:scale(1.08);
}

.sport-icon{
    width:65px;
    height:65px;
    background:rgba(253,186,18,.15);
    color:var(--primary);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin-bottom:20px;
}

/*=====================================================
SPORT CATEGORY
======================================================*/

.sport-category{

    background:#181818;

    border:1px solid #2b2b2b;

    border-radius:16px;

    text-align:center;

    padding:30px 15px;

    transition:.3s;

    height:100%;

}

.sport-category i{

font-size:42px;

color:var(--primary);

margin-bottom:18px;

}

.sport-category h5{

font-size:18px;

}

.sport-category:hover{

background:#202020;

transform:translateY(-7px);

border-color:var(--primary);

}

/*=====================================================
LIVE CASINO
======================================================*/

.live-casino{

background:#111;

}

.casino-box{

position:relative;

border-radius:18px;

overflow:hidden;

background:#1b1b1b;

border:1px solid #2a2a2a;

transition:.35s;

height:100%;

}

.casino-box img{

height:240px;

width:100%;

object-fit:cover;

transition:.5s;

}

.casino-content{

padding:22px;

}

.casino-content h5{

margin-bottom:10px;

}

.casino-content p{

color:#bbb;

font-size:14px;

margin-bottom:20px;

}

.casino-tag{

display:inline-block;

padding:6px 14px;

border-radius:40px;

background:rgba(253,186,18,.15);

color:var(--primary);

font-size:13px;

margin-bottom:15px;

}

.casino-box:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.casino-box:hover img{

transform:scale(1.08);

}

/*=====================================================
GAME PROVIDERS
======================================================*/

.provider-box{

background:#181818;

border:1px solid #2b2b2b;

border-radius:14px;

padding:25px;

text-align:center;

transition:.35s;

height:100%;

}

.provider-box img{

height:65px;

margin:auto;

margin-bottom:20px;

}

.provider-box h6{

margin:0;

}

.provider-box:hover{

border-color:var(--primary);

transform:translateY(-6px);

background:#1f1f1f;

}

/*=====================================================
PROCESS
======================================================*/

.process{

position:relative;

}

.process-item{

position:relative;

padding:40px 25px;

text-align:center;

background:#181818;

border-radius:18px;

border:1px solid #2b2b2b;

height:100%;

transition:.35s;

}

.process-item:hover{

transform:translateY(-7px);

border-color:var(--primary);

}

.process-number{

width:70px;

height:70px;

border-radius:50%;

background:var(--primary);

color:#111;

display:flex;

align-items:center;

justify-content:center;

font-size:26px;

font-weight:700;

margin:auto;

margin-bottom:25px;

}

.process-icon{

font-size:38px;

color:var(--primary);

margin-bottom:20px;

}

.process-item h5{

margin-bottom:15px;

}

.process-item p{

color:#bdbdbd;

font-size:14px;

}

/*=====================================================
PROCESS LINE
======================================================*/

.process-row{

position:relative;

}

.process-row::before{

content:"";

position:absolute;

top:35px;

left:8%;

right:8%;

height:3px;

background:#303030;

z-index:-1;

}

/*=====================================================
FEATURES GRID
======================================================*/

.feature-grid{

background:#141414;

}

.feature-card{

background:#181818;

border:1px solid #2d2d2d;

border-radius:18px;

padding:35px;

transition:.35s;

height:100%;

}

.feature-card:hover{

border-color:var(--primary);

transform:translateY(-7px);

}

.feature-card-icon{

width:70px;

height:70px;

background:rgba(253,186,18,.12);

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

margin-bottom:20px;

}

.feature-card-icon i{

font-size:30px;

color:var(--primary);

}

.feature-card h5{

margin-bottom:15px;

}

.feature-card p{

color:#bdbdbd;

font-size:15px;

}

/*=====================================================
CHECK LIST
======================================================*/

.check-list{

margin-top:25px;

}

.check-list li{

display:flex;

align-items:center;

margin-bottom:14px;

color:#ccc;

}

.check-list i{

color:#00d26a;

margin-right:12px;

font-size:18px;

}


/*=====================================================
DEPOSIT & WITHDRAW
======================================================*/

.payment-section{
    background:#101010;
}

.payment-card{
    background:#181818;
    border:1px solid #2d2d2d;
    border-radius:18px;
    padding:35px;
    height:100%;
    transition:.35s;
}

.payment-card:hover{
    border-color:var(--primary);
    transform:translateY(-8px);
}

.payment-title{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.payment-title i{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(253,186,18,.12);
    color:var(--primary);
    font-size:26px;
}

.payment-list li{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #2a2a2a;

}

.payment-list li:last-child{

border:none;

}

.payment-list i{

color:#00d26a;

margin-right:10px;

}

/*=====================================================
PAYMENT METHODS
======================================================*/

.payment-method{

display:flex;

align-items:center;

justify-content:center;

padding:18px;

background:#202020;

border-radius:12px;

border:1px solid #2f2f2f;

height:90px;

transition:.3s;

}

.payment-method img{

max-height:45px;

}

.payment-method:hover{

border-color:var(--primary);

background:#262626;

}

/*=====================================================
COUNTER
======================================================*/

.counter-section{

background:#141414;

}

.counter-item{

text-align:center;

padding:40px 20px;

background:#181818;

border-radius:18px;

border:1px solid #2a2a2a;

transition:.3s;

}

.counter-item:hover{

border-color:var(--primary);

transform:translateY(-6px);

}

.counter-item h2{

font-size:48px;

font-weight:800;

color:var(--primary);

margin-bottom:10px;

}

.counter-item p{

color:#c5c5c5;

margin:0;

}

/*=====================================================
APP DOWNLOAD
======================================================*/

.download-app{

background:linear-gradient(135deg,#1a1a1a,#111);

border-radius:20px;

padding:60px;

overflow:hidden;

position:relative;

}

.download-app::before{

content:"";

position:absolute;

right:-100px;

top:-100px;

width:320px;

height:320px;

border-radius:50%;

background:rgba(253,186,18,.06);

}

.store-btn{

display:inline-flex;

align-items:center;

gap:15px;

padding:15px 28px;

background:#181818;

border:1px solid #303030;

border-radius:12px;

color:#fff;

margin-right:15px;

margin-top:20px;

transition:.3s;

}

.store-btn:hover{

background:var(--primary);

color:#111;

}

.store-btn i{

font-size:32px;

}

/*=====================================================
TESTIMONIALS
======================================================*/

.testimonial-card{

background:#181818;

border-radius:18px;

padding:35px;

border:1px solid #2c2c2c;

height:100%;

transition:.3s;

}

.testimonial-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.testimonial-card .quote{

font-size:55px;

color:rgba(253,186,18,.18);

line-height:1;

margin-bottom:15px;

}

.testimonial-user{

display:flex;

align-items:center;

margin-top:25px;

}

.testimonial-user img{

width:65px;

height:65px;

border-radius:50%;

object-fit:cover;

margin-right:15px;

}

.testimonial-user h6{

margin-bottom:4px;

}

.testimonial-user span{

color:#999;

font-size:14px;

}

/*=====================================================
CTA
======================================================*/

.cta{

position:relative;

overflow:hidden;

padding:90px 0;

background:linear-gradient(135deg,#FDBA12,#f8a500);

color:#111;

}

.cta::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(255,255,255,.08);

right:-180px;

top:-180px;

}

.cta h2{

font-size:52px;

font-weight:800;

color:#111;

}

.cta p{

font-size:18px;

margin:25px 0;

max-width:650px;

}

.cta .btn{

margin-right:15px;

}

/*=====================================================
BLOG
======================================================*/

.blog-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#181818;
    border:1px solid #2d2d2d;
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
    color:#fff;
    text-decoration:none;
}

.blog-card:hover{
    transform:translateY(-8px);
    border-color:#FDBA12;
    color:#fff;
}

.blog-img img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.blog-placeholder{
    height:220px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:60px;
    background:#222;
}

.blog-body{
    padding:24px;
}

.blog-tag{
    display:inline-block;
    background:#FDBA12;
    color:#111;
    padding:6px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    margin-bottom:15px;
}

.blog-body h3{
    font-size:20px;
    margin-bottom:15px;
    line-height:1.4;
}

.blog-body p{
    color:#bbb;
    margin-bottom:20px;
}

.blog-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    color:#999;
    border-top:1px solid #2d2d2d;
    padding-top:15px;
    margin-top:auto;
}

@media(max-width:767px){

.blog-img img,
.blog-placeholder{
    height:180px;
}

}

.latest-news .blog-card{
    height:100%;
    display:flex;
    flex-direction:column;
}

.latest-news .blog-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.latest-news .blog-content{
    display:flex;
    flex-direction:column;
    flex:1;
}

.latest-news .blog-content p{
    flex:1;
}

/*=====================================================
FAQ
======================================================*/

.faq-section{

background:#141414;

}

.accordion-button{

font-size:17px;

font-weight:600;

}

.accordion-button::after{

filter:invert(1);

}

.accordion-button:not(.collapsed)::after{

filter:invert(0);

}

/*=====================================================
FOOTER
======================================================*/

.footer{

background:#0b0b0b;

padding-top:80px;

border-top:1px solid #242424;

}

.footer-logo{

height:55px;

margin-bottom:25px;

}

.footer p{

color:#b8b8b8;

}

.footer-title{

font-size:20px;

margin-bottom:30px;

position:relative;

}

.footer-title::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

width:45px;

height:3px;

background:var(--primary);

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#cfcfcf;

transition:.3s;

}

.footer-links a:hover{

padding-left:8px;

color:var(--primary);

}


.footer-contact li{

display:flex;

align-items:flex-start;

margin-bottom:20px;

}
.footer-social a{
    background: wheat;
    border-radius: 100px;
    padding: 8px;
    color: black;
    margin: 2px;
}
.footer-contact i{

width:42px;

height:42px;

border-radius:50%;

background:#181818;

display:flex;

align-items:center;

justify-content:center;

color:var(--primary);

margin-right:15px;

}

.social-icons{

display:flex;

gap:12px;

margin-top:25px;

}

.social-icons a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#181818;

border-radius:50%;

color:#fff;

transition:.3s;

}

.social-icons a:hover{

background:var(--primary);

color:#111;

}

.footer-bottom{

margin-top:60px;

padding:20px 0;

border-top:1px solid #232323;

font-size:14px;

color:#999;

}

/*=====================================================
FLOATING BUTTONS
======================================================*/

.float-whatsapp,
.float-telegram,
.float-call{

position:fixed;

right:20px;

width:58px;

height:58px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#fff;

z-index:999;

box-shadow:0 10px 25px rgba(0,0,0,.35);

transition:.3s;

}

.float-whatsapp{

bottom:160px;

background:#25D366;

}

.float-telegram{

bottom:90px;

background:#229ED9;

}

.float-call{

bottom:20px;

background:var(--primary);

color:#111;

}

.float-whatsapp:hover,
.float-telegram:hover,
.float-call:hover{

transform:scale(1.1);

}

/*=====================================================
BOTTOM MOBILE NAVIGATION
======================================================*/

.mobile-bottom{

position:fixed;

left:0;

right:0;

bottom:0;

height:70px;

background:#111;

border-top:1px solid #2d2d2d;

display:none;

z-index:999;

}

.mobile-bottom ul{

display:flex;

height:100%;

margin:0;

padding:0;

}

.mobile-bottom li{

flex:1;

}

.mobile-bottom a{

display:flex;

height:100%;

flex-direction:column;

align-items:center;

justify-content:center;

color:#bbb;

font-size:12px;

}

.mobile-bottom i{

font-size:22px;

margin-bottom:5px;

}

.mobile-bottom a.active{

color:var(--primary);

}

/*=====================================================
ANIMATIONS
======================================================*/

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

.fade-up{
    animation:fadeUp .8s ease both;
}

.fade-left{
    animation:fadeLeft .8s ease both;
}

.fade-right{
    animation:fadeRight .8s ease both;
}

.zoom-in{
    animation:zoomIn .8s ease both;
}

/*=====================================================
IMAGE OVERLAY
======================================================*/

.image-overlay{
    position:relative;
    overflow:hidden;
    border-radius:18px;
}

.image-overlay::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    transition:.3s;
}

.image-overlay:hover::before{
    background:rgba(0,0,0,.2);
}

/*=====================================================
SECTION SPACING
======================================================*/

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

.pb-120{
    padding-bottom:120px;
}

.py-120{
    padding:120px 0;
}

/*=====================================================
BACKGROUND HELPERS
======================================================*/

.bg-primary-soft{
    background:rgba(253,186,18,.08);
}

.bg-card{
    background:#181818;
}

.bg-black{
    background:#101010;
}

/*=====================================================
TEXT HELPERS
======================================================*/

.text-muted-light{
    color:#bdbdbd!important;
}

.text-gold{
    color:var(--primary)!important;
}

/*=====================================================
BORDER HELPERS
======================================================*/

.border-dark{
    border:1px solid #2a2a2a!important;
}

.border-gold{
    border:1px solid var(--primary)!important;
}

/*=====================================================
PAGINATION
======================================================*/

.pagination .page-link{

background:#181818;
border:1px solid #2a2a2a;
color:#fff;

}

.pagination .page-link:hover{

background:var(--primary);
color:#111;

}

.pagination .active .page-link{

background:var(--primary);
border-color:var(--primary);
color:#111;

}

/*=====================================================
MODAL
======================================================*/

.modal-content{

background:#181818;
border:1px solid #2d2d2d;
border-radius:16px;

}

.modal-header{

border-bottom:1px solid #2d2d2d;

}

.modal-footer{

border-top:1px solid #2d2d2d;

}

/*=====================================================
TABLE
======================================================*/

.table{

color:#ddd;

}

.table th{

background:#181818;

}

.table td{

background:#141414;

}

/*=====================================================
LOADER
======================================================*/

.page-loader{

position:fixed;

left:0;
top:0;
width:100%;
height:100%;

background:#111;

display:flex;

justify-content:center;
align-items:center;

z-index:999999;

}

.loader{

width:70px;
height:70px;

border-radius:50%;

border:6px solid #333;

border-top-color:var(--primary);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:1400px){

.section{
padding:90px 0;
}

.hero h1{
font-size:54px;
}

}

@media(max-width:1200px){

.section{
padding:80px 0;
}

.hero h1{
font-size:48px;
}

.section-title h2{
font-size:36px;
}

}

@media(max-width:992px){

.navbar-nav{
margin-top:20px;
}

.hero{
text-align:center;
}

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

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

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

.section-title p{
margin:auto;
}

.download-app{
padding:40px;
}

.cta{
text-align:center;
}

.footer{
text-align:center;
}

.footer-title::after{
left:50%;
transform:translateX(-50%);
}

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

}

@media(max-width:768px){

.section{
padding:70px 0;
}

.hero h1{
font-size:38px;
}

.section-title h2{
font-size:30px;
}

.counter-item{
margin-bottom:25px;
}

.payment-card{
margin-bottom:25px;
}

.download-app{
padding:30px;
}

.cta h2{
font-size:38px;
}

.mobile-bottom{
display:block;
}

.float-call{
bottom:90px;
}

.float-telegram{
bottom:160px;
}

.float-whatsapp{
bottom:230px;
}

}

@media(max-width:576px){

body{
font-size:14px;
}

.hero h1{
font-size:30px;
}

.hero p{
font-size:15px;
}

.section-title h2{
font-size:26px;
}

.btn-theme,
.btn-outline-theme,
.btn-register,
.btn-login,
.btn-whatsapp{

width:100%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:12px;

}

.hero-btns{
display:block;
}

.store-btn{
width:100%;
justify-content:center;
margin-right:0;
}

.footer{
padding-bottom:90px;
}

}

/*=====================================================
PRINT
======================================================*/

@media print{

.navbar,
.footer,
.mobile-bottom,
.float-call,
.float-whatsapp,
.float-telegram{

display:none!important;

}

body{

background:#fff;

color:#000;

}

}

/*=====================================================
END
======================================================*/



/*=====================================
GLOBAL LAYOUT FIX
======================================*/

html,
body{
    overflow-x:hidden;
}

section{
    position:relative;
    overflow:hidden;
}

.container{
    max-width:1320px;
}

.section{
    padding:90px 0;
}

.section-title{
    margin-bottom:60px;
    text-align:center;
}

.section-title h2{
    max-width:700px;
    margin:15px auto;
}

.section-title p{
    max-width:760px;
    margin:auto;
}

/*=====================================
ROWS
======================================*/

.row{
    --bs-gutter-x:24px;
    --bs-gutter-y:24px;
}

/*=====================================
CARD HEIGHT FIX
======================================*/

.sport-card,
.casino-card,
.feature-card,
.provider-card,
.payment-card,
.process-card,
.testimonial-card,
.blog-card{
    height:100%;
    display:flex;
    flex-direction:column;
}
.process-card{
    padding: 19px;
    text-align: center;
}

.sport-card-content,
.casino-content,
.blog-body{

    flex:1;

    display:flex;

    flex-direction:column;

}

.sport-card .btn-theme,
.casino-card .btn-theme{

    margin-top:auto;

}

/*=====================================
COMMON CARD
======================================*/

.sport-card,
.casino-card,
.feature-card,
.payment-card,
.provider-card,
.process-card,
.blog-card,
.testimonial-card{

    border-radius:18px;

    background:#181818;

    border:1px solid #292929;

    transition:.35s;

}

.sport-card:hover,
.casino-card:hover,
.feature-card:hover,
.payment-card:hover,
.provider-card:hover,
.process-card:hover,
.blog-card:hover,
.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:#FDBA12;

}

/*=====================================
IMAGE HEIGHT
======================================*/

.sport-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.casino-image img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.blog-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.provider-logo{

    height:70px;

    width:auto;

    margin:auto;

}

/*=====================================
SECTION GAP
======================================*/

.popular-sports,
.live-casino,
.features-section,
.process-section,
.payment-section,
.providers-section,
.testimonials-section,
.blog-section,
.faq-section,
.cta-section,
.footer{

    padding-top:90px;

    padding-bottom:90px;

}

/*=====================================
BUTTON FIX
======================================*/

.btn-theme,
.btn-outline-theme,
.btn-login,
.btn-register,
.btn-whatsapp{

    min-height:48px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50px;

    font-weight:600;

}

/*=====================================
COUNTER
======================================*/

.counter-item{

    background:#181818;

    border:1px solid #2d2d2d;

    border-radius:16px;

    padding:30px 15px;

    text-align:center;

    height:100%;

}

.counter-item h2{

    margin-bottom:8px;

}

.counter-item p{

    margin:0;

}

/*=====================================
CHECK ITEM
======================================*/

.check-item{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

}

.check-item i{

    color:#FDBA12;

}

/*=====================================
CONTENT ALIGNMENT
======================================*/

img{

    display:block;

}

h1,h2,h3,h4,h5{

    line-height:1.3;

}

p:last-child{

    margin-bottom:0;

}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width:991px){

.section{

padding:70px 0;

}

.section-title{

margin-bottom:40px;

}

.hero{

text-align:center;

padding:70px 0;

}

.hero p{

margin:auto;

}

.hero-btns{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.live-users{

justify-content:center;

}

.hero-image{

margin-top:50px;

}

.hero-card,
.hero-badge{

display:none;

}

}

@media (max-width:767px){

.section{

padding:60px 0;

}

.section-title h2{

font-size:30px;

}

.section-title p{

font-size:15px;

}

.row{

--bs-gutter-y:20px;

}

.sport-card img,
.casino-image img,
.blog-card img{

height:180px;

}

}