/*==========================================================
BillionaireSRC
Premium UI Framework v1.0
Author : OpenAI
==========================================================*/

/*==========================================================
Google Fonts
==========================================================*/

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

/*==========================================================
CSS Variables
==========================================================*/

:root{

--primary:#8A0F73;
--secondary:#C81E89;
--gold:#D4AF37;
--gold-light:#FFD54F;
--gold-dark:#B8860B;

--white:#ffffff;
--black:#121212;

--text:#444444;
--gray:#7b7b7b;

--bg:#fafafa;
--glass:rgba(255,255,255,.18);

--radius:18px;
--radius-sm:10px;
--radius-lg:35px;

--shadow:

0 10px 40px rgba(0,0,0,.08);

--shadow-lg:

0 20px 60px rgba(0,0,0,.15);

--transition:.35s ease;

--gradient:

linear-gradient(
135deg,
#8A0F73,
#C81E89,
#D4AF37);

}

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:Poppins,sans-serif;

background:#fff;

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#fafafa;

}

::-webkit-scrollbar-thumb{

background:var(--gradient);

border-radius:50px;

}



.navbar{

transition:.4s;

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

backdrop-filter:blur(20px);

}

.navbar.scrolled{

background:#fff;

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

}

.nav-link{

position:relative;

font-weight:600;

padding:10px 18px !important;

}

.nav-link::after{

content:'';

position:absolute;

left:18px;

bottom:4px;

width:0;

height:3px;

background:linear-gradient(90deg,#D4AF37,#8A0F73);

transition:.35s;

border-radius:50px;

}

.nav-link:hover::after,
.nav-link.active::after{

width:55%;

}

.dropdown-menu{

padding:15px;

min-width:240px;

}

.dropdown-item{

padding:12px 20px;

border-radius:12px;

transition:.3s;

}

.dropdown-item:hover{

background:#faf3df;

padding-left:28px;

}

.navbar-toggler{

font-size:18px;

}

.btn-gold{

background:linear-gradient(135deg,#D4AF37,#8A0F73);

color:#fff;

border-radius:50px;

padding:10px 28px;

border:none;

}




/*==========================================================
Selection
==========================================================*/

::selection{

background:var(--gold);

color:#000;

}

/*==========================================================
Typography
==========================================================*/

h1,h2,h3,h4,h5{

font-family:Cinzel,serif;

font-weight:700;

color:#222;

}

p{

font-size:15px;

line-height:1.8;

color:#666;

}

/*==========================================================
Links
==========================================================*/

a{

text-decoration:none;

transition:.35s;

}

a:hover{

color:var(--gold);

}

/*==========================================================
Container
==========================================================*/

.container-xl{

max-width:1320px;

}

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

.btn-gold{

background:var(--gradient);

color:#fff;

padding:15px 40px;

border:none;

border-radius:50px;

font-weight:600;

transition:.35s;

box-shadow:var(--shadow);

}

.btn-gold:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-lg);

color:#fff;

}

.btn-outline-gold{

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

padding:15px 40px;

background:none;

border-radius:50px;

color:var(--gold);

font-weight:600;

transition:.35s;

}

.btn-outline-gold:hover{

background:var(--gradient);

color:#fff;

}

/*==========================================================
Glass Card
==========================================================*/

.glass{

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

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

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

border-radius:25px;

box-shadow:var(--shadow);

transition:.35s;

}

.glass:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}

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

section{

padding:100px 0;

position:relative;

}

/*==========================================================
Titles
==========================================================*/

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:46px;

margin-bottom:15px;

}

.section-title span{

color:var(--gold);

}

.section-title p{

max-width:700px;

margin:auto;

}

/*==========================================================
Loader
==========================================================*/

#pageLoader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.loader-container{

text-align:center;

}

.loader-logo{

width:130px;

animation:float 3s infinite;

}

.loader-ring{

width:160px;

height:160px;

border:6px solid rgba(212,175,55,.2);

border-top:6px solid var(--gold);

border-radius:50%;

margin:25px auto;

animation:spin 1s linear infinite;

}

.loader-text h2{

font-size:34px;

margin-top:15px;

}

.loader-text p{

color:var(--primary);

font-weight:600;

letter-spacing:3px;

}

/*==========================================================
Cursor
==========================================================*/

.cursor-dot{

position:fixed;

width:8px;

height:8px;

background:var(--gold);

border-radius:50%;

pointer-events:none;

z-index:99999;

}

.cursor-outline{

position:fixed;

width:40px;

height:40px;

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

border-radius:50%;

pointer-events:none;

transition:.05s;

z-index:99998;

}

/*==========================================================
Scroll Progress
==========================================================*/

#scrollProgress{

position:fixed;

top:0;

left:0;

width:0;

height:5px;

background:var(--gradient);

z-index:99999;

}

