:root {
--primary: #1C0A4A;
--primary-mid: #3D1278;
--primary-light: #6B21C8;
--accent: #F97316;
--accent-2: #FBBF24;
--bg-dark: #0A0618;
--text-white: #ffffff;
--dark:#0A0618;
--tw:#fff;
--pm:#3D1278;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
font-family: 'Outfit', sans-serif;
background: var(--bg-dark);
color: #fff;
overflow-x: hidden;
}

/* ══════════════ TOP STRIP ══════════════ */
.top-strip {
background: linear-gradient(90deg, #120836, #1C0A4A, #120836);
font-size: 11.5px;
padding: 7px 0;
border-bottom: 1px solid rgba(249, 115, 22, 0.15);
position: relative;
overflow: hidden;
}

.top-strip::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(249, 115, 22, 0.04) 80px, rgba(249, 115, 22, 0.04) 81px);
}

.strip-stars {
display: flex;
align-items: center;
gap: 4px;
color: var(--accent);
font-weight: 500;
letter-spacing: 0.3px;
}

.strip-stars i {
font-size: 10px;
}

.strip-stars span {
color: rgba(255, 255, 255, 0.7);
margin-left: 6px;
}

.strip-link {
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
font-weight: 400;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 5px;
}

.strip-link i {
font-size: 10px;
}

.strip-link:hover {
color: var(--accent);
}

/* ══════════════ HEADER ══════════════ */
.site-header {
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
position: sticky;
top: 0;
z-index: 1020;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.12);
overflow: visible;
}

.header-inner {
padding: 10px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}

.main-logo-link {
flex-shrink: 0;
}

.main-logo {
height: 42px;
width: auto;
object-fit: contain;
}

.d-search-con {
max-width: 380px;
}

.d_s_box {
position: relative;
width: 100%;
}

.d_s_box input {
width: 100%;
padding: 9px 16px 9px 40px;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-size: 13px;
font-family: 'Outfit', sans-serif;
color: #334155;
outline: none;
transition: border-color 0.2s;
}

.d_s_box i.fa-magnifying-glass {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 13px;
}

.nav-link .fa-house {
font-size: 11px;
}

.nav-link .fa-chevron-down {
font-size: 9px;
opacity: 0.6;
}

.nav-link.live {
color: var(--accent) !important;
}

.nav-link.live span {
font-size: 7px;
color: #fff;
animation: pulse-red 2s infinite;
}

.nav-link .fa-bag-shopping {
font-size: 11px;
}

.nav-item .drop-menu {
right: 0;
left: auto;
}

.offcanvas-header img {
height: 32px;
filter: brightness(0) invert(1);
}

.header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.m_s_con {
padding: 0 16px 16px;
border-bottom: 1px solid var(--border);
}

.m_s_box {
position: relative;
}

.m_s_box input {
width: 100%;
padding: 10px 14px 10px 38px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 14px;
font-family: 'Outfit', sans-serif;
color: #fff;
outline: none;
}

.m_s_box .fa-magnifying-glass {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
}

.mobile-nav-link .fa-chevron-right {
font-size: 11px;
opacity: 0.4;
}

.m_btn_link {
padding: 20px 20px;
border-top: 1px solid var(--border);
margin-top: auto;
}

