/* =========================================================
   Visa Information System - Global Styles
   Aligned with site design language: gold / navy / Poppins + Playfair Display
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --gold: #c5a358;
  --navy: #0f172a;
  --light-navy: #1e293b;
  --glass: rgba(255, 255, 255, 0.1);
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.08);
  /* TVB tokens */
  --primary-blue: #003399;
  --accent-purple: #6a11cb;
  --gradient: linear-gradient(135deg, #003399 0%, #6a11cb 100%);
  --light-bg: #f4f7fe;
  --luxury-gold: #DAA520;
  --light-text: #666;
}

/* ---------- Reset ---------- */
html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body {
  background-color: var(--light-bg);
  color: var(--navy);
  overflow-x: hidden;
  overscroll-behavior-y: none;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---------- Section helpers ---------- */
section { position: relative; padding: 50px 8%; }
.section-white { background: #fff; box-shadow: inset 0 1px 0 rgba(0,0,0,.04), inset 0 -1px 0 rgba(0,0,0,.04); }
.section-light { background: var(--light-bg); }
.section-navy { background: var(--navy); color: #fff; }

.container { padding: 0 5% 80px; }
.visa-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 40px;
}

@media(max-width:768px){

.visa-container{

padding:0 20px;

}

}

.section-title {
  text-align: center;
  font-size: 2.2rem;
  margin: 60px 0 40px;
  color: var(--primary-blue);
  position: relative;
}
.section-title::after {
  content: ''; width: 80px; height: 4px; background: var(--gradient);
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 10px;
}

/* ---------- Buttons ---------- */
.btn-view-all {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 40px; background: transparent; color: var(--navy);
  border: 2px solid var(--gold); font-weight: 600; border-radius: 50px;
  transition: var(--transition); text-transform: uppercase; letter-spacing: 1px;
}
.btn-view-all:hover { background: var(--gold); color: #fff; box-shadow: 0 10px 20px rgba(197,163,88,.3); }
.btn-view-all i { transition: transform .3s; }
.btn-view-all:hover i { transform: translateX(8px); }

.btn-book {
  display: inline-block; padding: 10px 22px; border-radius: 30px; font-weight: 600;
  background: var(--gold); color: #fff; transition: .3s;
}
.btn-book:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }

.btn-primary, .btn-secondary {
  display: inline-block; padding: 15px 34px; border-radius: 50px;
  text-decoration: none; font-weight: 600; transition: .3s;
}
.btn-primary { background: #fff; color: #039; }
.btn-primary:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.2); }
.btn-secondary { border: 2px solid #fff; color: #fff; }
.btn-secondary:hover { background: #fff; color: #039; }

.view-all-container { text-align: center; margin-top: 30px; }

/* =========================================================
   HERO  (TVB gradient hero with clip-path)
   ========================================================= */

.hero{
    position:relative;
    min-height:100vh;

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

    text-align:center;

    overflow:hidden;

    background:
        linear-gradient(rgba(15,23,42,.72),rgba(15,23,42,.50)),
        url("https://images.unsplash.com/photo-1530521954074-e64f6810b32d?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(197,163,88,.22),
        transparent 45%);

    pointer-events:none;
}

.hero-content{

    position:relative;
    z-index:2;

    width:100%;
    max-width:900px;

    padding:40px 20px;

    color:#fff;
}

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 22px;

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

    border-radius:40px;

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

    backdrop-filter:blur(10px);

    font-size:.9rem;
    font-weight:600;

    margin-bottom:25px;
}

.hero-badge i{

    color:var(--gold);
}

.hero h1{

    font-family:'Playfair Display',serif;

    font-size:clamp(2.8rem,7vw,5rem);

    line-height:1.1;

    margin-bottom:25px;

    color:#fff;
}

.hero p{

    max-width:760px;

    margin:0 auto 45px;

    font-size:1.15rem;

    line-height:1.9;

    color:rgba(255,255,255,.92);
}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.hero .btn-primary{

    background:#fff;

    color:#003399;
}

.hero .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.hero .btn-secondary{

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

    color:#fff;
}

.hero .btn-secondary:hover{

    background:#fff;

    color:#003399;
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* =========================================================
   TOP DESTINATIONS GRID
   ========================================================= */

.top-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;
}
.top-card {
  background: #fff;
  padding: 0;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
  transition: 0.4s ease;
  border-bottom: 5px solid transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.top-card:hover {
  transform: translateY(-15px);
  border-bottom: 5px solid var(--accent-purple);
  box-shadow: 0 20px 40px rgba(106, 17, 203, 0.1);
}
.top-card-media {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.top-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
  transform: translateZ(0); backface-visibility: hidden;
}
.top-card:hover .top-card-media img { transform: scale(1.1); }
.top-card-body {
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 16px;
}
.top-card-body span {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
}
.top-card-body .price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--luxury-gold);
  letter-spacing: 0.5px;
}
.top-card-body .price span {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--light-text);
}

