body { background: #f8f9fa; font-family: 'Segoe UI', sans-serif; }
.card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s; }
.card:hover { transform: translateY(-5px); }
.btn { border-radius: 25px; transition: background 0.3s; }
/* Progress bars for rank */
.progress-bar { background: linear-gradient(90deg, #ff8c00, #ff0080); }
.sidebar .list-group-item { transition: background 0.2s; }
.sidebar .list-group-item:hover { background: #495057 !important; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
.animate-card { animation: fadeInUp 0.5s ease-out; }
/*=========================================================
AJ TRADING ACADEMY
STYLE.CSS
PART 1
=========================================================*/

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

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

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

:root{

--primary:#0B4DBB;
--secondary:#2EAD5B;
--cream:#EFD2A3;
--cream-light:#F9F5EE;
--dark:#1F2937;
--gray:#5B6472;
--border:#D8C9AE;
--white:#ffffff;

--radius:20px;
--radius-lg:30px;

--shadow-sm:0 10px 20px rgba(0,0,0,.05);
--shadow:0 20px 40px rgba(0,0,0,.08);
--shadow-lg:0 35px 70px rgba(0,0,0,.15);

--transition:.35s ease;

}

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
background:var(--cream-light);
color:var(--dark);
overflow-x:hidden;
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

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

}

ul{

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

}

section{

position:relative;

}

.container{

position:relative;
z-index:2;

}

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

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

font-family:'Poppins',sans-serif;
font-weight:700;
line-height:1.2;

}

.section{

padding:120px 0;

}

.section-subtitle{

display:block;
/* width: 20%; */
padding:10px 22px;
border-radius:50px;
/* background:rgba(11,77,187,.08); */
color:var(--primary);
font-size:14px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:20px;

}

.section-title{

font-size:48px;
font-weight:800;
margin-bottom:20px;

}

.section-text{

font-size:18px;
color:var(--gray);
max-width:760px;

}

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

.bg-white{

background:#fff;

}

.bg-cream{

background:var(--cream-light);

}

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

.btn-aj{

display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:100px;
font-size:16px;
font-weight:600;
transition:.35s;
cursor:pointer;

}

.btn-blue{

background:linear-gradient(135deg,#0B4DBB,#1C6EFF);
color:#fff;
box-shadow:0 15px 35px rgba(11,77,187,.35);

}

.btn-blue:hover{

transform:translateY(-4px);
color:#fff;
box-shadow:0 25px 45px rgba(11,77,187,.45);

}

.btn-outline-aj{

border:2px solid var(--primary);
color:var(--primary);
background:#fff;

}

.btn-outline-aj:hover{

background:var(--primary);
color:#fff;

}

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

.card-aj{

background:#fff;
padding:40px;
border-radius:28px;
box-shadow:var(--shadow);
transition:.35s;
height:100%;

}

.card-aj:hover{

transform:translateY(-10px);
box-shadow:var(--shadow-lg);

}

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

.icon-box{

width:80px;
height:80px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#0B4DBB,#2EAD5B);
color:#fff;
font-size:30px;
margin-bottom:25px;

}

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

.header{

position:fixed;
left:0;
top:0;
width:100%;
z-index:999;
transition:.4s;

}

.header.scrolled{

background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);
box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.navbar{

padding:20px 0;

}

.logo{

width:60px;
margin-right:12px;

}

.navbar-brand{

display:flex;
align-items:center;

}

.navbar-brand h5{

margin:0;
color:var(--primary);
font-size:20px;

}

.navbar-brand span{

font-size:13px;
color:var(--gray);

}

.nav-link{

font-weight:600;
margin-left:18px;
position:relative;
color:var(--dark);

}

.nav-link::after{

content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:3px;
background:var(--primary);
transition:.35s;

}

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

width:100%;

}

.nav-link:hover{

color:var(--primary);

}

.navbar-toggler{

border:none;
box-shadow:none;

}

.navbar-toggler:focus{

box-shadow:none;

}

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

.hero{

padding-top:170px;
padding-bottom:120px;
overflow:hidden;
background:linear-gradient(135deg,#F8F2E8,#EFD2A3);

}

.hero-grid{

position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);

background-size:60px 60px;

}

.hero-glow{

position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.35;

}

.glow-one{

width:300px;
height:300px;
background:#0B4DBB;
right:-100px;
top:-100px;

}

.glow-two{

width:250px;
height:250px;
background:#2EAD5B;
left:-70px;
bottom:-70px;

}

.hero-badge{

display:inline-block;
padding:10px 20px;
background:rgba(11,77,187,.1);
border-radius:50px;
color:var(--primary);
font-weight:600;

}

.hero-title{

font-size:70px;
font-weight:800;
margin:30px 0;

}

.hero-title span{

color:var(--primary);

}

.hero-description{

font-size:19px;
color:var(--gray);
margin-bottom:35px;

}

.hero-buttons{

display:flex;
flex-wrap:wrap;
gap:18px;

}

.hero-highlights{

display:flex;
flex-wrap:wrap;
gap:25px;
margin-top:45px;

}

.hero-highlights div{

display:flex;
align-items:center;
gap:8px;
font-weight:600;

}

.hero-highlights i{

color:var(--secondary);

}

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

.hero-image-wrapper{

position:relative;

}

.hero-image{

border-radius:30px;
box-shadow:var(--shadow-lg);

}

.floating-card{

position:absolute;
background:#fff;
padding:16px;
border-radius:18px;
display:flex;
gap:15px;
align-items:center;
box-shadow:var(--shadow);
width:250px;

}

.floating-card i{

width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,#0B4DBB,#2EAD5B);
color:#fff;

}

.card-1{

top:5%;
left:-30px;

}

.card-2{

right:-30px;
top:45%;

}

.card-3{

bottom:0;
left:40px;

}

/*==============================
STATS
==============================*/

.stats-section{

padding:70px 0;
background:#fff;

}

.stat-card{

background:#fff;
padding:35px;
text-align:center;
border-radius:25px;
box-shadow:var(--shadow);

}

.stat-card h2{

font-size:46px;
color:var(--primary);
font-weight:800;

}

.stat-card p{

margin:0;
color:var(--gray);

}

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

.scroll-top{

position:fixed;
right:25px;
bottom:25px;
width:50px;
height:50px;
border-radius:50%;
background:var(--primary);
color:#fff;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
z-index:999;

}

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

@media(max-width:992px){

.section{

padding:90px 0;

}

.section-title{

font-size:38px;

}

.hero{

text-align:center;
padding-top:140px;

}

.hero-title{

font-size:46px;

}

.hero-buttons{

justify-content:center;

}

.hero-highlights{

justify-content:center;

}

.floating-card{

position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
margin:20px auto;
width:100%;

}

.hero-image-wrapper{

margin-top:50px;

}

}

@media(max-width:768px){

.section-title{

font-size:32px;

}

.section-text{

font-size:16px;

}

.hero-title{

font-size:38px;

}

.card-aj{

padding:28px;

}

}

/*=========================================================
STYLE.CSS
PART 2
ABOUT • MISSION • VISION • WHY FOREX • WHY AJ
=========================================================*/

/*=========================================================
ABOUT SECTION
=========================================================*/

.about-image-wrapper{

position:relative;

}

.about-image-wrapper img{

border-radius:30px;
box-shadow:var(--shadow-lg);

}

.experience-badge{

position:absolute;
right:-30px;
bottom:35px;
width:180px;
height:180px;
background:#fff;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
box-shadow:var(--shadow-lg);
border:6px solid var(--cream);

}

.experience-badge h3{

font-size:42px;
font-weight:800;
color:var(--primary);
margin-bottom:5px;

}

.experience-badge span{

font-size:15px;
font-weight:600;
color:var(--gray);
text-align:center;
padding:0 15px;

}

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

.feature-card{

background:#fff;
padding:22px;
border-radius:20px;
display:flex;
align-items:center;
gap:15px;
box-shadow:var(--shadow-sm);
transition:.35s;
height:100%;

}

.feature-card:hover{

transform:translateY(-8px);
box-shadow:var(--shadow);

}

.feature-card i{

width:55px;
height:55px;
border-radius:50%;
background:linear-gradient(135deg,#0B4DBB,#2EAD5B);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:20px;
flex-shrink:0;

}

.feature-card h5{

margin:0;
font-size:17px;
font-weight:700;

}

/*=========================================================
MISSION & VISION
=========================================================*/

.card-aj h3{

font-size:28px;
margin-bottom:18px;

}

.card-aj p{

color:var(--gray);
font-size:17px;
line-height:1.8;

}

.card-aj:hover .icon-box{

transform:rotate(10deg) scale(1.08);

}

.icon-box{

transition:.35s;

}

/*=========================================================
WHY FOREX
=========================================================*/

.why-forex{

background:#fff;

}

.why-forex .card-aj{

text-align:center;

}

.why-forex .card-aj h4{

margin-bottom:18px;
font-size:22px;

}

.why-forex .card-aj p{

margin:0;

}

/*=========================================================
WHY AJ
=========================================================*/

.why-aj{

background:var(--cream-light);

}

.why-aj .card-aj{

position:relative;
overflow:hidden;

}

.why-aj .card-aj::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#0B4DBB,#2EAD5B);

}

.why-aj .card-aj h4{

font-size:22px;
margin-bottom:15px;

}

.why-aj .card-aj p{

margin-bottom:0;

}

/*=========================================================
COMMON SECTION EFFECT
=========================================================*/

.card-aj{

position:relative;
overflow:hidden;

}

.card-aj::after{

content:"";
position:absolute;
width:250px;
height:250px;
background:rgba(11,77,187,.03);
border-radius:50%;
top:-120px;
right:-120px;
transition:.5s;

}

.card-aj:hover::after{

transform:scale(1.3);

}

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

.about-image-wrapper img{

transition:.5s;

}

.about-image-wrapper:hover img{

transform:scale(1.03);

}

/*=========================================================
SECTION DECORATION
=========================================================*/

.section::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
pointer-events:none;

}

