/* =========================================================
VISA TRAVEL EXPERT
PREMIUM COUNTRY HUB V2
FULL RESPONSIVE
========================================================= */

:root{

--primary:#0b1d63;
--secondary:#ff6a00;
--bg:#f8fafc;
--white:#ffffff;
--text:#111827;
--muted:#6b7280;
--border:#e5e7eb;

}

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

.country-content-section *,
.country-section *,
.country-hero *{
box-sizing:border-box;
}

.country-content-section,
.country-section,
.country-cta,
.country-final-cta{
padding:50px 0;
}

.container{
width:100%;
max-width:1280px;
margin:0 auto;
padding:0 24px;
}

.section-heading{
max-width:900px;
margin:0 auto 35px;
text-align:center;
}

.section-heading h2{
font-size:32px;
font-weight:700;
line-height:1.3;
margin-bottom:10px;
color:var(--text);
}

.section-heading p{
font-size:15px;
line-height:1.7;
color:var(--muted);
}

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

.country-hero{
position:relative;
height:520px;
overflow:hidden;
}

.country-hero-image,
.country-hero-image img{
width:100%;
height:100%;
}

.country-hero-image img{
object-fit:cover;
}

.country-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,.78) 0%,
rgba(0,0,0,.45) 45%,
rgba(0,0,0,.15) 100%
);
display:flex;
align-items:center;
}

.country-hero-content{
max-width:700px;
}

.country-badge{
display:inline-block;
background:rgba(255,255,255,.15);
backdrop-filter:blur(10px);
padding:8px 16px;
border-radius:50px;
font-size:13px;
color:#fff;
margin-bottom:18px;
}

.country-hero h1{
font-size:46px;
font-weight:800;
line-height:1.15;
color:#fff;
margin-bottom:15px;
}

.country-hero p{
font-size:16px;
line-height:1.8;
color:#fff;
margin-bottom:25px;
}

.hero-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}

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

.btn-primary,
.btn-secondary,
.btn-card{

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

padding:12px 24px;

border-radius:10px;

font-size:14px;
font-weight:600;

text-decoration:none;
transition:.3s;

}

.btn-primary{
background:var(--secondary);
color:#fff;
}

.btn-primary:hover{
transform:translateY(-2px);
}

.btn-secondary{
background:#fff;
color:var(--primary);
}

.btn-card{
width:100%;
background:var(--primary);
color:#fff;
margin-top:15px;
}

/* =========================================================
BREADCRUMB
========================================================= */

.country-breadcrumb{
background:#fff;
border-bottom:1px solid var(--border);
padding:12px 0;
}

.country-breadcrumb .container{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
}

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

.country-content{
max-width:980px;
margin:auto;
font-size:15px;
line-height:1.9;
color:var(--text);
}

.country-content h2{
font-size:28px;
margin-bottom:15px;
}

.country-content p{
margin-bottom:18px;
}

.country-content ul{
padding-left:20px;
margin-bottom:20px;
}

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

.country-stats{
padding:0 0 50px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.stat-card{

background:#fff;

padding:22px;

border-radius:16px;

border:1px solid #eef2f7;

box-shadow:0 6px 18px rgba(0,0,0,.04);

text-align:center;

}

.stat-card h3{
font-size:34px;
font-weight:800;
color:var(--primary);
margin-bottom:5px;
}

.stat-card span{
font-size:14px;
color:var(--muted);
}

/* =========================================================
GRIDS
========================================================= */

.visa-grid,
.package-grid,
.hotel-grid,
.success-grid,
.blog-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;

}

.visa-card,
.package-card,
.hotel-card,
.blog-card{

background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid #eef2f7;

box-shadow:0 8px 20px rgba(0,0,0,.05);

transition:.3s;

display:flex;
flex-direction:column;

}

.visa-card:hover,
.package-card:hover,
.hotel-card:hover,
.success-card:hover,
.blog-card:hover{
transform:translateY(-4px);
}

.package-image img,
.hotel-image img,
.blog-image img{

width:100%;

height:230px;

object-fit:cover;

display:block;

}

.visa-card-body,
.package-content,
.hotel-content,
.success-content,
.blog-content{

padding:20px;
display:flex;
flex-direction:column;
flex:1;

}

.visa-card h3,
.package-card h3,
.hotel-card h3,
.success-card h3,
.blog-card h3{

font-size:19px;
font-weight:700;
margin-bottom:10px;

}

