/*==========================================================
CHRONTUBE BUSINESS CENTER Version 1.0
MASTER STYLESHEET


==========================================================*/


/*==========================================================
GOOGLE FONTS
==========================================================*/

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


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

:root{

--gold:#d4af37;
--gold-light:#f5d76e;
--gold-dark:#8d6b00;

--black:#000000;
--black-soft:#080808;

--charcoal:#121212;

--panel:#191919;

--panel-light:#232323;

--white:#ffffff;

--gray:#d8d8d8;

--gray-dark:#7b7b7b;

--green:#1aa54b;

--red:#d82323;

--radius:18px;

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

--transition:.45s ease;

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

background:#000;

color:#fff;

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

overflow-x:hidden;

line-height:1.65;

}


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

h1,h2,h3,h4,h5{

font-family:'Merriweather',serif;

font-weight:700;

}

h1{

font-size:4rem;

line-height:1.05;

}

h2{

font-size:3rem;

}

h3{

font-size:2rem;

}

p{

font-size:1.05rem;

color:#d9d9d9;

}


/*==========================================================
LINKS
==========================================================*/

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}


/*==========================================================
IMAGES
==========================================================*/

img{

display:block;

max-width:100%;

}


/*==========================================================
MAIN
==========================================================*/

main{

position:relative;

z-index:5;

}


/*==========================================================
BACKGROUND ENGINE
==========================================================*/

.backgroundEngine{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

z-index:-5;

background:#000;

}


.bgSlide{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-size:cover;

background-position:center;

opacity:0;

transform:scale(1);

transition:opacity 2s ease;

animation:kenburns 28s linear infinite;

}


.bgSlide.active{

opacity:1;

}


.overlayDark{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

}


.goldGradient{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:
linear-gradient(
135deg,
rgba(212,175,55,.18),
transparent 45%,
rgba(0,0,0,.40));

mix-blend-mode:screen;

}


/*==========================================================
LOADING SCREEN
==========================================================*/

#loadingScreen{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#000;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:999999;

}


.loaderLogo img{

width:240px;

margin-bottom:30px;

}


.loaderLogo h2{

font-size:1.8rem;

color:var(--gold);

letter-spacing:3px;

text-transform:uppercase;

}


.goldLoader{

margin-top:45px;

width:320px;

height:6px;

background:#222;

border-radius:30px;

overflow:hidden;

position:relative;

}


.goldLoader::before{

content:"";

position:absolute;

top:0;

left:-50%;

width:50%;

height:100%;

background:linear-gradient(
90deg,
transparent,
var(--gold),
transparent);

animation:loaderMove 1.8s linear infinite;

}


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

#mainHeader{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

transition:.45s;

}


.headerGlass{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 4%;

backdrop-filter:blur(20px);

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

border-bottom:1px solid rgba(255,255,255,.08);

}


.headerLogo{

width:220px;

transition:.4s;

}


.desktopNav{

display:flex;

gap:34px;

align-items:center;

}


.desktopNav a{

font-size:.95rem;

font-weight:500;

color:#fff;

position:relative;

}


.desktopNav a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--gold);

transition:.35s;

}


.desktopNav a:hover{

color:var(--gold-light);

}


.desktopNav a:hover::after{

width:100%;

}


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

.headerRight{

display:flex;

align-items:center;

gap:15px;

}


.navButton{

padding:14px 26px;

border-radius:50px;

font-weight:700;

transition:.35s;

}


.goldBtn{

background:var(--gold);

color:#000;

}


.goldBtn:hover{

transform:translateY(-4px);

box-shadow:0 0 35px rgba(212,175,55,.65);

}


.glassBtn{

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

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

color:#fff;

backdrop-filter:blur(15px);

}


.glassBtn:hover{

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

}


.mobileMenuButton{

display:none;

background:none;

border:none;

cursor:pointer;

}