.section-title{

position:relative;
display:inline-block;

}

.section-title::after{

content:"";
position:absolute;
left:0;
bottom:-12px;
width:70px;
height:5px;
border-radius:50px;
background:linear-gradient(90deg,#0B4DBB,#2EAD5B);

}

.text-center .section-title::after{

left:50%;
transform:translateX(-50%);

}

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

@keyframes floatIcon{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.feature-card i,
.icon-box{

animation:floatIcon 4s ease-in-out infinite;

}

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

@media(max-width:1200px){

.experience-badge{

width:150px;
height:150px;

}

.experience-badge h3{

font-size:34px;

}

}

@media(max-width:992px){

.about-image-wrapper{

margin-bottom:60px;

}

.experience-badge{

position:relative;
right:auto;
bottom:auto;
margin:-70px auto 0;

}

.feature-card{

justify-content:flex-start;

}

}

@media(max-width:768px){

.feature-card{

padding:18px;

}

.feature-card i{

width:50px;
height:50px;

}

.card-aj h3{

font-size:24px;

}

.why-aj .card-aj h4{

font-size:20px;

}

.section-title{

font-size:30px;

}

}

@media(max-width:576px){

.experience-badge{

width:130px;
height:130px;

}

.experience-badge h3{

font-size:28px;

}

.experience-badge span{

font-size:12px;

}

.feature-card{

gap:12px;

}

.feature-card h5{

font-size:15px;

}

}

/*=========================================================
STYLE.CSS
PART 3
COURSES • COMPARISON • LEARNING JOURNEY
=========================================================*/

/*=========================================================
COURSES SECTION
=========================================================*/

.pricing-card{

position:relative;
overflow:hidden;
text-align:center;
padding:45px 35px;
border-radius:30px;
background:#fff;
box-shadow:var(--shadow);
transition:.4s;
height:100%;
border:1px solid rgba(0,0,0,.05);

}

.pricing-card:hover{

transform:translateY(-12px);
box-shadow:var(--shadow-lg);

}

.pricing-card::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#0B4DBB,#2EAD5B);

}

.featured-course{

transform:scale(1.03);
border:2px solid var(--primary);

}

.featured-course:hover{

transform:translateY(-12px) scale(1.03);

}

/*=========================================================
POPULAR TAG
=========================================================*/

.popular-tag{

position:absolute;
right:-45px;
top:22px;

background:var(--primary);

color:#fff;

padding:10px 55px;

font-size:12px;

font-weight:700;

transform:rotate(45deg);

letter-spacing:1px;

}

/*=========================================================
PRICING BADGE
=========================================================*/

.pricing-badge{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:rgba(11,77,187,.08);

color:var(--primary);

font-weight:700;

margin-bottom:20px;

}

.pricing-badge.green{

background:rgba(46,173,91,.12);

color:var(--secondary);

}

.pricing-badge.gold{

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

color:#b8860b;

}

/*=========================================================
PRICE
=========================================================*/

.price{

font-size:48px;

font-weight:800;

margin:20px 0;

color:var(--primary);

}

.pricing-card p{

margin-bottom:30px;

color:var(--gray);

}

/*=========================================================
COURSE FEATURES
=========================================================*/

.pricing-list{

text-align:left;

margin-bottom:35px;

}

.pricing-list li{

position:relative;

padding:13px 0 13px 35px;

border-bottom:1px solid #ececec;

font-size:16px;

}

.pricing-list li:last-child{

border-bottom:none;

}

.pricing-list li::before{

content:"✔";

position:absolute;

left:0;

top:11px;

width:22px;

height:22px;

border-radius:50%;

background:var(--secondary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:11px;

}

/*=========================================================
COMPARE TABLE
=========================================================*/

.compare-table{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:var(--shadow);

}

.compare-table thead{

background:linear-gradient(135deg,#0B4DBB,#2EAD5B);

color:#fff;

}

.compare-table th{

padding:22px;

font-weight:700;

text-align:center;

}

.compare-table td{

padding:18px;

text-align:center;

vertical-align:middle;

font-size:16px;

}

.compare-table tbody tr{

transition:.3s;

}

.compare-table tbody tr:hover{

background:#f9fafb;

}

.compare-table td:first-child{

font-weight:600;

text-align:left;

}

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

.learning-step{

text-align:center;

padding:40px 30px;

border-radius:25px;

background:#fff;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

position:relative;

overflow:hidden;

}

.learning-step:hover{

transform:translateY(-10px);

}

.learning-step h1{

font-size:55px;

font-weight:800;

color:rgba(11,77,187,.15);

margin-bottom:15px;

}

.learning-step h4{

margin-bottom:15px;

}

.learning-step p{

margin:0;

color:var(--gray);

}

/*=========================================================
UPGRADE FLOW
=========================================================*/

.upgrade-flow{

display:flex;

justify-content:center;

align-items:center;

gap:30px;

flex-wrap:wrap;

margin-top:60px;

}

.upgrade-box{

min-width:220px;

padding:30px;

border-radius:20px;

background:#fff;

box-shadow:var(--shadow);

text-align:center;

font-size:24px;

font-weight:700;

transition:.35s;

}

.upgrade-box:hover{

background:linear-gradient(135deg,#0B4DBB,#2EAD5B);

color:#fff;

transform:translateY(-10px);

}

.upgrade-arrow{

font-size:34px;

color:var(--primary);

}

/*=========================================================
COURSE CTA
=========================================================*/

.course-footer{

margin-top:35px;

}

.course-footer .btn-aj{

width:100%;

}

/*=========================================================
COURSE HOVER EFFECT
=========================================================*/

.pricing-card::after{

content:"";

position:absolute;

width:250px;

height:250px;

background:rgba(11,77,187,.03);

border-radius:50%;

right:-120px;

bottom:-120px;

transition:.5s;

}

.pricing-card:hover::after{

transform:scale(1.4);

}

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

@media(max-width:1200px){

.price{

font-size:40px;

}

}

@media(max-width:992px){

.featured-course{

transform:none;

}

.featured-course:hover{

transform:translateY(-10px);

}

.compare-table{

font-size:14px;

}

.upgrade-flow{

flex-direction:column;

}

.upgrade-arrow{

transform:rotate(90deg);

}

}

@media(max-width:768px){

.pricing-card{

padding:35px 25px;

}

.price{

font-size:36px;

}

.compare-table th,

.compare-table td{

padding:14px;

font-size:14px;

}

.learning-step{

padding:30px;

}

.learning-step h1{

font-size:42px;

}

.upgrade-box{

width:100%;

}

}

@media(max-width:576px){

.pricing-list li{

font-size:15px;

padding-left:30px;

}

.popular-tag{

font-size:10px;

padding:8px 45px;

right:-42px;

}

}

/*=========================================================
STYLE.CSS
PART 4
BUSINESS • INCOME • RANKS • REWARDS • RENEWAL
=========================================================*/

/*=========================================================
BUSINESS SECTION
=========================================================*/

.business-points{

display:flex;
flex-direction:column;
gap:18px;

}

.business-point{

display:flex;
align-items:center;
gap:15px;
font-size:17px;
font-weight:600;

}

.business-point i{

color:var(--secondary);
font-size:20px;

}

/*=========================================================
ROADMAP
=========================================================*/

.roadmap{

position:relative;
padding-left:40px;

}

.roadmap::before{

content:"";
position:absolute;
left:18px;
top:20px;
bottom:20px;
width:4px;
background:linear-gradient(var(--primary),var(--secondary));

}

.road-item{

display:flex;
align-items:flex-start;
gap:20px;
margin-bottom:40px;
position:relative;

}

.road-item:last-child{

margin-bottom:0;

}

.road-number{

width:42px;
height:42px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
flex-shrink:0;
z-index:2;
box-shadow:var(--shadow-sm);

}

.road-item h4{

margin-bottom:8px;
font-size:22px;

}

.road-item p{

margin:0;
color:var(--gray);

}

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

.income-card{

text-align:center;
position:relative;

}

.income-card .icon-box{

margin:0 auto 25px;

}

.income-card h3{

margin-bottom:18px;
font-size:24px;

}

.income-card p{

margin-bottom:25px;

}

.income-footer{

display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(11,77,187,.08);
color:var(--primary);
font-weight:700;

}

.income-card:hover{

background:linear-gradient(135deg,#fff,#f8fbff);

}

/*=========================================================
RANKS
=========================================================*/

.rank-card{

text-align:center;

}

.rank-circle{

width:90px;
height:90px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
display:flex;
justify-content:center;
align-items:center;
margin:0 auto 30px;
color:#fff;
font-size:32px;
font-weight:800;
box-shadow:var(--shadow);

}

.rank-card h3{

margin-bottom:15px;

}

.featured-rank{

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

}

/*=========================================================
REWARDS TIMELINE
=========================================================*/

.reward-timeline{

position:relative;
max-width:900px;
margin:auto;

}

.reward-timeline::before{

content:"";
position:absolute;
left:38px;
top:0;
bottom:0;
width:4px;
background:linear-gradient(var(--primary),var(--secondary));

}

.reward-row{

display:flex;
gap:30px;
margin-bottom:40px;
position:relative;

}

.reward-row:last-child{

margin-bottom:0;

}

.reward-icon{

width:80px;
height:80px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:30px;
flex-shrink:0;
z-index:2;
box-shadow:var(--shadow);

}

.reward-card{

background:#fff;
padding:30px;
border-radius:25px;
box-shadow:var(--shadow);
width:100%;
transition:.35s;

}

.reward-card:hover{

transform:translateY(-8px);

}

.reward-card h4{

margin-bottom:15px;

}

.reward-card p{

margin:0;
color:var(--gray);

}

/*=========================================================
RENEWAL
=========================================================*/

.renew-price{

font-size:58px;
font-weight:800;
color:var(--primary);
margin:30px 0;

}

.renew-price small{

font-size:20px;
font-weight:500;
color:var(--gray);

}

.renew-list{

margin-top:25px;

}

.renew-list li{

padding:14px 0;
display:flex;
align-items:center;
gap:15px;
border-bottom:1px solid #ececec;

}

.renew-list li:last-child{

border-bottom:none;

}

.renew-list i{

color:var(--secondary);

}

/*=========================================================
IMPORTANT INFORMATION
=========================================================*/

.card-aj ul{

padding-left:18px;

}

.card-aj ul li{

margin-bottom:14px;
color:var(--gray);

}

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

.testimonial-img{

width:90px;
height:90px;
border-radius:50%;
margin:0 auto 25px;
object-fit:cover;
border:5px solid var(--cream);

}

.card-aj.text-center h5{

margin-bottom:12px;

}

.card-aj.text-center p{

margin-bottom:0;

}

/*=========================================================
HOVER EFFECTS
=========================================================*/

.rank-card:hover .rank-circle{

transform:rotate(360deg);

}

.rank-circle{

transition:.8s;

}

.reward-icon{

transition:.5s;

}

.reward-row:hover .reward-icon{

transform:scale(1.08);

}

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

@media(max-width:992px){

.roadmap{

padding-left:20px;

}

.reward-row{

gap:20px;

}

.renew-price{

font-size:46px;

}

}

@media(max-width:768px){

.roadmap::before{

left:14px;

}

.road-number{

width:34px;
height:34px;
font-size:14px;

}

.road-item{

gap:15px;

}

.reward-timeline::before{

left:24px;

}

.reward-icon{

width:50px;
height:50px;
font-size:20px;

}

.reward-card{

padding:22px;

}

.rank-circle{

width:70px;
height:70px;
font-size:24px;

}

.renew-price{

font-size:38px;

}

}

@media(max-width:576px){

.business-point{

font-size:15px;

}

.road-item h4{

font-size:18px;

}

.reward-card h4{

font-size:20px;

}

}

/*=========================================================
STYLE.CSS
PART 5
GALLERY • FAQ • CONTACT • FOOTER • UTILITIES
=========================================================*/

/*=========================================================
GALLERY
=========================================================*/

#gallery .row{
    row-gap:30px;
}

#gallery img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:25px;
    transition:.45s;
    cursor:pointer;
    box-shadow:var(--shadow);
}

#gallery img:hover{
    transform:scale(1.04);
    box-shadow:var(--shadow-lg);
}

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

.custom-accordion .accordion-item{
    border:none;
    margin-bottom:18px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}

.custom-accordion .accordion-button{
    padding:22px 28px;
    font-weight:700;
    background:#fff;
    box-shadow:none;
}

.custom-accordion .accordion-button:not(.collapsed){
    background:linear-gradient(135deg,#0B4DBB,#2EAD5B);
    color:#fff;
}

.custom-accordion .accordion-button:focus{
    box-shadow:none;
}

.custom-accordion .accordion-body{
    padding:25px 30px;
    line-height:1.8;
    color:var(--gray);
}

/*=========================================================
CONTACT
=========================================================*/

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:28px;
}

.contact-item:last-child{
    margin-bottom:0;
}

.contact-item i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,#0B4DBB,#2EAD5B);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.contact-item h6{
    margin-bottom:6px;
    font-weight:700;
}

.contact-item p{
    margin:0;
    color:var(--gray);
}

.form-control,
.form-select{

height:56px;
border-radius:16px;
border:1px solid #ddd;
padding:15px 20px;
box-shadow:none;

}

textarea.form-control{
height:auto;
resize:none;
}

.form-control:focus,
.form-select:focus{

border-color:var(--primary);
box-shadow:0 0 0 4px rgba(11,77,187,.08);

}

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

.footer{

background:#111827;
color:#fff;
padding:90px 0 30px;

}

.footer h4,
.footer h5{

margin-bottom:20px;
color:#fff;

}

.footer p{

color:#b9c0ca;

}

.footer ul{

padding:0;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

color:#b9c0ca;
transition:.35s;

}

.footer ul li a:hover{

color:#fff;
padding-left:6px;

}

.footer hr{

border-color:rgba(255,255,255,.1);
margin:50px 0 25px;

}

.footer-bottom{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;

}

.footer-bottom p{

margin:0;
font-size:15px;

}

/*=========================================================
SOCIAL
=========================================================*/

.social-links{

display:flex;
gap:15px;

}

.social-links a{

width:48px;
height:48px;
border-radius:50%;
background:#1d2736;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:18px;
transition:.35s;

}

.social-links a:hover{

background:linear-gradient(135deg,#0B4DBB,#2EAD5B);

transform:translateY(-5px);

}

/*=========================================================
WHATSAPP
=========================================================*/

.whatsapp-btn{

position:fixed;
left:25px;
bottom:25px;
width:60px;
height:60px;
border-radius:50%;
background:#25D366;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
z-index:999;
box-shadow:0 20px 40px rgba(0,0,0,.25);
transition:.35s;

}

.whatsapp-btn:hover{

color:#fff;
transform:scale(1.08);

}

/*=========================================================
PRELOADER
=========================================================*/

#preloader{

position:fixed;
inset:0;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.4s;

}

.loader-logo img{

width:110px;
animation:pulse 1.4s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

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

.fade-up{

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(35px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.rotate{

animation:rotate360 10s linear infinite;

}

@keyframes rotate360{

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

}

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

.shadow-aj{

box-shadow:var(--shadow);

}

.rounded-aj{

border-radius:30px;

}

.text-primary{

color:var(--primary)!important;

}

.text-secondary{

color:var(--secondary)!important;

}

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

@media(max-width:992px){

.footer-bottom{

justify-content:center;
text-align:center;

}

.contact-item{

margin-bottom:22px;

}

}

@media(max-width:768px){

.footer{

padding-top:70px;

}

.footer h4{

margin-top:25px;

}

#gallery img{

height:220px;

}

.whatsapp-btn{

width:55px;
height:55px;
font-size:26px;

}

.scroll-top{

width:46px;
height:46px;

}

}

@media(max-width:576px){

.section{

padding:75px 0;

}

.section-title{

font-size:30px;

}

.section-text{

font-size:15px;

}

.hero-title{

font-size:34px;

}

.hero-buttons{

flex-direction:column;

}

.btn-aj{
margin-bottom: 10px;
width:100%;

}

.social-links{

justify-content:center;

}

.footer{

text-align:center;

}

.contact-item{

flex-direction:column;
align-items:center;
text-align:center;

}

}
/*==============================
SCROLL PROGRESS BAR
==============================*/

.scroll-progress{

position:fixed;

left:0;

top:0;

height:4px;

width:0;

background:linear-gradient(90deg,#0B4DBB,#2EAD5B);

z-index:99999;

transition:width .15s linear;

}

.btn-aj{
position:relative;
overflow:hidden;
}

.ripple{
position:absolute;
border-radius:50%;
transform:scale(0);
animation:ripple .6s linear;
background:rgba(255,255,255,.5);
pointer-events:none;
}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/*==================================================
Mouse Glow
==================================================*/

.mouse-glow{

position:fixed;

width:220px;

height:220px;

border-radius:50%;

background:radial-gradient(circle,
rgba(11,77,187,.18),
transparent 70%);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:0;

filter:blur(30px);

transition:all .05s linear;

}

/*==============================
IMAGE PREVIEW
==============================*/

.image-preview{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

cursor:pointer;

}

.image-preview img{

max-width:90%;

max-height:90%;

border-radius:20px;

}

.close-preview{

position:absolute;

top:30px;

right:40px;

font-size:45px;

color:#fff;

cursor:pointer;

}

/*==============================
LOADED IMAGE
==============================*/

img{

opacity:0;

transition:.6s;

}

img.loaded{

opacity:1;

}

/*==============================
BUTTON LOADING
==============================*/

.loading{

pointer-events:none;

opacity:.75;

}




        /* --- CTA --- */
        .cta-section { padding:100px 0; background:linear-gradient(135deg,#0B4DBB,#2EAD5B); }
        .cta-box {
            background:rgba(255,255,255,.12); backdrop-filter:blur(20px);
            padding:70px 50px; border-radius:30px; text-align:center; color:#fff;
        }
        .cta-box h2 { font-size:48px; margin-bottom:20px; font-weight:800; }
        .cta-box p { max-width:700px; margin:auto; font-size:18px; opacity:.95; }
        .cta-box .btn-outline-dark { background:#fff; color:#111; border:none; }
        .cta-box .btn-outline-dark:hover { background:#111; color:#fff; }
        @media(max-width:768px) {
            .cta-box { padding:40px 25px; }
            .cta-box h2 { font-size:34px; }
        }

        .rank-image{

width:170px;

height:170px;

object-fit:contain;

display:block;

margin:0 auto 25px;

transition:.4s;

}

.rank-card:hover .rank-image{

transform:scale(1.08) rotate(3deg);

}

/*==================================================
REWARDS V2
===================================================*/

.reward-box{

background:#fff;

border-radius:28px;

overflow:hidden;

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

transition:.4s;

height:100%;

}

.reward-box:hover{

transform:translateY(-12px);

}

.reward-img{

width:100%;

/* height:220px; */

object-fit:cover;

}

.reward-badge{

display:inline-block;

margin:20px;

padding:8px 18px;

border-radius:50px;

background:#0B4DBB;

color:#fff;

font-size:13px;

font-weight:700;

}

.reward-badge.gold{

background:#D4AF37;

}

.reward-box h3{

padding:0 20px;

margin-bottom:15px;

font-size:28px;

}

.reward-box p{

padding:0 20px 25px;

color:#666;

line-height:1.8;

}

.featured-reward{

border:3px solid #D4AF37;

}