/*=====================================================
 SKYYEXCHANGE UI FRAMEWORK v1.0
 Author : ChatGPT
======================================================*/

/*=====================================================
 GOOGLE FONT
======================================================*/

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

/*=====================================================
 VARIABLES
======================================================*/

:root {
	--primary: #F6C105;
	--primary-dark: #D8A600;
	--secondary: #111111;

	--success: #15c56b;
	--danger: #ff4040;

	--dark: #080808;
	--dark-2: #111111;
	--dark-3: #1b1b1b;

	--white: #ffffff;
	--text: #d9d9d9;
	--muted: #9c9c9c;

	--border: #2f2f2f;

	--radius: 18px;

	--transition: .35s;

	--shadow: 0 20px 45px rgba(0, 0, 0, .35);

}

/*=====================================================
 RESET
======================================================*/

* {

	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

html {

	scroll-behavior: smooth;

}

body {

	background: var(--dark);

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

	color: var(--white);

	font-size: 16px;

	line-height: 1.7;

	overflow-x: hidden;

}

img {

	max-width: 100%;

	display: block;

}

a {

	text-decoration: none;

	transition: var(--transition);

}

ul {

	padding: 0;
	margin: 0;
	list-style: none;

}

button {

	border: none;
	outline: none;

}

/*=====================================================
 SCROLLBAR
======================================================*/

::-webkit-scrollbar {

	width: 8px;

}

::-webkit-scrollbar-thumb {

	background: var(--primary);
	border-radius: 20px;

}

::-webkit-scrollbar-track {

	background: #000;

}

/*=====================================================
 TYPOGRAPHY
======================================================*/

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

	font-weight: 700;
	margin-bottom: 15px;

}

h1 {

	font-size: 60px;
	line-height: 1.2;

}

h2 {

	font-size: 42px;

}

h3 {

	font-size: 30px;

}

h4 {

	font-size: 24px;

}

h5 {

	font-size: 20px;

}

h6 {

	font-size: 18px;

}

p {

	color: var(--text);
	margin-bottom: 15px;

}

/*=====================================================
 BOOTSTRAP IMPROVEMENTS
======================================================*/

.container {

	max-width: 1320px;

}

section {

	padding: 90px 0;

}

.row>* {

	position: relative;

}

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

.bg-dark {

	background: var(--dark) !important;

}

.bg-card {

	background: var(--dark-3);

}

.text-gold {

	color: var(--primary);

}

.text-muted {

	color: var(--muted) !important;

}

.rounded-xl {

	border-radius: 18px;

}

.shadow-lg {

	box-shadow: var(--shadow) !important;

}

.border-dark {

	border: 1px solid var(--border) !important;

}

/*=====================================================
 SECTION TITLE
======================================================*/

.section-title {

	margin-bottom: 60px;

	text-align: center;

}

.section-title span {

	display: inline-block;

	background: #1f1f1f;

	padding: 8px 18px;

	border-radius: 40px;

	font-size: 14px;

	color: var(--primary);

	margin-bottom: 15px;

}

.section-title h2 {

	font-weight: 800;

}

.section-title p {

	max-width: 720px;

	margin: auto;

}

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

.btn {

	border-radius: 50px;

	padding: 13px 30px;

	font-weight: 700;

	transition: .35s;

}