.mobileMenuButton span{

display:block;

width:28px;

height:3px;

margin:6px 0;

background:#fff;

border-radius:20px;

}


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

@keyframes loaderMove{

0%{

left:-50%;

}

100%{

left:120%;

}

}


@keyframes kenburns{

0%{

transform:scale(1);

}

100%{

transform:scale(1.18);

}

}


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

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#080808;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:50px;

}

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

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:170px 7% 120px;

overflow:hidden;

z-index:10;

}


.heroContent{

position:relative;

max-width:900px;

text-align:center;

animation:heroFade 1.3s ease;

}


.heroLogo{

margin-bottom:40px;

display:flex;

justify-content:center;

}


.heroLogo img{

width:340px;

filter:
drop-shadow(0 0 30px rgba(212,175,55,.35));

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

}


.liveBadge{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 24px;

border-radius:50px;

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

backdrop-filter:blur(20px);

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

font-size:.85rem;

letter-spacing:2px;

font-weight:700;

text-transform:uppercase;

margin-bottom:35px;

color:#fff;

}


.liveBadge i{

font-size:.75rem;

color:#20d94b;

animation:pulse 1.3s infinite;

}


.hero h1{

font-size:5.2rem;

line-height:1.02;

margin-bottom:30px;

font-weight:900;

}


.hero h1 span{

color:var(--gold);

text-shadow:

0 0 15px rgba(212,175,55,.45),

0 0 35px rgba(212,175,55,.25);

}


.hero h3{

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

font-weight:400;

font-size:1.8rem;

color:#f0f0f0;

margin-bottom:35px;

}


.hero p{

max-width:760px;

margin:auto;

font-size:1.2rem;

line-height:1.9;

color:#d5d5d5;

margin-bottom:55px;

}


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

.heroButtons{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

}


.goldButton{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 42px;

background:linear-gradient(

135deg,

#f8de7f,

#d4af37);

color:#000;

border-radius:60px;

font-weight:800;

font-size:1rem;

letter-spacing:.5px;

box-shadow:

0 15px 35px rgba(212,175,55,.35);

transition:.35s;

}


.goldButton:hover{

transform:translateY(-6px) scale(1.04);

box-shadow:

0 0 45px rgba(212,175,55,.70);

}


.glassButton{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 42px;

border-radius:60px;

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

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

backdrop-filter:blur(18px);

color:#fff;

font-weight:700;

transition:.35s;

}


.glassButton:hover{

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

transform:translateY(-6px);

}


/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scrollIndicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

}


.scrollIndicator span{

display:block;

width:34px;

height:58px;

border-radius:30px;

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

position:relative;

}


.scrollIndicator span::before{

content:"";

position:absolute;

left:50%;

transform:translateX(-50%);

width:7px;

height:11px;

border-radius:50px;

background:var(--gold);

top:9px;

animation:scrollWheel 2s infinite;

}


/*==========================================================
GLOWING ORBS
==========================================================*/

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.22),

transparent 72%);

top:-220px;

right:-160px;

animation:floatGlow 12s ease-in-out infinite;

filter:blur(10px);

}


.hero::after{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.05),

transparent 70%);

bottom:-260px;

left:-180px;

animation:floatGlowReverse 16s ease-in-out infinite;

}


/*==========================================================
PARTICLES
==========================================================*/

.heroParticles{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

}


.heroParticles span{

position:absolute;

display:block;

width:6px;

height:6px;

background:rgba(212,175,55,.55);

border-radius:50%;

animation:particleRise linear infinite;

}


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

@keyframes heroFade{

0%{

opacity:0;

transform:translateY(70px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}


@keyframes pulse{

0%{

opacity:1;

transform:scale(1);

}

50%{

opacity:.4;

transform:scale(.65);

}

100%{

opacity:1;

transform:scale(1);

}

}


@keyframes scrollWheel{

0%{

opacity:0;

top:8px;

}

40%{

opacity:1;

}

100%{

opacity:0;

top:34px;

}

}


@keyframes floatGlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-45px);

}