.m_btn_link_c {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.m_btn_link a {
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
text-decoration: none;
}

.btn-lang {
background: #f1f5f9;
border: 1px solid #e2e8f0;
color: #334155;
font-size: 12px;
font-weight: 600;
padding: 7px 13px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
font-family: 'Outfit', sans-serif;
}

.btn-lang:hover {
background: #e2e8f0;
}

.btn-signin {
background: linear-gradient(135deg, #F97316, #ea6c0a);
color: #fff;
font-weight: 700;
font-size: 13px;
border-radius: 10px;
padding: 8px 20px;
border: none;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
font-family: 'Outfit', sans-serif;
white-space: nowrap;
}

.btn-signin:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

.btn-menu {
background: var(--primary);
border: 2px solid rgba(249, 115, 22, 0.3);
color: #F97316;
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
font-size: 16px;
}

.btn-menu:hover {
background: var(--primary-mid);
}

/* ══════════════ DESKTOP NAV ══════════════ */
.nav-bar {
background: linear-gradient(90deg, #1C0A4A 0%, #3D1278 40%, #4a1590 60%, #1C0A4A 100%);
position: relative;
overflow: visible;
}

.nav-bar::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #F97316, #FBBF24, #F97316, transparent);
}

.nav-bar::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-inner {
display: flex;
align-items: stretch;
position: relative;
overflow: visible;
justify-content: center;
}

.nav-link {
color: rgba(255, 255, 255, 0.82) !important;
font-size: 14.5px;
font-weight: 600;
padding: 13px 14px !important;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
transition: color 0.2s, background 0.2s;
letter-spacing: 0.2px;
position: relative;
}

.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
right: 50%;
height: 2px;
background: var(--accent);
transition: all 0.3s;
}

.nav-link:hover {
color: var(--accent) !important;
background: rgba(255, 255, 255, 0.06);
}

.nav-link:hover::after {
left: 10%;
right: 10%;
}

/* Dropdown */
.nav-item {
position: relative;
}

.drop-menu {
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: 0 0 12px 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
padding: 8px 0;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
border: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-item:hover .drop-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.drop-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
color: #334155;
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
transition: background 0.15s, color 0.15s;
}

.drop-item:hover {
background: #fff5ee;
color: #c2410c;
}

.drop-item i {
color: #F97316;
width: 18px;
font-size: 13px;
}

/* Live Badge */
.badge-live {
background: #ef4444;
font-size: 8.5px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
letter-spacing: 0.5px;
animation: pulse-red 2s infinite;
font-family: 'Outfit', sans-serif;
}

@keyframes pulse-red {

0%,
100% {
opacity: 1;
}

50% {
opacity: 0.6;
}
}

/* ══════════════ MOBILE MENU ══════════════ */
.offcanvas {
background: linear-gradient(160deg, #0d0420 0%, #1C0A4A 50%, #0d0420 100%) !important;
color: #fff;
width: min(320px, 85vw) !important;
border-right: 1px solid rgba(249, 115, 22, 0.15) !important;
}

.offcanvas-header {
padding: 20px;
border-bottom: 1px solid var(--border);
background: rgba(249, 115, 22, 0.05);
}

.offcanvas-body {
padding: 0;
}

.mobile-signin {
margin: 16px;
background: linear-gradient(135deg, #F97316, #ea6c0a);
color: #fff;
font-weight: 700;
border: none;
border-radius: 12px;
padding: 13px;
width: calc(100% - 32px);
font-size: 15px;
font-family: 'Outfit', sans-serif;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 6px 20px rgba(249, 115, 22, 0.3);
}

.mobile-nav-section {
padding: 8px 0;
}

.mobile-nav-link {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
font-weight: 500;
font-size: 15px;
border-bottom: 1px solid var(--border);
transition: background 0.15s, color 0.15s;
}

.mobile-nav-link:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--accent);
}

.mobile-nav-link .icon-wrap {
display: flex;
align-items: center;
gap: 12px;
}

.mobile-nav-link .nav-icon {
width: 32px;
height: 32px;
background: rgba(249, 115, 22, 0.12);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #F97316;
}

/* Accordion override */
.mob-accordion .acc-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.85);
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
font-weight: 500;
font-size: 15px;
border-bottom: 1px solid var(--border);
cursor: pointer;
font-family: 'Outfit', sans-serif;
transition: background 0.15s;
}

.mob-accordion .acc-btn:hover {
background: rgba(255, 255, 255, 0.04);
}

.mob-accordion .acc-btn .icon-wrap {
display: flex;
align-items: center;
gap: 12px;
}

.mob-accordion .acc-btn .nav-icon {
width: 32px;
height: 32px;
background: rgba(249, 115, 22, 0.12);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #F97316;
}

.mob-accordion .acc-btn .chevron {
transition: transform 0.3s;
opacity: 0.5;
font-size: 11px;
}

.mob-accordion .acc-btn.open .chevron {
transform: rotate(90deg);
}

.acc-body {
background: rgba(0, 0, 0, 0.2);
display: none;
padding: 4px 0;
}

.acc-body.show {
display: block;
}

.acc-sub-link {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px 12px 64px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
transition: color 0.15s;
}

.acc-sub-link:hover {
color: var(--accent);
}

.acc-sub-link i {
width: 16px;
font-size: 12px;
color: #F97316;
opacity: 0.8;
}


/* ════════════════════════════ HERO SECTION ════════════════════════════ */

.hero {
min-height: 90vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: radial-gradient(circle at center, var(--primary-mid) 0%, var(--bg-dark) 100%);
padding: 80px 0;
}

.badge {
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 50px;
color: var(--accent-2);
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.1);
display: inline-block;
margin-bottom: 20px;
}

.hero-text h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
color: white;
line-height: 1.2;
margin-bottom: 20px;
}

.gradient-text {
background: linear-gradient(45deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero-text p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 35px;
max-width: 600px;
}


.as_banner_img {
position: relative;
}

.as_banner_img .as_hand_bg {
animation: spin 12s infinite linear;
-webkit-animation: spin 12s infinite linear;
-moz-animation: spin 12s infinite linear;
display: inline-block;
}

.as_banner_img .as_hand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 60%;
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
}
}

@media (max-width: 991px) {
.hero-wrapper {
grid-template-columns: 1fr;
text-align: center;
}

.hero-text p {
margin: 0 auto 30px;
}

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

.hero {
padding: 60px 0;
}
}

@media (max-width: 575px) {
.hero-text h1 {
font-size: 2rem;
}

.btn-main,
.btn-outline {
width: 100%;
}
}

.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}

.star {
position: absolute;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
animation: twinkle var(--dur) ease-in-out infinite;
animation-delay: var(--delay);
}

@keyframes twinkle {

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

50% {
opacity: 1;
transform: scale(1.2);
box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}
}

.hero {
min-height: 80vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background-image: url('../images/slide_bg.webp');
background-repeat: repeat-x;
background-size: cover;
background-position: 0 0;
animation: bgScroll 90s linear infinite;
}