.btn-primary {

	background: linear-gradient(90deg, #FFD54F, #F6C105);

	border: none;

	color: #000;

}

.btn-primary:hover {

	transform: translateY(-4px);

	box-shadow: 0 15px 30px rgba(246, 193, 5, .35);

}

.btn-dark {

	background: #222;

	color: #fff;

}

.btn-dark:hover {

	background: #333;

}

.btn-success {

	background: #17c964;

	border: none;

}

.btn-success:hover {

	transform: translateY(-4px);

}

.btn-outline-light {

	border: 1px solid rgba(255, 255, 255, .2);

}

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

.card-ui {

	background: var(--dark-3);

	border: 1px solid var(--border);

	border-radius: 18px;

	padding: 30px;

	transition: .35s;

	height: 100%;

	overflow: hidden;

}

.card-ui:hover {

	transform: translateY(-8px);

	border-color: var(--primary);

}

.card-ui img {

	border-radius: 14px;

}

/*=====================================================
 ICON BOX
======================================================*/

.icon-box {

	width: 70px;

	height: 70px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	background: #202020;

	margin-bottom: 20px;

}

.icon-box i {

	font-size: 30px;

	color: var(--primary);

}

.rupee-icon{
    font-size: 15px !important;
    vertical-align:middle;
    margin-right:6px;
    position:relative;
    top:-2px;
}

/*=====================================================
 FORMS
======================================================*/

.form-control {

	height: 52px;

	background: #181818;

	border: 1px solid #2d2d2d;

	color: #fff;

	border-radius: 10px;

}

.form-control:focus {

	background: #181818;

	color: #fff;

	border-color: var(--primary);

	box-shadow: none;

}

textarea.form-control {

	height: 140px;

}

/*=====================================================
 TOP BAR
======================================================*/

.top-bar {

	background: #000;

	padding: 10px 0;

	font-size: 14px;

	border-bottom: 1px solid #222;

}

.top-bar a {

	color: #ccc;

	margin-right: 20px;

}

.top-bar a:hover {

	color: var(--primary);

}

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

.main-header {

	background: #0d0d0d;

	position: sticky;

	top: 0;

	z-index: 999;

	border-bottom: 1px solid #1d1d1d;

}

.header-wrapper {

	height: 86px;

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.logo img {

	height: 60px;

}

/*=====================================================
 DESKTOP MENU
======================================================*/

.desktop-menu ul {
	display: flex;
	gap: 10px;
}

.desktop-menu a {

	display: block;

	padding: 30px 16px;

	color: #fff;

	font-weight: 600;

	font-size: 15px;

	position: relative;

}

.desktop-menu a::after {

	content: '';

	position: absolute;

	left: 16px;

	bottom: 18px;

	width: 0;

	height: 2px;

	background: var(--primary);

	transition: .35s;

}

.desktop-menu a:hover {

	color: var(--primary);

}

.desktop-menu a:hover::after {

	width: calc(100% - 32px);

}

/*=====================================================
 Mobile Menu
======================================================*/
.desktop-menu .sports-menu{
    position:absolute;
    top:100%;
    left:0;

    min-width:260px;

    display:flex;
    flex-direction:column;
    gap:0;

    opacity:0;
    visibility:hidden;
    transform:translateY(15px);

    background:#171717;
    border:1px solid #2b2b2b;
    border-radius:18px;
    padding:12px 0;

    z-index:9999;
    transition:.3s;
}

.desktop-menu .dropdown:hover .sports-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.desktop-menu .sports-menu li{

    margin:0;
    padding:0;
    list-style:none;

}

.desktop-menu .sports-menu li a{

    display:block;

    padding:14px 22px;

    color:#fff;

    font-weight:600;

    line-height:1.3;

}

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

.header-buttons {

	display: flex;

	gap: 12px;

	align-items: center;

}

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

.hero {

	position: relative;

	overflow: hidden;

	background: #0b0b0b;

}

.hero-content {
	padding: 10px 0;
}

.hero h1 {

	font-size: 64px;

	font-weight: 900;

	line-height: 1.15;

	margin-bottom: 25px;

}

.hero h1 span {

	color: var(--primary);

}

.hero p {

	font-size: 18px;

	max-width: 600px;

}

.hero-buttons {

	display: flex;

	gap: 15px;

	margin-top: 35px;

	flex-wrap: wrap;

}

/*=====================================================
 FEATURE LIST
======================================================*/

.feature-list {

	display: flex;

	flex-wrap: wrap;

	gap: 15px;

	margin-top: 35px;

}

.feature-list li {

	background: #171717;

	padding: 12px 20px;

	border-radius: 40px;

	font-weight: 600;

	border: 1px solid #2b2b2b;

}

.feature-list i {

	color: var(--success);

	margin-right: 8px;

}

/*=====================================================
 LIVE TICKER
======================================================*/

.live-ticker {
    display:flex;
    align-items:center;
    overflow:hidden;
	background: #121212;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
}

.live-label {
	background: var(--danger);
	padding: 12px 22px;
	font-weight: 700;
	color: #fff;
}

.live-text {
	padding: 12px 20px;
	white-space: nowrap;
	overflow: hidden;
	flex:1;
}

/*=====================================================
 COMMON SPACING
======================================================*/

.py-100 {

	padding-top: 100px;
	padding-bottom: 100px;

}

.mt-40 {

	margin-top: 40px;

}

.mb-40 {

	margin-bottom: 40px;

}

/*=====================================================
 SPORTS SECTION
======================================================*/

.sports-section{
    background:#0d0d0d;
}

.sport-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background:#181818;
    border:1px solid var(--border);
    transition:var(--transition);
    cursor:pointer;
    height:100%;
}

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

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

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

.sport-card h4{
    color:#fff;
    margin-bottom:8px;
    font-weight:700;
}

.sport-card p{
    color:#ccc;
    margin-bottom:0;
}

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

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

/*=====================================================
 QUICK FEATURE BOX
======================================================*/

.quick-feature{
    background:#171717;
    border:1px solid var(--border);
    border-radius:18px;
    padding:28px;
    text-align:center;
    transition:.35s;
    height:100%;
}

.quick-feature:hover{
    transform:translateY(-8px);
    background:#1d1d1d;
}

.quick-feature i{
    font-size:42px;
    color:var(--primary);
    margin-bottom:18px;
}

.quick-feature h5{
    color:#fff;
    margin-bottom:10px;
}

.quick-feature p{
    margin:0;
}

/*=====================================================
 MATCH SECTION
======================================================*/

.match-card{
    background:#151515;
    border-radius:18px;
    border:1px solid #2b2b2b;
    padding:30px;
    transition:.35s;
    height:100%;
    position:relative;
}

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

.match-type{
    display:inline-block;
    background:var(--primary);
    color:#000;
    padding:6px 18px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:20px;
}

.match-team{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:30px 0;
}

.team{
    text-align:center;
    width:40%;
}

.team img{
    width:72px;
    height:72px;
    margin:auto;
    margin-bottom:12px;
}

.team h5{
    margin:0;
}

.vs{
    width:20%;
    text-align:center;
    color:var(--primary);
    font-size:24px;
    font-weight:800;
}

.match-info{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #2c2c2c;
}

.match-info div{
    text-align:center;
}

.match-info span{
    display:block;
    color:#888;
    font-size:13px;
}

.match-info strong{
    color:#fff;
}

.play-btn{
    width:100%;
    margin-top:25px;
}

/*=====================================================
 LIVE STATUS
======================================================*/

.live-badge{
    position:absolute;
    right:18px;
    top:18px;
    background:#ff2d2d;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:700;
}

.live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00ff59;
    display:inline-block;
    margin-right:6px;
    animation:pulse 1s infinite;
}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