100%{

transform:translateY(0);

}

}


@keyframes floatGlowReverse{

0%{

transform:translateY(0);

}

50%{

transform:translateY(40px);

}

100%{

transform:translateY(0);

}

}


@keyframes particleRise{

0%{

transform:translateY(100vh) scale(.2);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-120px) scale(1.2);

opacity:0;

}

}


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

@media(max-width:1200px){

.hero h1{

font-size:4.5rem;

}

}

@media(max-width:992px){

.hero{

padding:150px 40px 100px;

}

.heroLogo img{

width:270px;

}

.hero h1{

font-size:3.7rem;

}

.hero h3{

font-size:1.5rem;

}

}

@media(max-width:768px){

.heroButtons{

flex-direction:column;

}

.hero h1{

font-size:3rem;

}

.hero h3{

font-size:1.3rem;

}

.hero p{

font-size:1rem;

}

.goldButton,

.glassButton{

width:100%;

max-width:360px;

}

}

@media(max-width:576px){

.hero{

padding:130px 25px 90px;

}

.heroLogo img{

width:210px;

}

.hero h1{

font-size:2.4rem;

}

.liveBadge{

font-size:.72rem;

padding:10px 18px;

}

}


/*==========================================================
 STATISTICS • LAYOUTS • SECTION FRAMEWORK 
==========================================================*/


/*==========================================================
GLOBAL SECTION
==========================================================*/

.section{

position:relative;

padding:120px 7%;

z-index:10;

}

.sectionHeader{

max-width:900px;

margin:0 auto 70px;

text-align:center;

}

.sectionHeader small{

display:inline-block;

padding:10px 22px;

margin-bottom:22px;

background:rgba(212,175,55,.12);

border:1px solid rgba(212,175,55,.35);

border-radius:40px;

color:var(--gold);

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}

.sectionHeader h2{

font-size:3rem;

margin-bottom:22px;

}

.sectionHeader p{

font-size:1.15rem;

max-width:760px;

margin:auto;

}


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

.statsSection{

padding:100px 7%;

position:relative;

z-index:12;

}

.statsGrid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}


/*==========================================================
STAT CARD
==========================================================*/

.statCard{

position:relative;

padding:42px;

overflow:hidden;

border-radius:24px;

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

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

backdrop-filter:blur(22px);

transition:.45s;

box-shadow:

0 18px 45px rgba(0,0,0,.45);

}

.statCard:hover{

transform:

translateY(-10px)

scale(1.03);

border-color:rgba(212,175,55,.45);

box-shadow:

0 0 45px rgba(212,175,55,.28);

}

.statCard::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.14),

transparent);

transform:skewX(-25deg);

transition:1s;

}

.statCard:hover::before{

left:140%;

}

.counter{

font-size:3.4rem;

font-weight:900;

color:var(--gold);

margin-bottom:15px;

line-height:1;

}

.statCard h4{

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

font-size:1rem;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#f4f4f4;

}


/*==========================================================
SECTION GRID
==========================================================*/

.grid2{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:50px;

align-items:center;

}

.grid3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.grid4{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}


/*==========================================================
CONTENT WRAPPER
==========================================================*/

.contentWrapper{

max-width:1600px;

margin:auto;

position:relative;

}


/*==========================================================
GLASS PANEL
==========================================================*/

.glassPanel{

position:relative;

padding:50px;

border-radius:28px;

background:rgba(20,20,20,.72);

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

backdrop-filter:blur(24px);

overflow:hidden;

transition:.45s;

}

.glassPanel:hover{

border-color:rgba(212,175,55,.40);

transform:translateY(-8px);

}

.glassPanel::after{

content:"";

position:absolute;

top:-150px;

right:-150px;

width:300px;

height:300px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(212,175,55,.12),

transparent);

}