.hero::before {
content: '';
position: absolute;
inset: 0;
background: rgba(10, 6, 24, 0.7);
z-index: 1;
}

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

@keyframes bgScroll {
from {
background-position: 0 0;
}

to {
background-position: -2000px 0;
}
}

.stars {
z-index: 1;
}

.hero-btns {
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.btn-main {
background: var(--accent);
}

.btn-outline {
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.astro-btn-hover {
color: white;
border: 1px solid var(--accent);
padding: 14px 30px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
position: relative;
z-index: 1;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 10px;
justify-content: center;
transition: all 0.4s ease-in-out;
background-clip: padding-box;
}

.astro-btn-hover:hover {
background-color: transparent !important;
border-color: var(--accent) !important;
color: #ffffff;
box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}

.astro-btn-hover::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
background-image: url('../images/circle.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
z-index: -1;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
pointer-events: none;
}

.astro-btn-hover:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1.4);
animation: rotateCircle 10s linear infinite;
}

@keyframes rotateCircle {
from {
transform: translate(-50%, -50%) scale(1.4) rotate(0deg);
}

to {
transform: translate(-50%, -50%) scale(1.4) rotate(360deg);
}
}

@media (max-width: 768px) {
.astro-btn-hover::before {
width: 100px;
height: 100px;
}
}


/* ─── Quick Actions ─── */
.quick-actions {
background: #fff;
padding: 28px 0 24px;
border-bottom: 1px solid #f0eaf8;
}

.qa-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border: 1.5px solid #e8e0f5;
border-radius: 14px;
text-decoration: none;
background: #fff;
transition: all .25s ease;
cursor: pointer;
height: 100%;
}

.qa-card:hover {
border-color: var(--accent);
box-shadow: 0 6px 24px rgba(249, 115, 22, .14);
transform: translateY(-2px);
}

.qa-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(249, 115, 22, .28);
}

.qa-label {
font-size: 15px;
font-weight: 700;
color: var(--primary);
line-height: 1.1;
}

.qa-sub {
font-size: 11px;
color: #94a3b8;
margin-top: 2px;
}

.qa-arrow {
width: 30px;
height: 30px;
border: 1.5px solid #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
font-size: 11px;
flex-shrink: 0;
transition: all .2s;
}

.qa-card:hover .qa-arrow {
border-color: var(--accent);
color: var(--accent);
background: rgba(249, 115, 22, .08);
}

@media (max-width:767px){
.qa-arrow{
  display: none;
}
.qa-icon{
  width: 30px;
  height: 30px;
  font-size: 10px;
}
.qa-card{
  padding: 8px;
}
}

/* ================== QUICK ACTIONS ==================== */

.astro-premium-section {
background: linear-gradient(170deg, #0d0420 0%, #1C0A4A 45%, #130930 100%);
padding: 56px 0 60px;
position: relative;
overflow: hidden;
}

.astro-premium-section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249, 115, 22, .08) 0%, transparent 70%);
top: -100px;
left: -100px;
pointer-events: none;
}

.astro-premium-section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(107, 33, 200, .12) 0%, transparent 70%);
bottom: -80px;
right: -80px;
pointer-events: none;
}

.ap-header {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 36px;
position: relative;
z-index: 2;
text-align: center;
}

.ap-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}

.ap-eyebrow span {
width: 28px;
height: 1px;
background: var(--accent);
display: inline-block;
}

.ap-title {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.15;
}

.ap-title em {
font-style: normal;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.ap-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, .45);
margin-top: 6px;
}

.btn-ap-all {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .8);
font-size: 13px;
font-weight: 600;
padding: 10px 20px;
border-radius: 50px;
text-decoration: none;
transition: all .25s;
backdrop-filter: blur(10px);
white-space: nowrap;
flex-shrink: 0;
}

.btn-ap-all:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 6px 20px rgba(249, 115, 22, .35);
}

.ap-filters {
display: flex;
gap: 8px;
margin-bottom: 28px;
overflow-x: auto;
scrollbar-width: none;
position: relative;
z-index: 2;
}

.ap-filters::-webkit-scrollbar {
display: none;
}

.ap-filter-btn {
flex-shrink: 0;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1);
color: rgba(255, 255, 255, .55);
font-size: 12.5px;
font-weight: 600;
padding: 7px 16px;
border-radius: 50px;
cursor: pointer;
transition: all .2s;
white-space: nowrap;
}

.ap-filter-btn:hover,
.ap-filter-btn.active {
background: linear-gradient(135deg, var(--accent), #ea6c0a);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 14px rgba(249, 115, 22, .3);
}

.ap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
z-index: 2;
}

@media (max-width: 991px) {
.ap-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 575px) {
.ap-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}

.ap-card {
background: rgba(255, 255, 255, .055);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 20px;
overflow: hidden;
backdrop-filter: blur(16px);
transition: all .35s cubic-bezier(.4, 0, .2, 1);
position: relative;
display: flex;
flex-direction: column;
}

.ap-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 20px;
background: linear-gradient(145deg, rgba(255, 255, 255, .04) 0%, transparent 60%);
pointer-events: none;
}

