/*====================================================
    WOOLGOLD / BETTING LANDING PAGE
    STYLE.CSS
    PHASE 1
======================================================*/

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

:root {

	--primary: #dfca62;
	--primary-dark: #f5b400;
	--secondary: #111111;
	--bg: #080808;
	--card: #181818;
	--card-2: #202020;
	--border: #2c2c2c;

	--white: #ffffff;
	--text: #ececec;
	--muted: #bdbdbd;

	--success: #20c863;
	--danger: #ff4d4f;
	--info: #3498db;

	--radius-sm: 8px;
	--radius: 15px;
	--radius-lg: 25px;
	--radius-xl: 40px;

	--transition: .35s ease;

	--shadow-sm: 0 5px 15px rgba(0, 0, 0, .15);
	--shadow: 0 15px 40px rgba(0, 0, 0, .25);
	--shadow-lg: 0 25px 60px rgba(0, 0, 0, .35);

	--container: 1320px;

}


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

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

html {

	scroll-behavior: smooth;

}

body {

	background: var(--bg);
	color: var(--text);

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

	font-size: 16px;

	line-height: 1.7;

	overflow-x: hidden;

}

img {

	max-width: 100%;
	display: block;

}

a {

	text-decoration: none;
	transition: var(--transition);

}

ul {

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

}

button {

	border: none;
	outline: none;

}

input,
textarea,
select {

	outline: none;

}


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

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

	font-family: 'Poppins', sans-serif;
	color: #fff;
	font-weight: 700;
}

h1 {
	font-size: 55px;
	line-height: 1.1;
}

h2 {

	font-size: 48px;

}

h3 {

	font-size: 32px;

}

h4 {

	font-size: 23px;

}

h5 {

	font-size: 20px;

}

p {

	color: var(--muted);
	margin-bottom: 20px;

}


/*=========================
CONTAINER
=========================*/

.container {

	max-width: 1320px;

}


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

.py-50 {

	padding: 50px 0;

}

.py-80 {

	padding: 80px 0;

}

.py-100 {

	padding: 100px 0;

}

.py-120 {

	padding: 120px 0;

}

.mt-30 {

	margin-top: 30px;

}

.mb-30 {

	margin-bottom: 30px;

}


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

.section-title {

	text-align: center;
	margin-bottom: 70px;

}

.section-title span {

	display: inline-block;

	color: var(--primary);

	text-transform: uppercase;

	letter-spacing: 3px;

	font-size: 14px;

	margin-bottom: 15px;

	font-weight: 700;

}

.section-title h2 {

	margin-bottom: 20px;

}

.section-title p {

	width: 700px;

	max-width: 100%;

	margin: auto;

}


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

.btn-main {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding: 15px 38px;

	border-radius: 50px;

	background: var(--primary);

	color: #000;

	font-weight: 700;

	transition: .35s;

}

.btn-main:hover {

	background: #ffd247;

	color: #000;

	transform: translateY(-4px);

}

.btn-dark {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding: 15px 38px;

	border-radius: 50px;

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

	color: #fff;

}

.btn-dark:hover {

	border-color: var(--primary);

	color: var(--primary);

}


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

.card-dark {

	background: var(--card);

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

	border-radius: 22px;

	transition: .35s;

}

.card-dark:hover {

	transform: translateY(-8px);

	border-color: var(--primary);

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

}


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

.site-header {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	z-index: 999;

	transition: .35s;

}

.site-header.sticky {

	background: #0d0d0d;

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

}

.navbar {
    background: black;
	padding: 18px 0;
}

.navbar-brand img {

	height: 60px;

}

.navbar-nav {

	gap: 18px;

}

.navbar-nav .nav-link {

	color: #fff;

	font-weight: 600;

	padding: 12px 10px;

	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: 0;

	bottom: 0;

	width: 0;

	height: 2px;

	background: var(--primary);

	transition: .35s;

}

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

	width: 100%;

}


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

.dropdown-menu {

	background: #181818;

	border: 1px solid #2c2c2c;

	border-radius: 18px;

	padding: 15px;

	min-width: 250px;

}

.dropdown-item {

	color: #ddd;

	padding: 12px 18px;

	border-radius: 10px;

}

.dropdown-item:hover {

	background: #262626;

	color: var(--primary);

}


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