/*==========================================================
LUXURY DIVIDER
==========================================================*/

.goldDivider{

width:160px;

height:4px;

margin:25px auto;

border-radius:20px;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent);

}


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

.featureList{

display:flex;

flex-direction:column;

gap:24px;

margin-top:35px;

}

.featureItem{

display:flex;

align-items:center;

gap:20px;

font-size:1.05rem;

}

.featureItem i{

width:54px;

height:54px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(212,175,55,.12);

color:var(--gold);

font-size:1.2rem;

}


/*==========================================================
IMAGE FRAME
==========================================================*/

.imageFrame{

position:relative;

overflow:hidden;

border-radius:26px;

box-shadow:

0 30px 60px rgba(0,0,0,.55);

}

.imageFrame img{

width:100%;

transition:1.2s;

}

.imageFrame:hover img{

transform:scale(1.08);

}

.imageFrame::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

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

}


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

.mt20{margin-top:20px;}

.mt30{margin-top:30px;}

.mt40{margin-top:40px;}

.mt50{margin-top:50px;}

.mt60{margin-top:60px;}

.mb20{margin-bottom:20px;}

.mb30{margin-bottom:30px;}

.mb40{margin-bottom:40px;}

.mb50{margin-bottom:50px;}

.textCenter{

text-align:center;

}

.gold{

color:var(--gold);

}


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

@media(max-width:1200px){

.statsGrid{

grid-template-columns:repeat(2,1fr);

}

.grid4{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.grid2,

.grid3{

grid-template-columns:1fr;

}

.section{

padding:90px 40px;

}

.sectionHeader h2{

font-size:2.5rem;

}

}

@media(max-width:768px){

.statsGrid{

grid-template-columns:1fr;

}

.grid4{

grid-template-columns:1fr;

}

.section{

padding:80px 25px;

}

.counter{

font-size:2.7rem;

}

.sectionHeader h2{

font-size:2.1rem;

}

.sectionHeader p{

font-size:1rem;

}

.glassPanel{

padding:35px;

}

}

/*==========================================================
 
LUXURY CARDS • NETFLIX ROWS • CONTENT PANELS
 
==========================================================*/


/*==========================================================
CONTENT ROW
==========================================================*/

.contentRow{

position:relative;

margin:90px 0;

}

.contentRowHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.contentRowHeader h2{

font-size:2.4rem;

color:#fff;

}

.contentRowHeader a{

color:var(--gold);

font-weight:700;

transition:.35s;

}

.contentRowHeader a:hover{

letter-spacing:1px;

}


/*==========================================================
NETFLIX STYLE ROW
==========================================================*/

.netflixRow{

display:flex;

gap:28px;

overflow-x:auto;

overflow-y:hidden;

padding:15px 5px 30px;

scroll-behavior:smooth;

}

.netflixRow::-webkit-scrollbar{

height:10px;

}

.netflixRow::-webkit-scrollbar-thumb{

background:rgba(212,175,55,.55);

border-radius:30px;

}


/*==========================================================
PREMIUM CARD
==========================================================*/

.premiumCard{

position:relative;

min-width:360px;

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

border-radius:24px;

overflow:hidden;

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

backdrop-filter:blur(22px);

transition:.45s;

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

}

.premiumCard:hover{

transform:

translateY(-10px)

scale(1.04);

border-color:rgba(212,175,55,.45);

box-shadow:

0 0 45px rgba(212,175,55,.30);

}


.premiumCardImage{

height:240px;

overflow:hidden;

position:relative;

}

.premiumCardImage img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.premiumCard:hover .premiumCardImage img{

transform:scale(1.12);

}

.premiumCardImage::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.55));

}


.premiumCardBody{

padding:30px;

}

.premiumCardBody h3{

font-size:1.5rem;

margin-bottom:18px;

}