.ap-card:hover {
transform: translateY(-6px);
border-color: rgba(249, 115, 22, .4);
box-shadow:
0 20px 50px rgba(0, 0, 0, .4),
0 0 0 1px rgba(249, 115, 22, .15),
inset 0 1px 0 rgba(255, 255, 255, .1);
}

.ap-card-banner {
height: 72px;
background: linear-gradient(135deg, #3D1278, #1C0A4A);
position: relative;
flex-shrink: 0;
}

.ap-card:nth-child(2) .ap-card-banner {
background: linear-gradient(135deg, #1C3A6A, #0d1f3c);
}

.ap-card:nth-child(3) .ap-card-banner {
background: linear-gradient(135deg, #1a3a2a, #0d2018);
}

.ap-card:nth-child(4) .ap-card-banner {
background: linear-gradient(135deg, #3a1a1a, #2a0d0d);
}

.ap-card:nth-child(5) .ap-card-banner {
background: linear-gradient(135deg, #2a2a0d, #1a1a05);
}

.ap-card:nth-child(6) .ap-card-banner {
background: linear-gradient(135deg, #1a1a3a, #0d0d2a);
}

.ap-card-banner-pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 14px 14px;
}

.ap-avatar-wrap {
position: absolute;
bottom: -32px;
left: 20px;
z-index: 3;
}

.ap-avatar-ring {
width: 72px;
height: 72px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

.ap-avatar-ring img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 3px solid #1C0A4A;
display: block;
}

.ap-status-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2.5px solid #1C0A4A;
position: absolute;
top: 2px;
right: 2px;
z-index: 4;
}

.ap-status-dot.online {
background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, .6);
}

.ap-status-dot.offline {
background: #64748b;
}

.ap-spec-badge {
position: absolute;
top: 10px;
right: 12px;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .15);
color: rgba(255, 255, 255, .85);
font-size: 10.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 50px;
display: flex;
align-items: center;
gap: 5px;
}

.ap-spec-badge i {
color: var(--accent-2);
font-size: 9px;
}

.ap-card-body {
padding: 42px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
}

.ap-name-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}

.ap-name {
font-size: 16px;
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.2;
}

.ap-verified {
color: var(--accent-2);
font-size: 13px;
flex-shrink: 0;
margin-top: 2px;
}

.btn-ap-follow {
background: rgba(249, 115, 22, .12);
border: 1px solid rgba(249, 115, 22, .3);
color: var(--accent);
font-size: 11px;
font-weight: 700;
padding: 4px 12px;
border-radius: 50px;
cursor: pointer;
transition: all .2s;
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
white-space: nowrap;
}

.btn-ap-follow:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}

.ap-rating-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}

.ap-stars {
display: flex;
gap: 2px;
color: var(--accent-2);
font-size: 11px;
}

.ap-rating-num {
font-size: 12.5px;
font-weight: 700;
color: var(--accent-2);
}

.ap-reviews {
font-size: 11px;
color: rgba(255, 255, 255, .35);
}

.ap-meta-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}

.ap-pill {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 50px;
padding: 4px 10px;
font-size: 11.5px;
color: rgba(255, 255, 255, .65);
font-weight: 500;
}

.ap-pill i {
color: var(--accent);
font-size: 10px;
}

.ap-divider {
height: 1px;
background: rgba(255, 255, 255, .07);
margin-bottom: 14px;
}
.ap-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-top: auto;
}

.ap-price {
font-size: 17px;
font-weight: 800;
color: #fff;
line-height: 1;
}

.ap-price small {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, .5);
}

.ap-price-old {
font-size: 11px;
color: rgba(255, 255, 255, .3);
text-decoration: line-through;
margin-left: 5px;
}

.ap-deal {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(249, 115, 22, .15);
border: 1px solid rgba(249, 115, 22, .25);
color: var(--accent);
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
margin-top: 4px;
}

.ap-deal i {
font-size: 9px;
}

.ap-actions {
display: flex;
gap: 7px;
}

.ap-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: all .2s;
border: none;
line-height: 1;
white-space: nowrap;
}

.ap-btn i {
font-size: 11px;
}

.ap-btn-chat {
background: linear-gradient(135deg, var(--primary-mid), var(--primary-light));
color: #fff;
box-shadow: 0 4px 14px rgba(61, 18, 120, .35);
}

.ap-btn-chat:hover {
box-shadow: 0 6px 20px rgba(61, 18, 120, .55);
transform: translateY(-1px);
}

.ap-btn-call {
background: linear-gradient(135deg, var(--accent), #ea6c0a);
color: #fff;
box-shadow: 0 4px 14px rgba(249, 115, 22, .35);
}

.ap-btn-call:hover {
box-shadow: 0 6px 20px rgba(249, 115, 22, .55);
transform: translateY(-1px);
}

.ap-btn-offline {
background: rgba(255, 255, 255, .06);
color: rgba(255, 255, 255, .3);
border: 1px solid rgba(255, 255, 255, .08) !important;
cursor: default;
}

.ap-bottom-cta {
text-align: center;
margin-top: 40px;
position: relative;
z-index: 2;
}

.btn-ap-more {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: 1.5px solid rgba(249, 115, 22, .4);
color: var(--accent);
font-size: 14px;
font-weight: 700;
padding: 13px 32px;
border-radius: 50px;
text-decoration: none;
transition: all .3s;
}

.btn-ap-more:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 8px 25px rgba(249, 115, 22, .35);
transform: translateY(-2px);
}