100%{
transform:scale(2);
opacity:0;
}

}

/*=====================================================
 CRICKET SERIES
======================================================*/

.series-card{
    background:#181818;
    border-radius:18px;
    border:1px solid var(--border);
    overflow:hidden;
    transition:.35s;
    height:100%;
}

.series-card img{
    height:170px;
    width:100%;
    object-fit:cover;
}

.series-content{
    padding:24px;
}

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

.series-tag{
    display:inline-block;
    padding:6px 16px;
    border-radius:30px;
    background:#262626;
    color:var(--primary);
    font-size:13px;
    margin-bottom:15px;
}

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

.provider-card{
    background:#161616;
    border:1px solid #2c2c2c;
    border-radius:16px;
    padding:35px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.35s;
    height:140px;
}

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

.provider-card img{
    max-height:60px;
    width:auto;
}

/*=====================================================
 GAME CARD
======================================================*/

.game-card{
    background:#171717;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--border);
    transition:.35s;
    height:100%;
}

.game-image{
    overflow:hidden;
}

.game-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.5s;
}

.game-content{
    padding:22px;
}

.game-title{
    font-size:18px;
    font-weight:700;
    color:#fff;
}

.game-provider{
    color:#999;
    font-size:14px;
}

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

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

.game-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
}

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

