/* =====================================================
   VISA TRAVEL EXPERT - SERVICES.CSS
   FINAL REBUILD
   SAME HEADER / TOP TICKER SAFE STRUCTURE AS HOTEL PAGE
===================================================== */

/* =====================================================
   IMPORTANT FIX
   Prevent page CSS from touching header / ticker
===================================================== */

body.services-page{
margin:0;
padding:0;
background:#f7f8fa;
font-family:Poppins,Arial,sans-serif;
color:#111;
overflow-x:hidden;
}

/* Never style generic section/div globally */
.services-page *{
box-sizing:border-box;
}

/* =====================================================
   MAIN PAGE WRAPPER
===================================================== */

.services-page .container{
width:min(1380px,calc(100% - 30px));
margin:auto;
}

/* =====================================================
   HERO SECTION
   EXACT HOTEL PAGE STRUCTURE
===================================================== */

.services-page .services-hero-wrap{
padding:22px 0 0;
margin:0;
}

.services-page .services-hero{
position:relative;
width:min(1380px,calc(100% - 30px));
margin:auto;
height:460px;
border-radius:28px;
overflow:hidden;
background:
linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.62)),
url("../images/services-banner.webp") center center/cover no-repeat;
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

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

.services-page .hero-content{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:30px;
color:#fff;
z-index:2;
}

.services-page .hero-mini-badges{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:18px;
}

.services-page .hero-mini-badges span{
padding:10px 16px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
font-size:13px;
font-weight:700;
backdrop-filter:blur(8px);
}

.services-page .hero-content h1{
margin:0;
font-size:68px;
line-height:1.05;
font-weight:900;
letter-spacing:-1px;
max-width:1100px;
}

.services-page .hero-content p{
margin:18px 0 0;
font-size:19px;
line-height:1.7;
max-width:920px;
}

.services-page .hero-btns{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
margin-top:28px;
}

.services-page .hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 34px;
border-radius:999px;
font-size:15px;
font-weight:800;
transition:.25s ease;
min-width:210px;
text-decoration:none;
}

.services-page .hero-btn:hover{
transform:translateY(-3px);
}

.services-page .btn-primary{
background:linear-gradient(135deg,#ff6a00,#ff0066);
color:#fff;
box-shadow:0 15px 30px rgba(255,90,0,.30);
}

.services-page .btn-secondary{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.22);
color:#fff;
}

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

.services-page .breadcrumb-bar{
padding:22px 0 0;
}

.services-page .breadcrumb-bar .container{
font-size:14px;
font-weight:600;
color:#666;
}

.services-page .breadcrumb-bar a{
color:#ff6a00;
font-weight:800;
text-decoration:none;
}

.services-page .breadcrumb-bar span{
margin:0 8px;
}

/* =====================================================
   COMMON HEADINGS
===================================================== */

.services-page .section-head{
text-align:center;
margin-bottom:42px;
}

.services-page .section-head h2{
margin:0 0 10px;
font-size:46px;
font-weight:900;
line-height:1.15;
}

.services-page .section-head p{
margin:0 auto;
max-width:760px;
font-size:16px;
line-height:1.8;
color:#666;
}

/* =====================================================
   SERVICES GRID
===================================================== */

.services-page .services-main{
padding:55px 0 80px;
}

.services-page .services-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

.services-page .service-card{
background:#fff;
border-radius:24px;
padding:28px 24px;
box-shadow:0 14px 35px rgba(0,0,0,.08);
transition:.28s ease;
text-decoration:none;
color:#111;
display:block;
}

.services-page .service-card:hover{
transform:translateY(-7px);
}

.services-page .service-icon{
font-size:36px;
margin-bottom:14px;
}

.services-page .service-card h3{
margin:0 0 10px;
font-size:22px;
font-weight:800;
}

.services-page .service-card p{
margin:0;
font-size:14px;
line-height:1.8;
color:#666;
}

/* =====================================================
   WHY SECTION
===================================================== */

.services-page .why-section{
padding:85px 0;
background:#fff;
}

.services-page .why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

.services-page .why-card{
background:#f8fafc;
padding:28px 24px;
border-radius:24px;
box-shadow:0 14px 35px rgba(0,0,0,.06);
}

.services-page .why-card h3{
margin:0 0 10px;
font-size:20px;
font-weight:800;
}

.services-page .why-card p{
margin:0;
font-size:14px;
line-height:1.8;
color:#666;
}

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

.services-page .cta-strip{
padding:90px 20px;
text-align:center;
background:linear-gradient(135deg,#ff6a00,#ff0066);
color:#fff;
}

.services-page .cta-strip h2{
margin:0 0 10px;
font-size:48px;
font-weight:900;
}

.services-page .cta-strip p{
margin:0 auto 28px;
max-width:760px;
font-size:16px;
line-height:1.8;
}

.services-page .cta-btn{
display:inline-flex;
padding:16px 36px;
border-radius:999px;
background:#fff;
color:#111;
font-weight:900;
text-decoration:none;
}

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

.services-page .faq-section{
padding:90px 0;
}

.services-page .faq-list{
max-width:980px;
margin:auto;
}

.services-page .faq-box{
background:#fff;
padding:26px;
border-radius:22px;
box-shadow:0 14px 35px rgba(0,0,0,.08);
margin-bottom:18px;
}

.services-page .faq-box h3{
margin:0 0 10px;
font-size:21px;
font-weight:800;
}

.services-page .faq-box p{
margin:0;
font-size:15px;
line-height:1.8;
color:#666;
}

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

@media(max-width:1200px){

.services-page .services-grid{
grid-template-columns:repeat(3,1fr);
}

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

.services-page .hero-content h1{
font-size:56px;
}

}

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

@media(max-width:768px){

.services-page .services-hero-wrap{
padding:16px 0 0;
}

.services-page .services-hero{
width:calc(100% - 16px);
height:360px;
border-radius:22px;
}

.services-page .hero-content{
padding:18px;
}

.services-page .hero-mini-badges{
gap:8px;
margin-bottom:14px;
}

.services-page .hero-mini-badges span{
font-size:11px;
padding:8px 12px;
}

.services-page .hero-content h1{
font-size:34px;
line-height:1.12;
}

.services-page .hero-content p{
font-size:13px;
line-height:1.55;
margin-top:12px;
}

.services-page .hero-btns{
margin-top:20px;
gap:10px;
}

.services-page .hero-btn{
width:100%;
min-width:auto;
padding:14px 16px;
}

.services-page .services-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.services-page .why-grid{
grid-template-columns:1fr;
}

.services-page .section-head h2,
.services-page .cta-strip h2{
font-size:32px;
}

}

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

@media(max-width:520px){

.services-page .services-grid{
grid-template-columns:1fr;
}

.services-page .hero-content h1{
font-size:28px;
}

.services-page .hero-content p{
font-size:12px;
}

.services-page .section-head h2,
.services-page .cta-strip h2{
font-size:28px;
}

}