.hero {

	position: relative;

	padding-top: 170px;

	padding-bottom: 120px;

	overflow: hidden;

}

.hero-content h1 {

	margin-bottom: 25px;

}

.hero-content h1 span {

	color: var(--primary);

}

.hero-content p {

	font-size: 20px;

	margin-bottom: 35px;

}

.hero-buttons {

	display: flex;

	gap: 15px;

	flex-wrap: wrap;

}

.hero-image {
	position: relative;
}

.hero-image img {
    width: 492px;
    right: -126px;
    position: relative;
	animation: float 4s infinite ease-in-out;

}


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

.badge-primary {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	padding: 10px 18px;

	border-radius: 50px;

	background: rgba(255, 193, 7, .12);

	color: var(--primary);

	font-size: 14px;

	font-weight: 700;

}


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

.float-buttons {

	position: fixed;

	right: 25px;

	bottom: 25px;

	display: flex;

	flex-direction: column;

	gap: 15px;

	z-index: 99;

}

.float-buttons a {

	width: 58px;

	height: 58px;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 24px;

	color: #fff;

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

}

.whatsapp-btn {

	background: #25D366;

}

.telegram-btn {

	background: #2AABEE;

}

.top-btn {

	background: var(--primary);

	color: #000 !important;

}


/*=========================
ANIMATION
=========================*/

@keyframes float {

	0% {

		transform: translateY(0);

	}

	50% {

		transform: translateY(-12px);

	}

	100% {

		transform: translateY(0);

	}

}


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

@media(max-width:991px) {

	h1 {

		font-size: 48px;

	}

	h2 {

		font-size: 36px;

	}

	.hero {

		padding-top: 130px;

	}

	.section-title {

		margin-bottom: 50px;

	}

	.navbar-collapse {

		background: #121212;

		padding: 20px;

		margin-top: 15px;

		border-radius: 20px;

	}

	.hero-buttons {

		justify-content: center;

	}

}

@media(max-width:767px) {

	.py-100 {

		padding: 70px 0;

	}

	h1 {

		font-size: 40px;

	}

	h2 {

		font-size: 30px;

	}

	.float-buttons {

		right: 15px;

		bottom: 15px;

	}

	.float-buttons a {

		width: 52px;

		height: 52px;

		font-size: 20px;

	}

	.hero {

		text-align: center;

	}

	.hero-content p {

		font-size: 18px;

	}

}




/*====================================================
    STYLE.CSS
    PHASE 2
    FEATURES
    SPORTS
    LIVE MATCHES
    PROCESS
=====================================================*/


/*===================================
SECTION BACKGROUNDS
====================================*/

.bg-dark-section {
	background: #0d0d0d;
}

.bg-card {
	background: #181818;
}

.bg-gradient {
	background: linear-gradient(180deg, #0b0b0b 0%, #111 100%);
}


/*===================================
FEATURE SECTION
====================================*/

.feature-section {
	position: relative;
}

.feature-card {

	background: var(--card);

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

	border-radius: 22px;

	padding: 40px 30px;

	text-align: center;

	transition: .35s;

	height: 100%;

	overflow: hidden;

	position: relative;

}

.feature-card::before {

	content: "";

	position: absolute;

	top: 0;

	left: -100%;

	width: 100%;

	height: 100%;

	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);

	transition: .7s;

}

.feature-card:hover::before {

	left: 100%;

}

.feature-card:hover {

	border-color: var(--primary);

	transform: translateY(-10px);

}

.feature-card i {

	width: 80px;

	height: 80px;

	display: flex;

	align-items: center;

	justify-content: center;

	margin: auto;

	border-radius: 50%;

	background: rgba(255, 193, 7, .1);

	color: var(--primary);

	font-size: 34px;

	margin-bottom: 25px;

}

.feature-card h4 {

	margin-bottom: 15px;

}

.feature-card p {

	margin-bottom: 0;

}


/*===================================
STATISTICS
====================================*/

.stats-wrapper {

	margin-top: 60px;

}

.stat-card {

	background: #141414;

	border-radius: 20px;

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

	padding: 30px;

	text-align: center;

	transition: .35s;

}

.stat-card:hover {

	transform: translateY(-6px);

	border-color: var(--primary);

}

.stat-number {

	font-size: 46px;

	font-weight: 800;

	color: var(--primary);

	line-height: 1;

}