/*==========================================================
Background Glow
==========================================================*/

.bg-glow{

position:absolute;

filter:blur(120px);

opacity:.25;

z-index:-1;

}

.glow-1{

width:400px;

height:400px;

background:#d400ff;

left:-150px;

top:-100px;

}

.glow-2{

width:500px;

height:500px;

background:#ffd700;

right:-150px;

top:300px;

}

.glow-3{

width:350px;

height:350px;

background:#ff66c4;

left:40%;

bottom:-100px;

}

/*==========================================================
Navbar
==========================================================*/

.navbar{

padding:20px 0;

transition:.4s;

}

.navbar.scrolled{

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

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.navbar-brand img{

height:65px;
border-radius: 50px;

}

.nav-link{

font-weight:600;

margin-left:20px;

color:#222;

}

.nav-link:hover{

color:var(--gold);

}

/*==========================================================
Hero
==========================================================*/

.hero{

height:100vh;

display:flex;

align-items:center;

position:relative;

overflow:hidden;

background-size:cover;

background-position:center;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.45);

}

.hero-content{

position:relative;

z-index:5;

color:#fff;

}

.hero-content h1{

font-size:72px;

color:#fff;

margin-bottom:25px;

}

.hero-content p{

font-size:20px;

color:#f3f3f3;

max-width:650px;

}

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

.card-premium{

background:#fff;

border:none;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.card-premium img{

width:100%;

transition:.5s;

}

.card-premium:hover img{

transform:scale(1.08);

}

.card-premium:hover{

transform:translateY(-10px);

}

/*==========================================================
Images
==========================================================*/

.img-hover{

overflow:hidden;

border-radius:20px;

}

.img-hover img{

transition:.5s;

}

.img-hover:hover img{

transform:scale(1.1);

}

/*==========================================================
Footer
==========================================================*/

footer{

background:#101010;

color:#ddd;

padding:80px 0 20px;

}

footer h5{

color:#fff;

margin-bottom:20px;

}

footer a{

color:#bbb;

}

footer a:hover{

color:var(--gold);

}

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

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes float{

50%{

transform:translateY(-10px);

}

}

.fade-up{

animation:fadeUp 1s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:none;

}

}


/*=========================
Footer
==========================*/

.footer-section{

background:#0f0f14;

color:#bfbfbf;

padding:90px 0 30px;

position:relative;

overflow:hidden;

}

.footer-section::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#8A0F73;

filter:blur(180px);

top:-200px;

right:-150px;

opacity:.18;

}

.footer-section h5{

color:#fff;

margin-bottom:25px;

font-weight:700;

}

.footer-links{

list-style:none;

padding:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#cfcfcf;

transition:.35s;

}

.footer-links a:hover{

padding-left:10px;

color:#D4AF37;

}

.social-icons{

display:flex;

gap:12px;

}

.social-icons a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:50%;

color:#fff;

transition:.35s;

}

.social-icons a:hover{

background:linear-gradient(135deg,#8A0F73,#D4AF37);

transform:translateY(-6px);

}

#backTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#8A0F73,#D4AF37);

color:#fff;

display:none;

z-index:999;

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

}

.floating-whatsapp,

.floating-telegram,

.floating-call{

position:fixed;

left:25px;

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

color:#fff;

font-size:22px;

z-index:999;

transition:.35s;

}

.floating-whatsapp{

bottom:30px;

background:#25D366;

}

.floating-telegram{

bottom:95px;

background:#229ED9;

}

.floating-call{

bottom:160px;

background:#D4AF37;

}

.floating-whatsapp:hover,

.floating-telegram:hover,

.floating-call:hover{

transform:scale(1.12);

}

.dashboard-banner{

padding:120px 0;

background:linear-gradient(135deg,#8A0F73,#C81E89,#D4AF37);

color:#fff;

}

.dashboard-profile{

width:170px;

height:170px;

border-radius:50%;

object-fit:cover;

border:6px solid rgba(255,255,255,.3);

}

.sidebar-profile{

width:110px;

height:110px;

border-radius:50%;

object-fit:cover;

}

.dashboard-sidebar{

background:#fff;

border-radius:20px;

padding:30px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.dashboard-menu{

list-style:none;

padding:0;

margin:0;

}

.dashboard-menu li{

margin-bottom:10px;

}

.dashboard-menu li a{

display:block;

padding:14px 18px;

border-radius:12px;

transition:.3s;

color:#333;

text-decoration:none;

}

.dashboard-menu li a:hover{

background:#8A0F73;

color:#fff;

}

.dashboard-card{

padding:30px;

border-radius:20px;

background:#fff;

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

text-align:center;

transition:.35s;

}

.dashboard-card:hover{

transform:translateY(-10px);

}

.dashboard-card i{

font-size:40px;

color:#D4AF37;

margin-bottom:20px;

}