.blog-card{
    background:#171717;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #2b2b2b;
    transition:.35s;
    height:100%;
}

.blog-card:hover{
    transform:translateY(-8px);
}

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

.blog-content{
    padding:28px;
}

.blog-category{
    display:inline-block;
    background:#202020;
    color:var(--primary);
    padding:6px 15px;
    border-radius:30px;
    font-size:13px;
    margin-bottom:18px;
}

.blog-card h4{
    color:#fff;
    line-height:1.4;
}

.read-more{
    color:var(--primary);
    font-weight:700;
}

.read-more:hover{
    color:#fff;
}

/*=====================================================
 COUNTERS
======================================================*/

.counter-box{
    background:#161616;
    border-radius:18px;
    border:1px solid #292929;
    padding:45px 25px;
    text-align:center;
    transition:.35s;
}

.counter-box:hover{
    transform:translateY(-8px);
}

.counter-box h2{
    color:var(--primary);
    font-size:52px;
    font-weight:800;
    margin-bottom:8px;
}

.counter-box p{
    margin:0;
}

/*=====================================================
 TESTIMONIAL
======================================================*/

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

.review-card:hover{
    transform:translateY(-8px);
}

.review-stars{
    color:#FFC107;
    margin-bottom:18px;
}

.review-user{
    display:flex;
    align-items:center;
    margin-top:25px;
}

.review-user img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    margin-right:15px;
}

.review-user h6{
    margin:0;
    color:#fff;
}

.review-user span{
    color:#999;
    font-size:14px;
}

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

.faq-section{
    background:#0d0d0d;
}

.accordion{
    --bs-accordion-bg:#171717;
    --bs-accordion-border-color:#2d2d2d;
    --bs-accordion-btn-bg:#171717;
    --bs-accordion-active-bg:#1d1d1d;
    --bs-accordion-btn-focus-box-shadow:none;
    --bs-accordion-color:#fff;
    --bs-accordion-active-color:#F6C105;
}

.accordion-item{
    border-radius:15px!important;
    overflow:hidden;
    margin-bottom:18px;
    border:1px solid #2d2d2d!important;
}

.accordion-button{
    color:#fff;
    font-weight:600;
    padding:22px 25px;
}

.accordion-button:not(.collapsed){
    color:#F6C105;
}

.accordion-body{
    color:#cfcfcf;
    line-height:1.8;
}

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

.cta-section{
    position:relative;
    padding:120px 0;
    background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url('../assets/banners/cta.jpg') center center;
    background-size:cover;
    text-align:center;
}

.cta-section h2{
    font-size:52px;
    font-weight:800;
    margin-bottom:20px;
}

.cta-section p{
    max-width:700px;
    margin:auto;
    margin-bottom:35px;
}

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

.footer{
    background:#050505;
    border-top:1px solid #202020;
    padding-top:80px;
}

.footer-logo img{
    height:65px;
    margin-bottom:25px;
}

.footer h5{
    color:#fff;
    margin-bottom:25px;
    position:relative;
}

.footer h5:after{
    content:'';
    width:40px;
    height:3px;
    background:#F6C105;
    position:absolute;
    left:0;
    bottom:-10px;
}

.footer p{
    color:#aaa;
}

.footer ul{
    list-style:none;
    padding:0;
}

.footer li{
    margin-bottom:12px;
}

.footer a{
    color:#bdbdbd;
    transition:.35s;
}