.premiumCardBody p{

font-size:1rem;

color:#d6d6d6;

margin-bottom:25px;

}


/*==========================================================
FEATURE CARD
==========================================================*/

.featureCard{

position:relative;

padding:40px;

background:rgba(20,20,20,.82);

border-radius:24px;

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

transition:.4s;

overflow:hidden;

}

.featureCard:hover{

transform:

translateY(-10px);

border-color:rgba(212,175,55,.45);

}

.featureCard::before{

content:"";

position:absolute;

top:-140px;

right:-140px;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.18),

transparent);

}

.featureIcon{

width:82px;

height:82px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

margin-bottom:28px;

background:

linear-gradient(

135deg,

rgba(212,175,55,.18),

rgba(255,255,255,.04));

font-size:2rem;

color:var(--gold);

}

.featureCard h3{

margin-bottom:18px;

font-size:1.6rem;

}

.featureCard p{

margin-bottom:22px;

}


/*==========================================================
PRICING CARD
==========================================================*/

.pricingCard{

position:relative;

padding:45px;

background:#111;

border-radius:28px;

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

transition:.45s;

overflow:hidden;

}

.pricingCard:hover{

transform:

translateY(-12px)

scale(1.03);

border-color:var(--gold);

}

.pricingCard::after{

content:"";

position:absolute;

top:-180px;

left:-120px;

width:340px;

height:340px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(212,175,55,.12),

transparent);

}

.pricingTitle{

font-size:1.8rem;

margin-bottom:20px;

}

.pricingAmount{

font-size:3.6rem;

font-weight:900;

color:var(--gold);

margin-bottom:25px;

}

.pricingAmount span{

font-size:1rem;

color:#ddd;

}

.pricingFeatures{

display:flex;

flex-direction:column;

gap:18px;

margin:35px 0;

}

.pricingFeatures div{

display:flex;

align-items:center;

gap:14px;

}

.pricingFeatures i{

color:#22d64b;

}


/*==========================================================
PACKAGE BADGE
==========================================================*/

.packageBadge{

position:absolute;

top:25px;

right:-45px;

padding:10px 60px;

background:var(--gold);

color:#000;

font-size:.8rem;

font-weight:800;

transform:rotate(45deg);

text-transform:uppercase;

}


/*==========================================================
GLOW BUTTON
==========================================================*/

.glowButton{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:60px;

background:linear-gradient(

135deg,

#ffe28a,

#d4af37);

color:#000;

font-weight:800;

transition:.35s;

}

.glowButton:hover{

transform:translateY(-5px);

box-shadow:

0 0 40px rgba(212,175,55,.65);

}


/*==========================================================
HOVER LIGHT SWEEP
==========================================================*/

.hoverSweep{

position:relative;

overflow:hidden;

}

.hoverSweep::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.16),

transparent);

transform:skewX(-25deg);

transition:1.2s;

}

.hoverSweep:hover::before{

left:150%;

}


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

@media(max-width:1200px){

.premiumCard{

min-width:320px;

}

}

@media(max-width:992px){

.contentRowHeader{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.pricingAmount{

font-size:3rem;

}

}

@media(max-width:768px){

.netflixRow{

gap:20px;

}

.premiumCard{

min-width:280px;

}

.featureCard,

.pricingCard{

padding:30px;

}

}


/*==========================================================
 
TESTIMONIALS • CTA • FOOTER BANNER • UTILITIES
==========================================================*/


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

.testimonialGrid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:60px;

}

.testimonialCard{

position:relative;

padding:40px;

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

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

border-radius:26px;

overflow:hidden;

transition:.4s;

backdrop-filter:blur(18px);

}

.testimonialCard:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,.45);

box-shadow:0 0 40px rgba(212,175,55,.20);

}

.testimonialQuote{

font-size:1.1rem;

line-height:1.9;

margin-bottom:35px;

color:#dddddd;

font-style:italic;

}