/* ═════════════════════════════TOP ASTROLOGERS SECTION════════════════════════ */

.appt-section {
background: #fff;
padding: 52px 0 48px;
}

.zodiac-section {
background: linear-gradient(160deg, #08031a 0%, #1C0A4A 55%, #08031a 100%);
padding: 56px 0 60px;
position: relative;
overflow: hidden;
}

.zodiac-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(255, 255, 255, .55) 1px, transparent 1px);
background-size: 40px 40px;
opacity: .07;
pointer-events: none;
}

.zodiac-section::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249, 115, 22, .07) 0%, transparent 65%);
top: -150px;
right: -150px;
pointer-events: none;
}

.sec-hd {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
gap: 12px;
text-align: center;
}

.sec-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 7px;
}

.sec-eyebrow span {
display: inline-block;
width: 24px;
height: 1.5px;
background: var(--accent);
border-radius: 2px;
}

.sec-hd-title {
font-size: clamp(19px, 3vw, 24px);
font-weight: 800;
margin: 0;
line-height: 1.2;
color: var(--primary);
}

.sec-hd-title.light {
color: #fff;
}

.sec-hd-title em {
font-style: normal;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.sec-hd-sub {
font-size: 12.5px;
margin-top: 4px;
color: #94a3b8;
}

.sec-hd-sub.light {
color: rgba(255, 255, 255, .4);
}

.btn-sec-viewall {
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 50px;
font-size: 12.5px;
font-weight: 600;
padding: 8px 20px;
text-decoration: none;
transition: all .22s;
white-space: nowrap;
flex-shrink: 0;
}

.btn-sec-viewall.dark {
border: 1.5px solid var(--primary-mid);
color: var(--primary-mid);
background: transparent;
}

.btn-sec-viewall.dark:hover {
background: var(--primary-mid);
color: #fff;
}

.btn-sec-viewall.light {
border: 1.5px solid rgba(249, 115, 22, .45);
color: var(--accent);
background: transparent;
}

.btn-sec-viewall.light:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}

/* ═════════════════════════════════SCHEDULE APPOINTMENT══════════════════════════════ */

.appt-scroll {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}

.appt-scroll::-webkit-scrollbar {
display: none;
}

.appt-card {
flex: 0 0 calc(20% - 13px);
min-width: 175px;
border-radius: 20px;
overflow: hidden;
text-decoration: none;
transition: all .3s ease;
scroll-snap-align: start;
position: relative;
display: flex;
flex-direction: column;
border: 1.5px solid #ede8f5;
background: #fff;
box-shadow: 0 2px 12px rgba(28, 10, 74, .06);
}

.appt-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 40px rgba(249, 115, 22, .16);
border-color: var(--accent);
}

.appt-img {
width: 100%;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.appt-card:nth-child(1) .appt-img {
background: linear-gradient(145deg, #f3eeff, #e9ddfb);
}

.appt-card:nth-child(2) .appt-img {
background: linear-gradient(145deg, #fff4e6, #ffe8cc);
}

.appt-card:nth-child(3) .appt-img {
background: linear-gradient(145deg, #e6f7ff, #cceeff);
}

.appt-card:nth-child(4) .appt-img {
background: linear-gradient(145deg, #fff0f0, #ffe0e0);
}

.appt-card:nth-child(5) .appt-img {
background: linear-gradient(145deg, #f0fff4, #d6f5e3);
}

.appt-card:nth-child(6) .appt-img {
background: linear-gradient(145deg, #fffbea, #fff3c4);
}

.appt-card:nth-child(7) .appt-img {
background: linear-gradient(145deg, #fce4ec, #f8bbd9);
}

.appt-img::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(0, 0, 0, .07) 1px, transparent 1px);
background-size: 16px 16px;
}

.appt-icon-circle {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255, 255, 255, .75);
backdrop-filter: blur(8px);
border: 1.5px solid rgba(255, 255, 255, .9);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
transition: transform .3s, box-shadow .3s;
}

.appt-icon-circle i {
font-size: 28px;
transition: color .3s;
}

.appt-card:nth-child(1) .appt-icon-circle i {
color: var(--primary-light);
}

.appt-card:nth-child(2) .appt-icon-circle i {
color: var(--accent);
}

.appt-card:nth-child(3) .appt-icon-circle i {
color: #0ea5e9;
}

.appt-card:nth-child(4) .appt-icon-circle i {
color: #ef4444;
}

.appt-card:nth-child(5) .appt-icon-circle i {
color: #22c55e;
}

.appt-card:nth-child(6) .appt-icon-circle i {
color: var(--accent-2);
}

.appt-card:nth-child(7) .appt-icon-circle i {
color: #ec4899;
}

.appt-card:hover .appt-icon-circle {
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.appt-corner-tag {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, .7);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--accent);
z-index: 2;
}

.appt-label {
padding: 14px 12px 16px;
text-align: center;
font-size: 13px;
font-weight: 700;
color: var(--primary);
line-height: 1.3;
border-top: 1px solid #f0ebfa;
background: #fff;
transition: color .2s;
}

.appt-card:hover .appt-label {
color: var(--accent);
}

@media (max-width: 991px) {
.appt-card {
flex: 0 0 190px;
}
}

@media (max-width: 575px) {
.appt-card {
flex: 0 0 150px;
min-width: 150px;
}

.appt-icon-circle {
width: 60px;
height: 60px;
}

.appt-icon-circle i {
font-size: 22px;
}
}

/* ═══════════════════════════════TODAY'S ASTROLOGY PREDICTION═════════════════════════════ */

.zodiac-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
position: relative;
z-index: 2;
}

@media (max-width: 991px) {
.zodiac-grid {
grid-template-columns: repeat(4, 1fr);
}
}

@media (max-width: 575px) {
.zodiac-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}

.zodiac-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 8px 18px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .05);
backdrop-filter: blur(14px);
cursor: pointer;
text-decoration: none;
transition: all .3s ease;
position: relative;
overflow: hidden;
}

.zodiac-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(249, 115, 22, .1), rgba(251, 191, 36, .06));
opacity: 0;
transition: opacity .3s;
border-radius: 18px;
}