/* =========================================================
   ALL COUNTRIES GRID
   ========================================================= */

.all-grid{

    display:grid;

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

    gap:28px;

    margin-top:50px;
}

.country-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(20,40,120,.08);

    box-shadow:0 12px 35px rgba(15,23,42,.08);

    transition:.35s ease;

    display:flex;

    flex-direction:column;

    height:100%;
}

.country-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,23,42,.16);
}
.country-media {
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
}
.country-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
  transform: translateZ(0); backface-visibility: hidden;
}

.country-card .country-info{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:26px 24px 28px;

    text-align:center;
}
.country-info h3{

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:18px;

    color:#16213e;
}


.country-price{

    margin-top:auto;

    font-size:1rem;

    font-weight:800;

    color:#d89d12;
}

.country-price span{

    font-size:1rem;

    color:#666;

    font-weight:500;
}

/* ---------- Responsive ---------- */
@media(max-width:768px){

    .hero{

        min-height:80vh;

        background-attachment:scroll;
    }

    .hero-content{

        padding:30px 20px;
    }

    .hero h1{

        font-size:2.7rem;
    }

    .hero p{

        font-size:1rem;
    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;
    }

    .hero .btn-primary,
    .hero .btn-secondary{

        width:100%;
        max-width:320px;
    }
}

/* =========================================================
   MODERN VISA HERO
   ========================================================= */

.hero-detail{

    background:linear-gradient(135deg,#0f172a 0%,#003399 100%);

    padding:90px 0;

    position:relative;

    overflow:hidden;
}

.hero-detail::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.05);
}

.hero-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:center;
}

.hero-left{

    color:#fff;
}

.hero-left h1{

    font-size:3.2rem;

    font-weight:700;

    line-height:1.2;

    margin:20px 0;
}

.hero-left h1 span{

    color:var(--gold);
}

.hero-desc{

    font-size:1.05rem;

    color:rgba(255,255,255,.88);

    line-height:1.9;

    margin-bottom:35px;
}

.hero-highlights{

    display:grid;

    gap:18px;

    margin-bottom:40px;
}

.hero-highlights li{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:16px;

    color:#fff;
}

.hero-highlights i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:var(--gold);

    font-size:18px;
}

.hero-cta{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.hero-detail .btn-primary{

    background:var(--gold);

    color:#fff;
}

.hero-detail .btn-primary:hover{

    background:#fff;

    color:var(--navy);
}

.hero-detail .btn-secondary{

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

    color:#fff;
}

.hero-detail .btn-secondary:hover{

    background:#fff;

    color:var(--navy);
}

/* Visa Card */

.hero-right{

    display:flex;

    justify-content:center;
}

.visa-card{

    width:340px;

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    position:relative;

    overflow:hidden;
}

.visa-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,transparent,rgba(197,163,88,.08));

    pointer-events:none;
}

.visa-card-header{

    font-size:15px;

    font-weight:600;

    color:#666;

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:35px;
}