.visa-card p,
.package-card p,
.hotel-card p,
.success-card p,
.blog-card p{

font-size:14px;
line-height:1.7;
color:var(--muted);
flex:1;

}

.package-meta,
.hotel-meta{

display:flex;
justify-content:space-between;
margin-top:15px;

font-size:14px;
font-weight:600;

}

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

.cta-box,
.final-cta-box{

max-width:1000px;
margin:auto;

background:linear-gradient(
135deg,
#08164d,
#17358c
);

border-radius:22px;

padding:50px;

text-align:center;
color:#fff;

}

.cta-box h2,
.final-cta-box h2{

font-size:32px;
font-weight:800;
margin-bottom:12px;

}

.cta-box p,
.final-cta-box p{

max-width:700px;
margin:auto;
line-height:1.8;

}

.cta-buttons{
display:flex;
justify-content:center;
gap:12px;
margin-top:20px;
flex-wrap:wrap;
}

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

.faq-wrapper{
max-width:900px;
margin:auto;
}

.faq-item{

background:#fff;

border:1px solid #eef2f7;

border-radius:14px;

overflow:hidden;

margin-bottom:14px;

box-shadow:0 5px 15px rgba(0,0,0,.03);

}

.faq-question{

width:100%;

padding:18px 20px;

border:none;

background:#fff;

font-size:15px;
font-weight:600;

text-align:left;

cursor:pointer;

}

.faq-answer{
display:none;
padding:0 20px 20px;
line-height:1.8;
font-size:14px;
}

.faq-answer.active{
display:block;
}

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

.internal-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
max-width:1000px;
margin:auto;
}

.internal-links a{

padding:10px 16px;

border-radius:10px;

background:#fff;

border:1px solid var(--border);

text-decoration:none;

font-size:14px;

color:var(--primary);

font-weight:600;

}

/* =========================================================
TABLET
========================================================= */

@media(max-width:991px){

.country-hero{
height:450px;
}

.country-hero h1{
font-size:36px;
}

.visa-grid,
.package-grid,
.hotel-grid,
.success-grid,
.blog-grid{
grid-template-columns:repeat(2,1fr);
}

.stats-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:767px){

.container{
padding:0 16px;
}

.country-content-section,
.country-section,
.country-cta,
.country-final-cta{
padding:35px 0;
}

.country-hero{
height:360px;
}

.country-hero h1{
font-size:28px;
line-height:1.2;
}

.country-hero p{
font-size:14px;
line-height:1.7;
}

.section-heading{
margin-bottom:22px;
}

.section-heading h2{
font-size:24px;
}

.section-heading p{
font-size:14px;
}

.country-content{
font-size:15px;
}

.stats-grid{
grid-template-columns:1fr 1fr;
gap:12px;
}

.visa-grid,
.package-grid,
.hotel-grid,
.blog-grid{
grid-template-columns:1fr;
gap:18px;
}

.success-card{
flex:0 0 90%;
}

.package-image img,
.hotel-image img,
.blog-image img{
height:200px;
}

.success-image{
height:220px;
}

.cta-box,
.final-cta-box{
padding:28px 18px;
}

.cta-box h2,
.final-cta-box h2{
font-size:24px;
}

.hero-buttons,
.cta-buttons{
flex-direction:column;
}

.btn-primary,
.btn-secondary{
width:100%;
}

}

/* =========================================================
SUCCESS STORIES SLIDER
========================================================= */

.success-slider{

display:flex;

gap:20px;

overflow-x:auto;

scroll-snap-type:x mandatory;

padding:10px 0;

scrollbar-width:thin;

}

.success-slider::-webkit-scrollbar{
height:8px;
}

.success-slider::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:20px;
}

.success-card{

flex:0 0 calc(25% - 15px);

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.06);

scroll-snap-align:start;

transition:.3s;

}

.success-card:hover{
transform:translateY(-4px);
}

.success-image{
height:280px;
overflow:hidden;
}

.success-image img{
width:100%;
height:100%;
object-fit:cover;
}

.success-content{
padding:18px;
}

.success-content h3{
font-size:17px;
margin-bottom:8px;
}

.success-type{

display:inline-block;

padding:6px 12px;

background:#eef4ff;

color:#0b1d63;

border-radius:50px;

font-size:12px;

margin-bottom:12px;

}

.success-content p{

font-size:14px;

line-height:1.7;

color:#6b7280;

display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;

overflow:hidden;

}