.stat-text {

	margin-top: 12px;

	color: #bdbdbd;

}


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

.sport-card {

	background: var(--card);

	border-radius: 20px;

	overflow: hidden;

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

	transition: .35s;

	height: 100%;

}

.sport-card:hover {

	border-color: var(--primary);

	transform: translateY(-8px);

}

.sport-image {

	position: relative;

	overflow: hidden;

}

.sport-image img {

	width: 100%;

	height: 220px;

	object-fit: cover;

	transition: .5s;

}

.sport-card:hover img {

	transform: scale(1.08);

}

.sport-content {

	padding: 25px;

	text-align: center;

}

.sport-content h4 {

	margin-bottom: 10px;

}

.sport-content p {

	margin-bottom: 18px;

}


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

.series-card {

	background: #191919;

	border: 1px solid #2b2b2b;

	border-radius: 20px;

	overflow: hidden;

	transition: .35s;

}

.series-card:hover {

	transform: translateY(-10px);

	border-color: var(--primary);

}

.series-image img {

	height: 210px;

	width: 100%;

	object-fit: cover;

}

.series-body {

	padding: 25px;

}

.series-tag {

	display: inline-block;

	padding: 6px 16px;

	background: rgba(255, 193, 7, .12);

	color: var(--primary);

	border-radius: 50px;

	font-size: 13px;

	margin-bottom: 15px;

}

.series-body h5 {

	margin-bottom: 12px;

}


/*===================================
LIVE MATCHES
====================================*/

.live-match {

	background: #181818;

	border-radius: 22px;

	border: 1px solid #292929;

	padding: 30px;

	transition: .35s;

	height: 100%;

}

.live-match:hover {

	border-color: var(--primary);

}

.live-top {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 20px;

}

.live-badge {

	background: #ff4d4f;

	color: #fff;

	padding: 6px 14px;

	border-radius: 50px;

	font-size: 12px;

	font-weight: 700;

}

.team-row {

	display: flex;

	align-items: center;

	justify-content: space-between;

	margin: 18px 0;

}

.team-row img {

	width: 55px;

}

.vs {

	color: var(--primary);

	font-weight: 700;

	font-size: 20px;

}

.odds-row {

	display: flex;

	gap: 12px;

	margin-top: 25px;

}

.odd-box {

	flex: 1;

	background: #0f0f0f;

	border: 1px solid #2d2d2d;

	border-radius: 12px;

	text-align: center;

	padding: 15px;

}

.odd-box span {

	display: block;

	color: #999;

	font-size: 13px;

}

.odd-box strong {

	color: #fff;

	font-size: 20px;

}


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

.process-area {

	position: relative;

}

.process-step {

	position: relative;

	text-align: center;

	padding: 20px;

}

.process-circle {

	width: 90px;

	height: 90px;

	background: rgba(255, 193, 7, .12);

	border-radius: 50%;

	margin: auto;

	display: flex;

	align-items: center;

	justify-content: center;

	color: var(--primary);

	font-size: 34px;

	margin-bottom: 25px;

	border: 2px solid rgba(255, 193, 7, .25);

}

.process-step h5 {

	margin-bottom: 12px;

}

.process-line {

	position: absolute;

	top: 45px;

	right: -50%;

	width: 100%;

	height: 2px;

	background: rgba(255, 193, 7, .25);

}


/*===================================
BENEFITS
====================================*/

.benefit-box {

	display: flex;

	gap: 20px;

	align-items: flex-start;

	margin-bottom: 35px;

}

.benefit-icon {

	width: 65px;

	height: 65px;

	border-radius: 16px;

	background: rgba(255, 193, 7, .12);

	display: flex;

	align-items: center;

	justify-content: center;

	color: var(--primary);

	font-size: 26px;

	flex-shrink: 0;

}

.benefit-content h5 {

	margin-bottom: 10px;

}


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

.check-list {

	margin-top: 30px;

}

.check-list li {

	display: flex;

	align-items: center;

	gap: 15px;

	margin-bottom: 18px;

	color: #ddd;

}

.check-list i {

	color: var(--success);

}


/*===================================
DOWNLOAD BOX
====================================*/