.zodiac-card:hover {
border-color: rgba(249, 115, 22, .45);
transform: translateY(-5px);
box-shadow: 0 14px 35px rgba(0, 0, 0, .35), 0 0 0 1px rgba(249, 115, 22, .15);
}

.zodiac-card:hover::before {
opacity: 1;
}

.zodiac-icon-bg {
width: 62px;
height: 62px;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
border: 1.5px solid rgba(255, 255, 255, .12);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: all .3s;
flex-shrink: 0;
}

.zodiac-card:hover .zodiac-icon-bg {
background: rgba(249, 115, 22, .15);
border-color: rgba(249, 115, 22, .4);
box-shadow: 0 0 24px rgba(249, 115, 22, .2);
}

.zodiac-icon-bg i {
font-size: 26px;
color: rgba(255, 255, 255, .65);
transition: color .3s, transform .3s;
}

.zodiac-card:hover .zodiac-icon-bg i {
color: var(--accent-2);
transform: scale(1.15);
}

.zodiac-card[data-sign="aries"] .zodiac-icon-bg i {
color: #f87171;
}

.zodiac-card[data-sign="taurus"] .zodiac-icon-bg i {
color: #86efac;
}

.zodiac-card[data-sign="gemini"] .zodiac-icon-bg i {
color: #fde68a;
}

.zodiac-card[data-sign="cancer"] .zodiac-icon-bg i {
color: #93c5fd;
}

.zodiac-card[data-sign="leo"] .zodiac-icon-bg i {
color: #fb923c;
}

.zodiac-card[data-sign="virgo"] .zodiac-icon-bg i {
color: #6ee7b7;
}

.zodiac-card[data-sign="libra"] .zodiac-icon-bg i {
color: #c4b5fd;
}

.zodiac-card[data-sign="scorpio"] .zodiac-icon-bg i {
color: #f43f5e;
}

.zodiac-card[data-sign="sagittarius"] .zodiac-icon-bg i {
color: #fbbf24;
}

.zodiac-card[data-sign="capricorn"] .zodiac-icon-bg i {
color: #94a3b8;
}

.zodiac-card[data-sign="aquarius"] .zodiac-icon-bg i {
color: #38bdf8;
}

.zodiac-card[data-sign="pisces"] .zodiac-icon-bg i {
color: #818cf8;
}

.zodiac-name {
font-size: 12.5px;
font-weight: 700;
color: rgba(255, 255, 255, .8);
position: relative;
z-index: 1;
transition: color .2s;
text-align: center;
letter-spacing: .3px;
}

.zodiac-card:hover .zodiac-name {
color: var(--accent-2);
}

.zodiac-dates {
font-size: 9.5px;
color: rgba(255, 255, 255, .3);
position: relative;
z-index: 1;
margin-top: -6px;
text-align: center;
}

.zodiac-card::after {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249, 115, 22, .18) 0%, transparent 70%);
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}

.zodiac-card:hover::after {
opacity: 1;
}


/* ===========================CUSTOMER REVIEWS SECTION========================= */

.reviews-section {
background: #fff;
padding: 60px 0 70px;
position: relative;
overflow: hidden;
}

.reviews-section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(61, 18, 120, .05) 0%, transparent 70%);
top: -200px;
right: -100px;
pointer-events: none;
}

.reviews-section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249, 115, 22, .05) 0%, transparent 70%);
bottom: -150px;
left: -100px;
pointer-events: none;
}

.rv-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
}

.rv-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}

.rv-eyebrow span {
display: inline-block;
width: 28px;
height: 1.5px;
background: var(--accent);
border-radius: 2px;
}

.rv-title {
font-size: clamp(24px, 4vw, 36px);
font-weight: 800;
color: var(--primary);
margin: 0 0 10px;
line-height: 1.2;
}