.visa-card-header i{

    color:var(--gold);
}

.visa-country{

    font-size:32px;

    font-weight:700;

    color:var(--navy);

    margin-bottom:10px;
}

.visa-type{

    color:#555;

    margin-bottom:30px;
}

.visa-feature{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #ececec;

    font-size:15px;
}

.visa-feature strong{

    color:var(--navy);

    font-weight:600;
}

.visa-feature span{

    color:#666;
}

.visa-card hr{

    border:none;

    border-top:1px solid #ececec;

    margin:0 0 10px;
}

.visa-status{

    display:inline-flex;

    padding:10px 18px;

    border-radius:30px;

    background:#eafaf1;

    color:#1c8b45;

    font-weight:600;

    font-size:14px;
}

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;
}

.hero-highlights{

justify-content:center;
}

.hero-highlights li{

justify-content:center;
}

.hero-cta{

justify-content:center;
}

.hero-right{

margin-top:30px;
}

.hero-left h1{

font-size:2.5rem;
}

}

/* =========================================================
   DETAIL PAGE (retained from prior design, gold/navy)
   ========================================================= */
.detail-hero {
  background: linear-gradient(rgba(15,23,42,.82), rgba(15,23,42,.6)), center/cover no-repeat;
  min-height: 56vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; color: #fff; padding: 64px 8%;
}
.detail-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 10px; color: #fff;
}
.detail-hero .vtype { color: rgba(255,255,255,.9); font-size: 1.05rem; margin-bottom: 20px; }
.detail-hero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.detail-hero .btn-primary { background: var(--gold); color: #fff; }
.detail-hero .btn-primary:hover { background: #fff; color: var(--navy); }
.detail-hero .btn-secondary { border-color: rgba(255,255,255,.6); }

.breadcrumb {
  display: flex; align-items: center; gap: 8px; font-size: .85rem;
  color: rgba(255,255,255,.8); margin-bottom: 22px; flex-wrap: wrap; justify-content: center;
}
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { opacity: .5; }

.detail-block {
  background: #fff; border-radius: 20px; padding: 40px;
  margin-bottom: 30px; box-shadow: var(--shadow-md);
}
.detail-block h2 {
  font-family: 'Playfair Display', serif; font-size: 1.7rem; color: var(--navy);
  margin-bottom: 8px; display: flex; align-items: center; gap: 14px;
}
.detail-block h2 .icon {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(197,163,88,.12);
  color: var(--gold); display: grid; place-items: center; flex-shrink: 0; font-size: 20px;
}
.detail-block > p { color: #555; margin-bottom: 18px; }
.detail-block .block-sub { color: #94a3b8; font-size: .95rem; margin-bottom: 24px; }

/*=========================================================
SECTION LAYOUT
=========================================================*/

.visa-container{

    max-width:1400px;

    margin:auto;

    padding:0 40px;
}

.visa-section{

    padding:90px 0;
}

.bg-white{

    background:#fff;
}

.bg-cream{

    background:#F1F5F8;
}

.visa-content{

    width:100%;
}

.section-tag{

    display:inline-block;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--gold);

    font-weight:600;

    margin-bottom:18px;
}



.section-line{

    width:85px;

    height:4px;

    background:var(--gold);

    margin-bottom:35px;
}

.section-description{

    font-size:20px;

    line-height:2;

    color:#4b5563;

    max-width:1200px;
}

@media(max-width:768px){

.visa-container{

padding:0 20px;

}

.section-heading{

font-size:36px;

}

.section-description{

font-size:17px;

line-height:1.9;

}

}

/* ---------- Process pipeline ---------- */
.process-list { display: flex; flex-direction: column; gap: 16px; counter-reset: step; }
.process-item {
  display: flex; gap: 18px; padding: 22px 24px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 14px; transition: var(--transition);
}
.process-item:hover { background: rgba(197,163,88,.06); border-color: rgba(197,163,88,.3); transform: translateX(4px); }
.process-item .num {
  counter-increment: step; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-family: 'Playfair Display', serif; font-size: 1.1rem;
}
.process-item .num::before { content: counter(step); }
.process-item p { color: #475569; padding-top: 8px; }

/* ---------- Document checklist ---------- */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.check-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; transition: var(--transition);
}
.check-item:hover { border-color: rgba(197,163,88,.4); background: rgba(197,163,88,.05); }
.check-item .tick {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #fff; display: grid; place-items: center;
}
.check-item span { color: #475569; font-size: .95rem; }

/* ---------- Pricing matrix ---------- */
.pricing-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.pricing-card {
  background: linear-gradient(160deg, #fff, rgba(197,163,88,.05));
  border: 1px solid rgba(197,163,88,.2); border-radius: 20px; padding: 36px; box-shadow: var(--shadow-md);
}
.pricing-card .price-tag { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 700; color: var(--gold); margin: 6px 0 4px; }
.pricing-card .price-sub { color: #94a3b8; font-size: .9rem; margin-bottom: 24px; }
.pricing-card .included-list { display: flex; flex-direction: column; gap: 14px; }
.pricing-card .included-list li { display: flex; gap: 12px; align-items: flex-start; color: #475569; font-size: .95rem; }
.pricing-card .included-list i { color: var(--gold); flex-shrink: 0; margin-top: 3px; }

.legal-note {
  background: rgba(197,163,88,.08); border: 1px solid rgba(197,163,88,.25); border-left: 4px solid var(--gold);
  border-radius: 14px; padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start;
}
.legal-note .alert-ico { color: var(--gold); flex-shrink: 0; font-size: 1.4rem; }
.legal-note strong { color: var(--navy); display: block; margin-bottom: 6px; font-size: 1rem; }
.legal-note p { color: #475569; font-size: .92rem; }

@media (max-width: 768px) { .pricing-wrap { grid-template-columns: 1fr; } }


/*=========================================================
APPLICATION PROCESS
=========================================================*/

.process-detail-list{

    display:flex;

    flex-direction:column;

    gap:25px;

    margin-top:60px;

}

.process-detail{

    display:flex;

    gap:30px;

    padding:30px;

    background:#fff;

    border-radius:18px;

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

    transition:.35s;

}

.process-detail:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.process-count{

    min-width:70px;

    height:70px;

    border-radius:16px;

    background:var(--gold);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    font-weight:700;

}

.process-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}


.process-content p{
    color:#6b7280;
    line-height:1.9;
    font-size:20px;
    text-align:center;
    margin:0;
}

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

@media(max-width:992px){

.process-timeline{

overflow-x:auto;

justify-content:flex-start;

padding-bottom:20px;

}

.timeline-item{

min-width:140px;

}

.process-timeline::before{

left:70px;

right:70px;

}

}

@media(max-width:768px){

.process-detail{

flex-direction:column;

gap:20px;

padding:25px;

}

.process-count{

width:60px;

height:60px;

min-width:60px;

font-size:22px;

}

.process-content h3{

font-size:20px;

}

.process-content p{
    font-size:15px;
    text-align:center;
}

}




/* =========================================================
   FAQ ACCORDION
   ========================================================= */
.faq-container { max-width: 900px; margin: 0 auto; }
.faq-item {
  background: #fff; border-radius: 12px; margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05); overflow: hidden; transition: var(--transition);
}
.faq-item.open { box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.faq-question {
  width: 100%; border: none; background: #fff; cursor: pointer;
  padding: 22px 30px; display: flex; justify-content: space-between; align-items: center;
  font-size: 1.05rem; font-weight: 600; text-align: left; color: var(--navy); font-family: 'Poppins', sans-serif;
}
.faq-question:hover { color: var(--gold); }
.faq-question span.icon { font-size: 30px; color: var(--gold); transition: transform .35s; line-height: 1; }
.faq-item.open .faq-question span.icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s; }
.faq-answer p { padding: 0 30px 25px; line-height: 1.8; color: #555; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.holiday-cta { text-align: center; padding: 70px 8%; background: linear-gradient(135deg, #039, #0057d8); color: #fff; }
.holiday-cta-content { max-width: 850px; margin: auto; }
.holiday-cta h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 20px; line-height: 1.2; }
.holiday-cta p { font-size: 1.1rem; line-height: 1.9; color: rgba(255,255,255,.9); margin-bottom: 40px; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* =========================================================
   404 BLOCK
   ========================================================= */
.not-found-block { text-align: center; padding: 60px 24px; max-width: 560px; margin: 0 auto; }
.not-found-block .code { font-family: 'Playfair Display', serif; font-size: 4.5rem; font-weight: 700; color: var(--gold); line-height: 1; }
.not-found-block h1 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin: 14px 0 10px; color: var(--navy); }
.not-found-block p { color: #555; margin-bottom: 26px; }

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

@media(max-width:1200px){

    .top-grid{

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

    .all-grid{

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

}

@media(max-width:900px){

    .top-grid,
    .all-grid{

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

}

@media(max-width:600px){

    .top-grid,
    .all-grid{

        grid-template-columns:1fr;

        gap:25px;
    }

}


/* ==========================================
   DOCUMENT CHECKLIST
========================================== */

.documents-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:50px;
}

.document-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:18px;
    padding:24px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    transition:.3s ease;
}

.document-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(15,23,42,.10);
}

.document-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#eef9f2;
    color:#16a34a;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:18px;
}

.document-text{
    font-size:16px;
    line-height:1.7;
    color:#374151;
    font-weight:500;
}

@media(max-width:768px){

.documents-grid{
    grid-template-columns:1fr;
}

.document-card{
    padding:20px;
}

}

/* ==========================================
   PRICING SECTION
========================================== */

.pricing-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    align-items:start;
    margin-top:50px;
}

.pricing-card-new{
    background:#fff;
    border-radius:24px;
    padding:40px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    border-top:5px solid #d4af37;
}

.pricing-price{
    font-size:48px;
    font-weight:700;
    color:var(--navy);
    margin-bottom:8px;
}

.pricing-subtitle{
    color:#6b7280;
    margin-bottom:30px;
    font-size:16px;
}

.pricing-list{
    list-style:none;
    margin:0;
    padding:0;
}

.pricing-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid #eef2f7;
}

.pricing-list li:last-child{
    border-bottom:none;
}

.pricing-list i{
    color:#16a34a;
    margin-top:3px;
}

.pricing-card-new .btn-primary{
    width:100%;
    margin-top:30px;
    text-align:center;
}

.pricing-note{
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.note-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#FFF8E6;
    color:#D4AF37;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.pricing-note h3{
    margin:0 0 10px;
    font-size:22px;
    color:var(--navy);
}

.pricing-note p{
    margin:0;
    line-height:1.8;
    color:#6b7280;
}

@media(max-width:992px){

.pricing-layout{
    grid-template-columns:1fr;
}

}

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

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

.faq-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:18px;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 8px 25px rgba(15,23,42,.05);
    transition:.3s;
}

.faq-card:hover{
    box-shadow:0 15px 35px rgba(15,23,42,.08);
}

.faq-question{
    width:100%;
    border:none;
    background:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 28px;
    cursor:pointer;
    font-size:18px;
    font-weight:600;
    color:var(--navy);
    text-align:left;
}

.faq-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f3f6fb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    transition:.3s;
    flex-shrink:0;
}

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

.faq-answer p{
    padding:0 28px 24px;
    margin:0;
    color:#6b7280;
    line-height:1.8;
}

.faq-item.active .faq-answer,
.faq-card.active .faq-answer{
    max-height:500px;
}

.faq-item.active .faq-icon,
.faq-card.active .faq-icon{
    transform:rotate(45deg);
    background:#d4af37;
    color:#fff;
}