.download-box {

	background: linear-gradient(135deg, #1b1b1b, #101010);

	border-radius: 25px;

	padding: 45px;

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

}


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

@media(max-width:991px) {

	.process-line {

		display: none;

	}

	.feature-card {

		margin-bottom: 25px;

	}

	.live-match {

		margin-bottom: 30px;

	}

}

@media(max-width:767px) {

	.stat-number {

		font-size: 36px;

	}

.hero-image img {
    display: none;
}


	.sport-image img {

		height: 180px;

	}

	.series-image img {

		height: 180px;

	}

	.feature-card {

		padding: 30px 20px;

	}

	.live-match {

		padding: 22px;

	}

	.process-circle {

		width: 70px;

		height: 70px;

		font-size: 26px;

	}

}


/*====================================================
    STYLE.CSS
    PHASE 3
    TESTIMONIALS
    BLOGS
    FAQ
    DOWNLOAD APP
    CTA
=====================================================*/


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

.testimonial-section {
	position: relative;
}

.testimonial-slider {
	margin-top: 60px;
}

.testimonial-card {

	background: linear-gradient(180deg, #1a1a1a, #131313);

	border: 1px solid #2d2d2d;

	border-radius: 24px;

	padding: 45px;

	position: relative;

	overflow: hidden;

	transition: .35s;

}

.testimonial-card:hover {

	border-color: var(--primary);

	transform: translateY(-8px);

}

.testimonial-card::before {

	content: "\f10d";

	font-family: "Font Awesome 6 Free";

	font-weight: 900;

	position: absolute;

	top: 25px;

	right: 30px;

	font-size: 80px;

	color: rgba(255, 193, 7, .05);

}

.rating {

	display: flex;

	gap: 6px;

	margin-bottom: 25px;

}

.rating i {

	color: #FFC107;

	font-size: 18px;

}

.testimonial-text {

	color: #ddd;

	font-size: 18px;

	line-height: 1.9;

	margin-bottom: 35px;

}

.client-info {

	display: flex;

	align-items: center;

	gap: 18px;

}

.client-image {

	width: 70px;

	height: 70px;

	border-radius: 50%;

	overflow: hidden;

}

.client-image img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}

.client-name {

	font-size: 22px;

	margin-bottom: 3px;

}

.client-city {

	color: #999;

}


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

.blog-card {

	background: #181818;

	border: 1px solid #2b2b2b;

	border-radius: 22px;

	overflow: hidden;

	transition: .35s;

	height: 100%;

}

.blog-card:hover {

	transform: translateY(-8px);

	border-color: var(--primary);

}

.blog-image {

	overflow: hidden;

}

.blog-image img {

	width: 100%;

	height: 260px;

	object-fit: cover;

	transition: .5s;

}

.blog-card:hover img {

	transform: scale(1.08);

}

.blog-content {

	padding: 30px;

}

.blog-category {

	display: inline-block;

	padding: 8px 18px;

	background: rgba(255, 193, 7, .10);

	color: var(--primary);

	border-radius: 50px;

	font-size: 13px;

	margin-bottom: 18px;

}

.blog-content h4 {

	font-size: 24px;

	line-height: 1.5;

	margin-bottom: 18px;

}

.blog-content p {

	color: #bbb;

}

.read-more {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	color: var(--primary);

	font-weight: 700;

}

.read-more:hover {

	color: #fff;

}


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

.download-app {

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

	border-radius: 30px;

	overflow: hidden;

	border: 1px solid #2a2a2a;

}

.download-content {

	padding: 60px;

}

.download-image {

	text-align: center;

}

.download-image img {

	max-height: 550px;

}

.store-buttons {

	display: flex;

	gap: 20px;

	flex-wrap: wrap;

	margin-top: 30px;

}

.store-btn {

	display: flex;

	align-items: center;

	gap: 15px;

	background: #111;

	border: 1px solid #333;

	padding: 16px 30px;

	border-radius: 18px;

	color: #fff;

}

.store-btn:hover {

	border-color: var(--primary);

	color: var(--primary);

}

.store-btn i {

	font-size: 32px;

}


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

.faq-area {

	margin-top: 60px;

}

.accordion-item {

	background: #181818;

	border: 1px solid #2a2a2a;

	border-radius: 18px !important;

	overflow: hidden;

	margin-bottom: 18px;

}

.accordion-button {

	background: #181818;

	color: #fff;

	font-weight: 700;

	font-size: 18px;

	padding: 24px;

}

.accordion-button:not(.collapsed) {

	background: #202020;

	color: var(--primary);

	box-shadow: none;

}

.accordion-button:focus {

	box-shadow: none;

}

.accordion-body {

	background: #141414;

	color: #cfcfcf;

	line-height: 1.9;

}

.accordion-button::after {

	filter: invert(1);

}


/*========================================
CALL TO ACTION
=========================================*/

.cta-section {

	background: linear-gradient(89deg, #af9038, #6a570d);

	border-radius: 30px;

	padding: 80px 60px;

	color: #000;

	position: relative;

	overflow: hidden;

}

.cta-section h2 {

	color: #000;

	margin-bottom: 20px;

}

.cta-section p {

	color: #222;

}

.cta-buttons {

	display: flex;

	gap: 20px;

	flex-wrap: wrap;

	margin-top: 35px;

}

.btn-black {

	background: #111;

	color: #fff;

	padding: 16px 36px;

	border-radius: 50px;

}

.btn-black:hover {

	background: #000;

	color: #FFC107;

}


/*========================================
LOGO STRIP
=========================================*/

.logo-strip {

	display: flex;

	gap: 50px;

	justify-content: center;

	flex-wrap: wrap;

	align-items: center;

}

.logo-strip img {

	height: 42px;

	opacity: .6;

	transition: .35s;

}

.logo-strip img:hover {

	opacity: 1;

}


/*========================================
NUMBER BOX
=========================================*/

.number-box {
	background: #1a1a1a;
	border-radius: 18px;
	border: 1px solid #2b2b2b;
	padding: 10px 20px 10px 20px;
	text-align: center;
}

.number-box h3 {
	color: #b09143;
	font-size: 30px;
}

.number-box p {

	margin-bottom: 0;

}


/*========================================
SECTION DIVIDER
=========================================*/

.section-divider {

	width: 120px;

	height: 4px;

	background: #FFC107;

	margin: 25px auto 0;

	border-radius: 20px;

}


/*========================================
IMAGE RADIUS
=========================================*/

.rounded-image {

	border-radius: 28px;

	overflow: hidden;

}

.rounded-image img {

	width: 100%;

}


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

@media(max-width:991px) {

	.download-content {

		padding: 40px;

	}

	.cta-section {

		padding: 60px 35px;

		text-align: center;

	}

	.store-buttons {

		justify-content: center;

	}

	.testimonial-card {

		padding: 35px;

	}

}

@media(max-width:767px) {

	.blog-image img {

		height: 220px;

	}

	.download-content {

		padding: 30px;

	}

	.cta-section {

		padding: 45px 25px;

	}

	.testimonial-text {

		font-size: 16px;

	}

	.client-image {

		width: 60px;

		height: 60px;

	}

	.client-name {

		font-size: 18px;

	}

	.store-btn {

		width: 100%;

		justify-content: center;

	}

}


/*=========================================================
STYLE.CSS
PHASE 4
FOOTER
MOBILE
UTILITIES
ANIMATIONS
=========================================================*/


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

.live-ticker{

    background:#101010;

    border-top:1px solid #222;

    border-bottom:1px solid #222;

    overflow:hidden;

    position:relative;

}

.live-label{

    background:#ff2f2f;

    color:#fff;

    font-weight:700;

    padding:16px 30px;

    text-transform:uppercase;

}

.live-marquee{

    display:flex;

    align-items:center;

    white-space:nowrap;

    animation:marquee 35s linear infinite;

}

.live-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-right:80px;

    color:#fff;

}

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ff2f2f;

    animation:pulse 1s infinite;

}


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