.rv-title em {
font-style: normal;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.rv-subtitle {
font-size: 14px;
color: #94a3b8;
max-width: 480px;
margin: 0 auto;
line-height: 1.6;
}

.rv-overall {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
margin-bottom: 48px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}

.rv-big-score {
text-align: center;
}

.rv-big-num {
font-size: 64px;
font-weight: 900;
color: var(--primary);
line-height: 1;
letter-spacing: -2px;
}

.rv-big-stars {
display: flex;
gap: 4px;
justify-content: center;
margin: 6px 0 4px;
color: var(--accent-2);
font-size: 18px;
}

.rv-big-count {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
}

.rv-divider-v {
width: 1px;
height: 80px;
background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
}

.rv-bars {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 200px;
}

.rv-bar-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
}

.rv-bar-label {
color: #64748b;
font-weight: 600;
width: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 3px;
}

.rv-bar-label i {
color: var(--accent-2);
font-size: 10px;
}

.rv-bar-track {
flex: 1;
height: 6px;
background: #f1f5f9;
border-radius: 10px;
overflow: hidden;
}

.rv-bar-fill {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transition: width 1s ease;
}

.rv-bar-pct {
font-size: 11px;
color: #94a3b8;
width: 28px;
text-align: right;
flex-shrink: 0;
}

.rv-slider-outer {
position: relative;
z-index: 2;
}

.rv-slider-track {
overflow: hidden;
border-radius: 24px;
}

.rv-slides {
display: flex;
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}

.rv-card {
flex: 0 0 calc(33.333% - 14px);
margin: 0 7px;
background: linear-gradient(145deg, #fafafa, #f8f4ff);
border: 1.5px solid #ede9f8;
border-radius: 20px;
padding: 28px 24px 24px;
position: relative;
overflow: hidden;
transition: transform .3s, box-shadow .3s;
display: flex;
flex-direction: column;
gap: 16px;
}

.rv-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-mid), var(--accent), var(--accent-2));
border-radius: 20px 20px 0 0;
opacity: 0;
transition: opacity .3s;
}

.rv-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(61, 18, 120, .1);
border-color: #c4b5f4;
}

.rv-card:hover::before {
opacity: 1;
}

.rv-quote-icon {
position: absolute;
top: 18px;
right: 20px;
font-size: 52px;
color: var(--primary-mid);
opacity: .06;
line-height: 1;
pointer-events: none;
font-family: Georgia, serif;
}

.rv-stars {
display: flex;
gap: 3px;
color: var(--accent-2);
font-size: 13px;
}

.rv-star-empty {
color: #e2e8f0;
}

.rv-text {
font-size: 14px;
line-height: 1.75;
color: #475569;
flex: 1;
position: relative;
}

.rv-tag {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(61, 18, 120, .07);
border: 1px solid rgba(61, 18, 120, .1);
color: var(--primary-mid);
font-size: 10.5px;
font-weight: 700;
padding: 3px 10px;
border-radius: 50px;
width: fit-content;
}

.rv-tag i {
font-size: 9px;
color: var(--accent);
}

.rv-reviewer {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid #f0ebfa;
}

.rv-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 2.5px solid #ede9f8;
flex-shrink: 0;
}

.rv-avatar-init {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-mid), var(--primary-light));
color: #fff;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2.5px solid #ede9f8;
}

.rv-reviewer-info {
flex: 1;
min-width: 0;
}

.rv-reviewer-name {
font-size: 14px;
font-weight: 700;
color: var(--primary);
margin: 0 0 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.rv-reviewer-meta {
font-size: 11.5px;
color: #94a3b8;
display: flex;
align-items: center;
gap: 6px;
}

.rv-reviewer-meta i {
font-size: 10px;
color: var(--accent);
}

.rv-verified {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 600;
color: #22c55e;
background: rgba(34, 197, 94, .08);
padding: 2px 8px;
border-radius: 50px;
flex-shrink: 0;
}

.rv-verified i {
font-size: 9px;
}

.rv-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 36px;
position: relative;
z-index: 2;
}

.rv-btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1.5px solid #e2e8f0;
background: #fff;
color: #64748b;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .22s;
box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.rv-btn:hover {
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 4px 16px rgba(249, 115, 22, .2);
transform: scale(1.05);
}

.rv-dots {
display: flex;
gap: 8px;
align-items: center;
}

.rv-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e2e8f0;
cursor: pointer;
transition: all .25s;
border: none;
padding: 0;
}

.rv-dot.active {
width: 24px;
border-radius: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

@media (max-width: 991px) {
.rv-card {
flex: 0 0 calc(50% - 14px);
}

.rv-divider-v {
display: none;
}
}

@media (max-width: 575px) {
.rv-card {
flex: 0 0 calc(100% - 14px);
}

.rv-overall {
gap: 16px;
}

.rv-bars {
min-width: 160px;
}
}

/* =====================footer-section=================================== */

.footer-services-strip {
background: linear-gradient(135deg, #120630 0%, #1C0A4A 50%, #120630 100%);
padding: 44px 0;
border-bottom: 1px solid rgba(249, 115, 22, .15);
position: relative;
overflow: hidden;
}

.footer-services-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
}

.fss-col-title {
font-size: 15px;
font-weight: 800;
color: #fff;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(249, 115, 22, .3);
display: flex;
align-items: center;
gap: 8px;
}

.fss-col-title i {
color: var(--accent);
font-size: 13px;
}

.fss-links {
list-style: none;
padding: 0;
margin: 0;
}

.fss-links li {
margin-bottom: 10px;
}

.fss-links a {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .6);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all .2s;
line-height: 1.4;
}