.testimonialAuthor{

display:flex;

align-items:center;

gap:18px;

}

.testimonialAuthor img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

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

}

.authorInfo h4{

font-size:1.1rem;

margin-bottom:5px;

}

.authorInfo span{

font-size:.9rem;

color:#bbbbbb;

}


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

.ctaSection{

padding:120px 7%;

text-align:center;

position:relative;

overflow:hidden;

}

.ctaBox{

max-width:1100px;

margin:auto;

padding:70px;

border-radius:30px;

background:

linear-gradient(

135deg,

rgba(212,175,55,.18),

rgba(20,20,20,.95));

border:1px solid rgba(212,175,55,.35);

backdrop-filter:blur(20px);

}

.ctaBox h2{

font-size:3rem;

margin-bottom:25px;

}

.ctaBox p{

font-size:1.15rem;

max-width:760px;

margin:auto auto 40px;

}

.ctaButtons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}


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

.footerBanner{

padding:70px 7%;

text-align:center;

background:#080808;

border-top:1px solid rgba(255,255,255,.08);

}

.footerBanner img{

width:220px;

margin:auto auto 25px;

}

.footerBanner p{

color:#bfbfbf;

font-size:1rem;

}

.footerLinks{

margin-top:30px;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.footerLinks a{

color:#ffffff;

transition:.3s;

}

.footerLinks a:hover{

color:var(--gold);

}


/*==========================================================
FLOATING ACTION BUTTON
==========================================================*/

.floatingAction{

position:fixed;

right:30px;

bottom:30px;

width:70px;

height:70px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(

135deg,

#ffe28a,

#d4af37);

color:#000;

font-size:1.6rem;

cursor:pointer;

box-shadow:0 0 40px rgba(212,175,55,.45);

z-index:999;

transition:.35s;

}

.floatingAction:hover{

transform:scale(1.08);

}


/*==========================================================
TOAST
==========================================================*/

.toast{

position:fixed;

left:40px;

bottom:40px;

padding:18px 28px;

background:#171717;

border-left:5px solid var(--gold);

border-radius:12px;

color:#fff;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:9999;

}

.toast.show{

opacity:1;

visibility:visible;

}


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

.fadeUp{

opacity:0;

transform:translateY(60px);

transition:.8s;

}

.fadeUp.show{

opacity:1;

transform:translateY(0);

}

.fadeLeft{

opacity:0;

transform:translateX(-70px);

transition:.8s;

}

.fadeLeft.show{

opacity:1;

transform:translateX(0);

}

.fadeRight{

opacity:0;

transform:translateX(70px);

transition:.8s;

}

.fadeRight.show{

opacity:1;

transform:translateX(0);

}

.scaleIn{

opacity:0;

transform:scale(.9);

transition:.8s;

}

.scaleIn.show{

opacity:1;

transform:scale(1);

}


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

.flex{

display:flex;

}

.flexCenter{

display:flex;

justify-content:center;

align-items:center;

}

.spaceBetween{

display:flex;

justify-content:space-between;

align-items:center;

}

.w100{

width:100%;

}

.hidden{

display:none;

}

.relative{

position:relative;

}

.absolute{

position:absolute;

}

.round{

border-radius:50%;

}


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

@media(max-width:1200px){

.testimonialGrid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.ctaBox{

padding:50px;

}

.ctaBox h2{

font-size:2.5rem;

}

}

@media(max-width:768px){

.testimonialGrid{

grid-template-columns:1fr;

}

.ctaButtons{

flex-direction:column;

align-items:center;

}

.footerLinks{

flex-direction:column;

gap:15px;

}

.floatingAction{

width:60px;

height:60px;

font-size:1.3rem;

right:20px;

bottom:20px;

}

}

@media(max-width:576px){

.ctaBox{

padding:35px 25px;

}

.ctaBox h2{

font-size:2rem;

}

.footerBanner img{

width:180px;

}

}