.odds-table{

    background:#181818;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #2a2a2a;

}

.odds-table table{

    width:100%;

    color:#fff;

}

.odds-table th{

    background:#FFC107;

    color:#111;

    padding:18px;

}

.odds-table td{

    padding:18px;

    border-bottom:1px solid #2b2b2b;

}

.odds-table tr:hover{

    background:#222;

}


/*====================================
CERTIFICATION
====================================*/

.cert-box{

    background:#181818;

    border:1px solid #2b2b2b;

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.cert-box:hover{

    border-color:#FFC107;

    transform:translateY(-6px);

}

.cert-box i{

    color:#dbbc59;

    font-size:48px;

    margin-bottom:20px;

}


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

.footer{

    background:#090909;

    padding:90px 0 0;

}

.footer-logo{

    height:75px;

    margin-bottom:30px;

}

.footer p{

    color:#999;

}

.footer-title{

    color:#fff;

    font-size:22px;

    margin-bottom:25px;

}

.footer-links li{

    margin-bottom:15px;

}

.footer-links a{

    color:#999;

}

.footer-links a:hover{

    color:#FFC107;

    padding-left:8px;

}

.footer-contact li{

    display:flex;

    gap:15px;

    margin-bottom:18px;

}

.footer-contact i{

    color:#e2c760;

    width:22px;

}

.social-icons{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.social-icons a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#181818;

    color:#fff;

}

.social-icons a:hover{

    background:#FFC107;

    color:#111;

}

.footer-bottom{

    margin-top:70px;

    border-top:1px solid #222;

    padding:25px 0;

}

.footer-bottom p{

    margin:0;

}

.footer-payment{

    display:flex;

    gap:15px;

    justify-content:flex-end;

}

.footer-payment img{

    height:28px;

}


/*====================================
BOTTOM MOBILE NAV
====================================*/

.mobile-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    background:#101010;

    border-top:1px solid #222;

    display:none;

    z-index:999;

}

