/* RESET */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{background:#f6f8fc;color:#111;line-height:1.6;}

/* CONTAINER */
.container{
max-width:1200px;
margin:auto;
}

/* NAV */
nav{
position:fixed;width:100%;top:0;
display:flex;justify-content:space-between;align-items:center;
padding:20px 60px;
background:rgba(11,31,58,0.9);
backdrop-filter:blur(12px);
z-index:1000;
}
nav h3{color:#fff;font-weight:700;}
nav a{
color:#fff;margin-left:25px;text-decoration:none;
font-size:14px;opacity:0.9;
}
nav a:hover{opacity:1;color:gold;}

/* HERO */
.hero{
height:100vh;
background:linear-gradient(rgba(11,31,58,0.7),rgba(11,31,58,0.7)),
url('https://images.pexels.com/photos/32176066/pexels-photo-32176066.jpeg');
background-size:cover;background-position:center;
display:flex;align-items:center;justify-content:center;
text-align:center;color:#fff;padding:20px;
}
.hero h1{
font-size:56px;
font-weight:700;
margin-bottom:20px;
}
.hero p{
font-size:18px;
opacity:0.9;
margin-bottom:30px;
}

/* BUTTON */
.btn{
background:linear-gradient(135deg,#ffd700,#ffcc00);
color:#000;
padding:14px 32px;
border:none;border-radius:30px;
font-weight:600;
cursor:pointer;
transition:0.3s;
box-shadow:0 10px 30px rgba(255,215,0,0.4);
}
.btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(255,215,0,0.6);
}

/* SECTION */
section{
width:100%;
padding:100px 20px;
}
h2{
font-size:36px;
margin-bottom:50px;
text-align:center;
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

/* CARD */
.card{
background:#fff;
padding:30px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.06);
transition:0.4s;
text-align:center;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,0.12);
}

/* ICONS */
.card i{
margin-bottom:15px;
}

/* FORM */
form{
max-width:500px;
margin:auto;
}
select,input,textarea{
width:100%;
padding:14px;
margin:10px 0;
border-radius:8px;
border:1px solid #ddd;
}

/* TESTIMONIAL */
.testimonial{
background:#0b1f3a;
color:#fff;
position:relative;
z-index:1;
}
.testimonial h2{color:#fff;}
.testimonial .card{
background:#132b52;
color:#fff;
}


/* WHATSAPP */
.whatsapp{
position:fixed;
bottom: 1px;right:10px;
padding:5px;
border-radius:50%;
z-index:99999;
}

/* BODY SPACING FIX */
body{
padding-top:70px;
padding-bottom:81px; /* increase this */
}

/* MOBILE */
@media(max-width:768px){
.hero h1{font-size:34px;}
nav{padding:15px;}
}

.card{
border:1px solid rgba(0,0,0,0.05);
}

/* GOLD ACCENT SYSTEM */
:root{
--gold:#FFD700;
--gold-dark:#e6c200;
}

/* NAV HOVER UNDERLINE */
nav a{
position:relative;
}
nav a::after{
content:'';
position:absolute;
width:0;height:2px;
background:var(--gold);
left:0;bottom:-5px;
transition:0.3s;
}
nav a:hover::after{
width:100%;
}

/* HERO GLOW EFFECT */
.hero h1{
text-shadow:0 0 20px rgba(255,215,0,0.3);
}

.hero{
position:relative;
z-index:1;
}

/* BUTTON UPGRADE */
.btn{
background:linear-gradient(135deg,var(--gold),var(--gold-dark));
color:#000;
position:relative;
overflow:hidden;
}

.btn::after{
content:'';
position:absolute;
top:0;left:-100%;
width:100%;height:100%;
background:rgba(255,255,255,0.3);
transition:0.5s;
}

.btn:hover::after{
left:100%;
}

/* CARD GOLD STRIP */
.card::before{
content:'';
position:absolute;
top:0;left:0;
width:100%;height:4px;
background:linear-gradient(90deg,var(--gold),transparent);
}

/* ICON GLOW */
.card i{
color:var(--gold);
text-shadow:0 0 10px rgba(255,215,0,0.5);
}

/* SECTION HOVER DEPTH */
.card:hover{
transform:translateY(-12px) scale(1.02);
}

/* TESTIMONIAL GLOW */
.testimonial{
box-shadow:inset 0 0 100px rgba(255,215,0,0.05);
}


/* BASE ANIMATION */
.fade-in{
opacity:0;
transform:translateY(40px);
transition:all 0.8s cubic-bezier(0.22,1,0.36,1);
}

.fade-in.show{
opacity:1;
transform:translateY(0);
}

/* STAGGER DELAYS */
.fade-in:nth-child(1){transition-delay:0.1s;}
.fade-in:nth-child(2){transition-delay:0.2s;}
.fade-in:nth-child(3){transition-delay:0.3s;}
.fade-in:nth-child(4){transition-delay:0.4s;}
.fade-in:nth-child(5){transition-delay:0.5s;}

/* CARD MICRO ANIMATION */
.card{
transform-style:preserve-3d;
}

.card:hover{
transform:translateY(-12px) scale(1.03) rotateX(2deg);
}



/* BUTTON MICRO INTERACTION */
.btn{
background:linear-gradient(135deg,#FFD700,#e6c200);
color:#000;
padding:14px 30px;
border:none;
border-radius:30px;
font-weight:600;
cursor:pointer;
transition:all 0.3s ease;
display:inline-block;
position:relative;
overflow:hidden; /* IMPORTANT */
z-index:1;
}

/* FIXED SHINE EFFECT */
.btn::after{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.25);
transition:0.5s;
z-index:0; /* stays behind text */
}

.btn:hover::after{
left:100%;
}

.btn{
position:relative;
z-index:2;
}

div[style*="position:fixed"]{
overflow:hidden;
}
/* HERO TEXT ENTRY */
.hero h1{
animation:heroFade 1s ease forwards;
}

.hero p{
animation:heroFade 1.3s ease forwards;
}

@keyframes heroFade{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* PROCESS TIMELINE */
.process{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:20px;
justify-items:center;
position:relative;
margin-top:50px;
}

/* LINE */
.process::before{
content:'';
position:absolute;
top:25px;
left:5%;
width:90%;
height:4px;
background:#ddd;
z-index:0;
}

/* STEP */
.step{
position:relative;
text-align:center;
flex:1;
z-index:1;
}

/* CIRCLE */
.circle{
width:50px;
height:50px;
background:linear-gradient(135deg,#FFD700,#e6c200);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
margin:0 auto 10px;
color:#000;
box-shadow:0 5px 15px rgba(255,215,0,0.4);
}

/* TEXT */
.step p{
font-size:14px;
}

/* MOBILE */
@media(max-width:768px){
.process{
flex-direction:column;
}
.process::before{
display:none;
}
.step{
margin-bottom:20px;
}
}

.circle:hover{
transform:scale(1.1);
box-shadow:0 10px 25px rgba(255,215,0,0.6);
}

/* PROCESS PROGRESS LINE */
.process::before{
content:'';
position:absolute;
top:25px;
left:0;
width:0%; /* starts from 0 */
height:4px;
background:linear-gradient(90deg,#FFD700,#e6c200);
z-index:0;
transition:width 1.5s ease;
}

/* WHEN ACTIVE */
.process.active::before{
width:100%;
}

/* STEP APPEAR DELAY */
.step{
opacity:0;
transform:translateY(30px);
transition:all 0.6s ease;
}

.step.show{
opacity:1;
transform:translateY(0);
}

.step.show .circle{
box-shadow:0 10px 25px rgba(255,215,0,0.6);
}

/* DEFAULT NAV */
nav{
transition:all 0.3s ease;
}

/* SCROLLED NAV */
nav.scrolled{
background:rgba(11,31,58,0.95);
backdrop-filter:blur(12px);
padding:10px 60px; /* shrink */
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

/* LOGO SHRINK */
nav h3{
transition:0.3s;
}

nav.scrolled h3{
font-size:16px;
}

nav a:hover{
color:#FFD700;
}

@media(max-width:768px){
.hero{
background-attachment:scroll;
}
}

/* SECTION DEPTH */
section{
position:relative;
z-index:1;
}

/* LIGHT BACKGROUND VARIATION */
section:nth-child(even){
background:#ffffff;
}

section:nth-child(odd){
background:#f6f8fc;
}

section:not(.testimonial)::after{
content:'';
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:linear-gradient(to bottom,rgba(0,0,0,0.02),transparent);
pointer-events:none;
}

/* REMOVE OVERLAY FROM TESTIMONIAL COMPLETELY */
.testimonial::after{
display:none !important;
}

.testimonial{
background:#0b1f3a !important;
color:#fff;
}

/* SLIDER CONTAINER */
.testimonial-slider{
display:flex;
overflow:hidden;
position:relative;
}

/* EACH SLIDE */
.slide{
min-width:100%;
transition:0.8s cubic-bezier(0.22,1,0.36,1);
padding:20px;
}

/* CARD CENTER */
.slide .card{
max-width:500px;
margin:auto;
}

.cta-bar{
position:fixed;
bottom:2px;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:900px;

background:rgba(11,31,58,0.85);
backdrop-filter:blur(12px);

padding:12px 20px;
border-radius:50px;

display:flex;
justify-content:center;
align-items:center;

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

z-index:99999;
}

.cta-bar .btn{
margin:0;
}

.cta-bar:hover{
transform:translateX(-50%) scale(1.02);
}

/* FAQ */
.faq-item{
border-bottom:1px solid #ddd;
padding:15px 0;
cursor:pointer;
}

.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
font-size:16px;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:all 0.4s ease;
opacity:0;
}

/* ACTIVE */
.faq-item.active .faq-answer{
max-height:200px;
opacity:1;
margin-top:10px;
}

.faq-item.active .faq-icon{
transform:rotate(90deg);
}

/* FAQ HOVER EFFECT */
.faq-item{
transition:all 0.3s ease;
border-radius:8px;
padding:15px;
}

.faq-item:hover{
background:#f5f7fb;
transform:translateX(5px);
}

/* ACTIVE STATE */
.faq-item.active{
background:#eef3ff;
border-left:4px solid #FFD700;
}

/* QUESTION TEXT */
.faq-question{
font-weight:600;
}

/* FOOTER */
footer{
background:#0b1f3a;
color:#fff;
padding:60px 20px 20px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

footer h3, footer h4{
margin-bottom:15px;
}

footer ul{
list-style:none;
padding:0;
}

footer ul li{
margin-bottom:8px;
font-size:14px;
opacity:0.9;
}

footer ul li:hover{
color:#FFD700;
cursor:pointer;
}

/* BOTTOM */
.footer-bottom{
text-align:left;
margin-top:30px;
border-top:1px solid rgba(255,255,255,0.1);
padding-top:15px;
font-size:13px;
opacity:0.8;
}

/* FOOTER REVEAL EFFECT */
footer{
position:relative;
width:100%;
z-index:1;
}

/* CONTENT ABOVE FOOTER */
.page-content{
position:relative;
z-index:2;
background:#f6f8fc;
}

.offer-grid{
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.countries-grid{
grid-template-columns:repeat(5,1fr);
gap:20px;
}

/* FLAG IMAGE */
.flag{
width:100%;
height:120px;
border-radius:6px;
margin-bottom:15px;
}

/* CENTER ALIGN */
.country-card{
text-align:center;
}

.country-card:hover .flag{
transform:scale(1.1);
transition:0.3s;
}

/* REMOVE LINK STYLING FROM CARDS */
.country-card{
text-decoration:none;
color:inherit;
}

.country-card h3,
.country-card p{
color:inherit;
text-decoration:none;
}

.country-card:hover{
color:#FFD700;
}