.fss-links a i {
color: var(--accent);
font-size: 10px;
flex-shrink: 0;
transition: transform .2s;
}

.fss-links a:hover {
color: var(--accent-2);
}

.fss-links a:hover i {
transform: translateX(3px);
}

.footer-main {
background: linear-gradient(180deg, #0d0420 0%, #080210 100%);
padding: 56px 0 36px;
position: relative;
overflow: hidden;
}

.footer-main::before {
content: '';
position: absolute;
width: 600px;
height: 300px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(61, 18, 120, .18) 0%, transparent 70%);
top: 0;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}

.footer-brand-logo {
height: 42px;
width: auto;
margin-bottom: 18px;
filter: brightness(0) invert(1);
opacity: .9;
}

.footer-brand-desc {
font-size: 13.5px;
line-height: 1.75;
color: rgba(255, 255, 255, .45);
margin-bottom: 24px;
max-width: 260px;
}

.footer-newsletter {
display: flex;
gap: 0;
margin-bottom: 24px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .1);
}

.footer-newsletter input {
flex: 1;
background: rgba(255, 255, 255, .06);
border: none;
outline: none;
padding: 10px 14px;
font-size: 12.5px;
color: #fff;
font-family: inherit;
}

.footer-newsletter input::placeholder {
color: rgba(255, 255, 255, .3);
}

.footer-newsletter button {
background: linear-gradient(135deg, var(--accent), #ea6c0a);
border: none;
padding: 10px 16px;
color: #fff;
font-size: 13px;
cursor: pointer;
transition: opacity .2s;
flex-shrink: 0;
}

.footer-newsletter button:hover {
opacity: .88;
}

.footer-socials {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.footer-social-btn {
width: 38px;
height: 38px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .1);
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .6);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
text-decoration: none;
transition: all .22s;
}

.footer-social-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(249, 115, 22, .3);
}

.footer-col-title {
font-size: 13px;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1.2px;
display: flex;
align-items: center;
gap: 8px;
}

.footer-col-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(249, 115, 22, .4), transparent);
}

.footer-nav-links {
list-style: none;
padding: 0;
margin: 0;
}

.footer-nav-links li {
margin-bottom: 11px;
}

.footer-nav-links a {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, .5);
text-decoration: none;
font-size: 13.5px;
font-weight: 400;
transition: all .2s;
line-height: 1;
}

.footer-nav-links a i {
font-size: 9px;
color: var(--accent);
flex-shrink: 0;
transition: transform .2s;
}

.footer-nav-links a:hover {
color: #fff;
padding-left: 4px;
}

.footer-nav-links a:hover i {
transform: translateX(2px);
}

.footer-address-item {
display: flex;
gap: 12px;
margin-bottom: 16px;
align-items: flex-start;
}

.footer-addr-icon {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(249, 115, 22, .1);
border: 1px solid rgba(249, 115, 22, .2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
color: var(--accent);
margin-top: 1px;
}

.footer-addr-text {
font-size: 13px;
color: rgba(255, 255, 255, .5);
line-height: 1.6;
}

.footer-addr-text a {
color: rgba(255, 255, 255, .5);
text-decoration: none;
transition: color .2s;
}

.footer-addr-text a:hover {
color: var(--accent);
}

.footer-addr-label {
font-size: 10.5px;
font-weight: 700;
color: rgba(255, 255, 255, .25);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}

.footer-app-btns {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 20px;
}

.footer-app-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 10px;
padding: 8px 14px;
text-decoration: none;
transition: all .2s;
color: #fff;
}

.footer-app-btn:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .2);
color: #fff;
transform: translateY(-1px);
}

.footer-app-btn i {
font-size: 20px;
color: rgba(255, 255, 255, .7);
}

.footer-app-btn-text {
line-height: 1.2;
}

.footer-app-btn-sub {
font-size: 9.5px;
color: rgba(255, 255, 255, .4);
display: block;
}

.footer-app-btn-name {
font-size: 12.5px;
font-weight: 700;
}

.footer-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
margin: 36px 0 24px;
}

.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}

.footer-copy {
font-size: 12.5px;
color: rgba(255, 255, 255, .3);
}

.footer-copy span {
color: var(--accent);
font-weight: 600;
}

.footer-bottom-links {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

.footer-bottom-links a {
font-size: 12px;
color: rgba(255, 255, 255, .3);
text-decoration: none;
transition: color .2s;
}

.footer-bottom-links a:hover {
color: var(--accent);
}

.footer-badges {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 4px;
}

.footer-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 6px;
padding: 4px 10px;
font-size: 10.5px;
color: rgba(255, 255, 255, .4);
font-weight: 500;
}

.footer-badge i {
color: var(--accent-2);
font-size: 11px;
}

@media (max-width: 767px) {
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}

.footer-services-strip .col-md-4+.col-md-4 {
margin-top: 28px;
}
}