.mobile-nav ul{

    display:flex;

    justify-content:space-between;

}

.mobile-nav li{

    flex:1;

}

.mobile-nav a{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#fff;

    padding:12px 5px;

    font-size:13px;

}

.mobile-nav i{

    font-size:22px;

    margin-bottom:6px;

}

.mobile-nav a.active{

    color:#FFC107;

}


/*====================================
SCROLL TOP
====================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:35px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#FFC107;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    z-index:999;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}


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

.page-loader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:999999;

}

.loader{

    width:70px;

    height:70px;

    border:6px solid #222;

    border-top:6px solid #FFC107;

    border-radius:50%;

    animation:spin 1s linear infinite;

}


/*====================================
IMAGE EFFECTS
====================================*/

.zoom{

    overflow:hidden;

}

.zoom img{

    transition:.5s;

}

.zoom:hover img{

    transform:scale(1.1);

}

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

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

}


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

.badge-live{

    background:#ff2f2f;

    color:#fff;

    border-radius:40px;

    padding:6px 16px;

    font-size:12px;

}

.badge-new{

    background:#20c863;

    color:#fff;

    border-radius:40px;

    padding:6px 16px;

}

.badge-hot{

    background:#FFC107;

    color:#111;

    border-radius:40px;

    padding:6px 16px;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#FFC107;

    border-radius:30px;

}


/*====================================
UTILITY CLASSES
====================================*/

.radius-20{

border-radius:20px;

}

.radius-30{

border-radius:30px;

}

.overflow-hidden{

overflow:hidden;

}

.text-gold{

color:#FFC107;

}

.text-white{

color:#fff;

}

.bg-card{

background:#181818;

}

.border-gold{

border:1px solid #FFC107;

}

.shadow-lg{

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

}


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