.footer a:hover{
    color:#F6C105;
    padding-left:6px;
}

.footer-contact li{
    display:flex;
    align-items:center;
}

.footer-contact i{
    width:32px;
    color:#F6C105;
}

.footer-social{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.footer-social a{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#171717;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
}

.footer-social a:hover{
    background:#F6C105;
    color:#000;
}

.footer-bottom{
    margin-top:60px;
    padding:22px 0;
    border-top:1px solid #202020;
    color:#999;
    text-align:center;
}

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

.floating-buttons{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:999;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.float-btn{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:22px;
    box-shadow:0 12px 30px rgba(0,0,0,.3);
    transition:.35s;
}

.float-btn:hover{
    transform:translateY(-5px);
}

.whatsapp-btn{
    background:#25D366;
}

.telegram-btn{
    background:#2AABEE;
}

.top-btn{
    background:#F6C105;
    color:#000;
}



.blog-content h4 a{
    color: #fff;
}


/*=====================================================
 MOBILE BOTTOM MENU
======================================================*/

.mobile-nav{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    background:#0d0d0d;
    border-top:1px solid #202020;
    display:none;
    z-index:999;
}

.mobile-nav ul{
    display:flex;
    justify-content:space-around;
    margin:0;
    padding:0;
}

.mobile-nav li{
    list-style:none;
    flex:1;
}

.mobile-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:12px 5px;
    color:#fff;
    font-size:13px;
}

.mobile-nav i{
    font-size:22px;
    margin-bottom:6px;
}

.mobile-nav .active{
    color:#F6C105;
}

/*=====================================================
 GLASS EFFECT
======================================================*/

.glass{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
}

/*=====================================================
 IMAGE HOVER
======================================================*/

.img-hover{
    overflow:hidden;
}

.img-hover img{
    transition:.6s;
}

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

/*=====================================================
 GRADIENT BACKGROUNDS
======================================================*/

.bg-gradient-gold{
    background:linear-gradient(135deg,#FFD54F,#F6C105);
    color:#000;
}

.bg-gradient-dark{
    background:linear-gradient(135deg,#0b0b0b,#1d1d1d);
}

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

@keyframes floatY{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

.float-animation{
    animation:floatY 4s ease-in-out infinite;
}

@keyframes shine{

100%{
left:125%;
}

}

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

.shine:before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );
    transform:skewX(-25deg);
}

.shine:hover:before{
    animation:shine .8s;
}

/*=====================================================
 UTILITIES
======================================================*/

.radius-10{border-radius:10px;}
.radius-15{border-radius:15px;}
.radius-20{border-radius:20px;}
.radius-30{border-radius:30px;}

.fs-14{font-size:14px;}
.fs-18{font-size:18px;}
.fs-22{font-size:22px;}
.fs-30{font-size:30px;}

.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.fw-800{font-weight:800;}

.py-120{
    padding-top:120px;
    padding-bottom:120px;
}

.mt-60{margin-top:60px;}
.mb-60{margin-bottom:60px;}

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

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

@media(max-width:1199px){

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

section{
    padding:80px 0;
}

}

@media(max-width:991px){

.desktop-menu,
.header-buttons{
    display:none;
}

.mobile-toggle{
    display:block;
}

.top-bar{
    display:none;
}

.hero{
    text-align:center;
}

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

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

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

.sport-card img{
    height:190px;
}

.mobile-nav{
    display:block;
}

.footer{
    padding-bottom:90px;
}

}

@media(max-width:767px){

section{
    padding:60px 0;
}

h1{
    font-size:34px!important;
}

h2{
    font-size:28px!important;
}

.cta-section h2{
    font-size:34px;
}

.counter-box h2{
    font-size:36px;
}

.logo img{
    height:46px;
}

.header-wrapper{
    height:72px;
}

}

@media(max-width:575px){

.btn{
    width:100%;
}

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

.floating-buttons{
    right:15px;
    bottom:90px;
}

.float-btn{
    width:52px;
    height:52px;
}

}