@keyframes pulse{

0%{

transform:scale(.8);

opacity:.4;

}

50%{

transform:scale(1.2);

opacity:1;

}

100%{

transform:scale(.8);

opacity:.4;

}

}

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.fadeUp{

animation:fadeUp .8s;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


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

@media(max-width:991px){

.footer{

padding-bottom:90px;

}

.footer-payment{

justify-content:flex-start;

margin-top:20px;

}

}

@media(max-width:767px){

.mobile-nav{

display:block;

}

.footer{

text-align:center;

}

.social-icons{

justify-content:center;

}

.footer-payment{

justify-content:center;

}

.footer-logo{

margin:auto auto 25px;

}

.scroll-top{

bottom:90px;

right:20px;

width:50px;

height:50px;

}

.float-buttons{

bottom:150px;

}

}



.site-header.sticky{

position:fixed;

top:0;

left:0;

width:100%;

animation:header .35s;

background:#111;

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

z-index:9999;

}

@keyframes header{

from{

transform:translateY(-100%);

}

to{

transform:translateY(0);

}

}

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

/* ===========================
   REDDYANNA BLOG CONTENT CSS
   Wrapper Class: .blog-content
=========================== */

.blog-content{
    font-family: 'Poppins', sans-serif;
    font-size:16px;
    line-height:1.9;
    background-color:#1e1e1e;
}

.blog-content *{
    box-sizing:border-box;
}

/* Paragraph */
.blog-content p{
    margin:0 0 22px;
    color:#d9d9d9;
    line-height:1.9;
}

/* Headings */

.blog-content h1{
    font-size:42px;
    font-weight:700;
    color:#dfca62;
    line-height:1.3;
    margin:0 0 25px;
}

.blog-content h2{
    font-size:34px;
    font-weight:700;
    color:#dfca62;
    margin:45px 0 18px;
    line-height:1.4;
    border-left:5px solid #FFD700;
    padding-left:15px;
}

.blog-content h3{
    font-size:28px;
    font-weight:600;
    color:#dfca62;
    margin:35px 0 18px;
}

.blog-content h4{
    font-size:24px;
    color:#dfca62;
    margin:30px 0 15px;
}

.blog-content h5{
    font-size:20px;
    color:#dfca62;
    margin:25px 0 15px;
}

.blog-content h6{
    font-size:18px;
    color:#ffffff;
    margin:20px 0 12px;
}

/* Links */

.blog-content a{
    color:#FFD700;
    text-decoration:none;
    transition:.3s;
}

.blog-content a:hover{
    color:#fff;
    text-decoration:underline;
}

/* Lists */

.blog-content ul,
.blog-content ol{
    margin:25px 0;
    padding-left:30px;
}

.blog-content ul li{
    margin-bottom:12px;
    color:#d9d9d9;
    line-height:1.8;
    list-style: disc;
}
.blog-content ol li{
    margin-bottom:12px;
    color:#d9d9d9;
    line-height:1.8;
}

.blog-content ul li::marker{
    color:#FFD700;
}

.blog-content ol li::marker{
    color:#FFD700;
    font-weight:bold;
}

/* Strong */

.blog-content strong{
    color:#fff;
    font-weight:700;
}

.blog-content b{
    color:#fff;
}

/* Italic */

.blog-content em,
.blog-content i{
    color:#FFD700;
}
.left-blog-side nav{
        background: #f8f8f8;
}

/* Images */

.blog-content img{
    max-width:100%;
    height:auto;
    border-radius:10px;
    margin:25px auto;
    display:block;
}

/* Blockquote */

.blog-content blockquote{
    background:#1b1b1b;
    border-left:5px solid #FFD700;
    padding:20px 25px;
    margin:30px 0;
    color:#f5f5f5;
    font-style:italic;
    border-radius:8px;
}

/* Code */

.blog-content code{
    background:#222;
    color:#FFD700;
    padding:2px 6px;
    border-radius:4px;
}

.blog-content pre{
    background:#111;
    color:#fff;
    padding:20px;
    overflow:auto;
    border-radius:10px;
    margin:25px 0;
}

/* Horizontal Line */

.blog-content hr{
    border:none;
    border-top:1px solid rgba(255,255,255,.15);
    margin:40px 0;
}

/* Tables */

.blog-content table{
    width:100%;
    border-collapse:collapse;
    margin:35px 0;
    overflow:hidden;
    border-radius:10px;
}

.blog-content table thead{
    background:#FFD700;
}

.blog-content table thead th{
    color:#111;
    font-size:16px;
    padding:15px;
    text-align:left;
    font-weight:700;
}

.blog-content table tbody tr:nth-child(odd){
    background:#1b1b1b;
}

.blog-content table tbody tr:nth-child(even){
    background:#252525;
}

.blog-content table td{
    padding:15px;
    border:1px solid rgba(255,255,255,.08);
    color:#e5e5e5;
}

.blog-content table th{
    border:1px solid rgba(255,255,255,.08);
}

/* Responsive Table */

.blog-content .table-responsive{
    overflow-x:auto;
}

/* Highlight */

.blog-content mark{
    background:#FFD700;
    color:#111;
    padding:2px 6px;
}

/* Selection */

.blog-content ::selection{
    background:#FFD700;
    color:#111;
}

/* Responsive */

@media(max-width:768px){

    .blog-content{
        font-size:15px;
    }

    .blog-content h1{
        font-size:32px;
    }

    .blog-content h2{
        font-size:28px;
    }

    .blog-content h3{
        font-size:24px;
    }

    .blog-content h4{
        font-size:21px;
    }

    .blog-content table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

}