/* ============================================================
MUSAFIREVISA — Modern Design Override
Colors preserved: #00a0a8 (teal) · #f37d26 (orange)
Drop this AFTER style.css in the layout
============================================================ */
/* ── Root Variables ─────────────────────────────────────── */
:root {
--teal: #00a0a8;
--teal-dark: #007f86;
--teal-light: #e6f7f8;
--orange: #f37d26;
--orange-dark:#d9661a;
--dark: #1a2332;
--text: #374151;
--text-light: #6b7280;
--border: #e5e7eb;
--white: #ffffff;
--bg-soft: #f8fafc;
--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
--shadow-md: 0 4px 16px rgba(0,0,0,.10);
--shadow-lg: 0 10px 40px rgba(0,0,0,.14);
--radius: 10px;
--radius-lg: 16px;
--transition: all .25s cubic-bezier(.4,0,.2,1);
}
/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: 'Inter', 'Source Sans Pro', basicFont, sans-serif !important;
font-size: 1.35rem !important; /* global baseline ≈21.6px */
line-height: 1.6 !important;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
}
/* Force the 1.35rem cascade into Bootstrap legacy defaults that override body */
body p, body li, body td, body th,
body .table, body .table th, body .table td,
body .panel-body, body .col-sm-12, body .col-md-12, body .col-xs-12,
body .col-sm-6, body .col-md-6, body .col-xs-6,
body .col-sm-4, body .col-md-4{
font-size: inherit !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', titleFont, sans-serif;
color: var(--dark);
line-height: 1.3;
font-weight: 700;
}
p { line-height: 1.7; color: var(--text); }
a { transition: var(--transition); }
/* ── HEADER / NAVBAR ────────────────────────────────────── */
header {
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 20px rgba(0,160,168,.2);
}
.headerhero {
background: var(--teal) !important;
padding: 0 !important;
min-height: auto !important;
}
.navbar-custom {
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.navbar-custom .container-fluid {
padding: 0 15px;
}
/* Logo */
.navbar-brand {
padding: 12px 0 !important;
height: auto !important;
}
.navbar-brand img {
height: 44px !important;
width: auto !important;
filter: brightness(0) invert(1);
}
/* Nav links */
.navbar-custom .navbar-nav > li > a {
color: rgba(255,255,255,.90) !important;
font-size:1.35rem !important;
font-weight: 600 !important;
letter-spacing: .3px;
padding: 20px 18px !important;
position: relative;
transition: var(--transition);
text-transform: none;
}
.navbar-custom .navbar-nav > li > a::after {
content: '';
position: absolute;
bottom: 12px;
left: 18px;
right: 18px;
height: 2px;
background: var(--orange);
border-radius: 2px;
transform: scaleX(0);
transition: transform .25s ease;
}
.navbar-custom .navbar-nav > li > a:hover {
color: #fff !important;
background: transparent !important;
}
.navbar-custom .navbar-nav > li > a:hover::after,
.navbar-custom .navbar-nav > li.active > a::after {
transform: scaleX(1);
}
/* CTA button in nav */
.navbar-custom .navbar-nav > li.nav-cta > a {
background: var(--orange) !important;
color: #fff !important;
border-radius: 25px !important;
padding: 9px 22px !important;
margin: 12px 0 12px 10px !important;
font-weight: 700 !important;
box-shadow: 0 4px 14px rgba(243,125,38,.40);
}
.navbar-custom .navbar-nav > li.nav-cta > a::after { display: none; }
.navbar-custom .navbar-nav > li.nav-cta > a:hover {
background: var(--orange-dark) !important;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(243,125,38,.50) !important;
}
/* Hamburger toggle */
.navbar-toggle {
border-color: rgba(255,255,255,.5) !important;
margin-top: 14px !important;
margin-bottom: 14px !important;
border-radius: 6px !important;
}
.navbar-toggle .icon-bar {
background-color: #fff !important;
width: 22px;
height: 2px;
border-radius: 2px;
}
/* Mobile dropdown */
@media (max-width: 767px) {
.navbar-custom .navbar-collapse {
background: var(--teal-dark);
border-top: 1px solid rgba(255,255,255,.15);
padding: 8px 0;
}
.navbar-custom .navbar-nav > li > a::after { display: none; }
.navbar-custom .navbar-nav > li > a {
padding: 12px 20px !important;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-custom .navbar-nav > li.nav-cta > a {
margin: 12px 20px !important;
text-align: center;
}
}
/* ── HERO BANNER SECTIONS ───────────────────────────────── */
.hero {
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%) !important;
color: #fff;
padding: 60px 0 !important;
min-height: auto !important;
}
.hero h1, .hero h2 { color: #fff; }
/* Country banner modernize */
.oman-banner, .saudi-arabia-banner, .turkey-banner,
.uae-banner, .thailand-banner, .malaysia-banner,
.egypt-banner, .georgia-banner, .sri-lanka-banner {
min-height: 260px !important;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
background-size: cover !important;
background-position: center !important;
position: relative;
}
.oman-banner::before, .saudi-arabia-banner::before, .turkey-banner::before,
.uae-banner::before, .thailand-banner::before, .malaysia-banner::before,
.egypt-banner::before, .georgia-banner::before, .sri-lanka-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,160,168,.3) 0%, rgba(26,35,50,.6) 100%);
border-radius: inherit;
}
/* ── SECTIONS ───────────────────────────────────────────── */
.section {
padding: 56px 0 !important;
min-height: auto !important;
}
/* ── CARDS / PANELS ─────────────────────────────────────── */
.panel, .price_card, .panel-default {
border: 1px solid var(--border) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-sm) !important;
transition: box-shadow .25s ease, transform .25s ease;
overflow: hidden;
background: var(--white);
}
.panel:hover, .price_card:hover {
box-shadow: var(--shadow-md) !important;
transform: translateY(-3px);
}
.panel-heading {
background: transparent !important;
border-bottom: 2px solid var(--border) !important;
padding: 16px 20px !important;
font-weight: 700;
font-size: 16px;
color: var(--dark);
}
.panel-body { padding: 20px !important; }
/* Pricing card highlight */
.price_card .price {
font-size: 40px !important;
font-weight: 800 !important;
color: var(--teal) !important;
line-height: 1.1;
}
/* ── BUTTONS ─────────────────────────────────────────────── */
.btn, .btn-lg, .btn-sm {
font-weight: 600 !important;
border-radius: 8px !important;
transition: var(--transition) !important;
letter-spacing: .2px;
border: none !important;
cursor: pointer;
}
/* Primary teal button */
.btn-danger,
.btn_cmncolor,
[class*="apply"],
.btn-primary {
background: var(--orange) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(243,125,38,.30) !important;
}
.btn-danger:hover,
.btn_cmncolor:hover,
.btn-primary:hover {
background: var(--orange-dark) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(243,125,38,.40) !important;
color: #fff !important;
}
/* Teal CTA button */
.btn-teal,
.know-more-opt {
background: var(--teal) !important;
color: #fff !important;
border: 2px solid var(--teal) !important;
box-shadow: 0 4px 14px rgba(0,160,168,.25) !important;
}
.btn-teal:hover,
.know-more-opt:hover {
background: var(--teal-dark) !important;
transform: translateY(-2px) !important;
color: #fff !important;
}
/* Outline */
.btn_whtcolor {
background: transparent !important;
color: var(--teal) !important;
border: 2px solid var(--teal) !important;
}
.btn_whtcolor:hover {
background: var(--teal) !important;
color: #fff !important;
}
/* ── FORMS ───────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
border: 1.5px solid var(--border) !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-size:1.35rem !important;
color: var(--text) !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
height: auto !important;
line-height: 1.5 !important;
background: #fff !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(--teal) !important;
box-shadow: 0 0 0 3px rgba(0,160,168,.12) !important;
outline: none !important;
}
label {
font-weight: 600 !important;
font-size: 13px !important;
color: var(--text) !important;
margin-bottom: 5px !important;
display: block;
float: none;
}
/* ── STEP INDICATORS ─────────────────────────────────────── */
.step {
background: var(--teal-light) !important;
border: 3px solid var(--teal) !important;
color: var(--teal) !important;
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
font-size: 16px !important;
transition: var(--transition);
}
.step.active,
.step.completed {
background: var(--teal) !important;
color: #fff !important;
}
/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
background: var(--grad-teal) !important;
color: rgba(255,255,255,.85);
padding: 40px 0 14px !important;
}
.footer .panel-title{ border-bottom-color: rgba(255,255,255,.55) !important; }
.footer .nav li a:hover{ color: #fff !important; border-left-color: var(--orange); }
/* Tighter footer columns + menu icons */
.footer > .container > .row,
.footer .container .row{
margin-left:-4px !important; margin-right:-4px !important;
display:flex !important; flex-wrap:wrap !important;
}
.footer .container .row > [class*="col-"]{
padding-left:4px !important; padding-right:4px !important;
}
.fmenu-ic{
display:inline-block; width:16px; margin-right:7px;
color:rgba(255,255,255,.7) !important;
font-size:12px; text-align:center;
transition:var(--transition);
}
.footer .nav li a:hover .fmenu-ic{ color:var(--orange) !important; }
.footer .panel-title {
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
margin-bottom: 16px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid var(--teal) !important;
display: block !important;
float: none !important;
}
.footer .nav {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
.footer .nav li {
padding: 0 !important;
margin: 0 !important;
float: none !important;
width: 100%;
}
.footer .nav li a {
color: rgba(255,255,255,.85) !important;
font-size:1.35rem !important;
padding: 4px 0 !important;
display: block !important;
float: none !important;
transition: var(--transition) !important;
border-left: none !important;
padding-left: 0 !important;
}
.footer .nav li a:hover {
color: #ffffff !important;
padding-left: 6px !important;
border-left: none !important;
}
/* Footer bottom bar */
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.10);
margin-top: 16px;
padding-top: 12px;
font-size: 13px;
color: rgba(255,255,255,.45);
text-align: center;
clear: both;
float: none;
width: 100%;
}
/* Footer social icons */
.footer .social-icons {
list-style: none !important;
padding: 0 !important;
float: none !important;
}
.footer .social-icons li {
float: none !important;
display: inline-block;
margin-right: 8px;
}
.footer .glyphicon-envelope {
color: var(--teal);
margin-right: 6px;
}
/* ── WHATSAPP FLOATING ACTION BUTTON ─────────────────────── */
.wa__btn_popup {
position: fixed !important;
bottom: 28px !important;
right: 28px !important;
width: 60px !important;
height: 60px !important;
background: #25d366 !important;
border-radius: 50% !important;
padding: 0 !important;
cursor: pointer;
box-shadow: 0 8px 28px rgba(37,211,102,.50) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
z-index: 999;
transition: var(--transition);
float: none !important;
animation: waPulse 2.2s ease-in-out infinite;
}
@keyframes waPulse{
0%,100%{ box-shadow:0 8px 28px rgba(37,211,102,.50), 0 0 0 0 rgba(37,211,102,.55); }
60%{ box-shadow:0 8px 28px rgba(37,211,102,.50), 0 0 0 18px rgba(37,211,102,0); }
}
.wa__btn_popup:hover {
transform: scale(1.08) !important;
box-shadow: 0 12px 36px rgba(37,211,102,.60) !important;
}
/* Hide the legacy text label (was overlapping into a broken pill) */
.wa__btn_popup_txt {
position:absolute !important;
right: 72px !important;
top: 50% !important;
transform: translateY(-50%);
white-space: nowrap;
background: #1a2332 !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 8px 14px !important;
border-radius: 8px !important;
box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
float: none !important;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.wa__btn_popup_txt::after{
content:""; position:absolute; right:-6px; top:50%;
transform: translateY(-50%);
border:6px solid transparent; border-left-color:#1a2332;
}
.wa__btn_popup:hover .wa__btn_popup_txt{ opacity:1; transform:translateY(-50%) translateX(-4px); }
.wa__btn_popup_icon {
width: 32px !important;
height: 32px !important;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.28 7.044L.787 23.787l4.836-1.27A11.95 11.95 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818c-2.25 0-4.34-.682-6.077-1.852l-.434-.258-2.716.714.726-2.645-.28-.45A9.824 9.824 0 012.182 12C2.182 6.578 6.578 2.182 12 2.182S21.818 6.578 21.818 12 17.422 21.818 12 21.818z'/%3E%3C/svg%3E") center/28px no-repeat !important;
float: none !important;
}
/* ── WHATSAPP CHAT POPUP ─────────────────────────────────── */
.wa__popup_chat_box {
position: fixed !important;
bottom: 90px !important;
right: 28px !important;
width: 300px !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-lg) !important;
overflow: hidden;
z-index: 998;
float: none !important;
}
.wa__popup_heading {
background: var(--teal) !important;
padding: 20px !important;
float: none !important;
}
.wa__popup_title {
color: #fff !important;
font-size: 16px !important;
font-weight: 700 !important;
float: none !important;
margin-bottom: 4px !important;
}
.wa__popup_intro {
color: rgba(255,255,255,.85) !important;
font-size: 13px !important;
float: none !important;
}
/* ── BREADCRUMBS ─────────────────────────────────────────── */
.breadcrumb {
background: var(--bg-soft) !important;
border-radius: 8px !important;
padding: 10px 16px !important;
font-size: 13px;
border: 1px solid var(--border);
}
.breadcrumb > li + li::before { color: var(--teal); }
/* ── TABLES ──────────────────────────────────────────────── */
.table {
border-radius: var(--radius) !important;
overflow: hidden;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-sm) !important;
}
.table thead th {
background: var(--teal) !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: .3px;
border: none !important;
padding: 12px 16px !important;
}
.table td {
border-bottom: 1px solid var(--border) !important;
padding: 10px 16px !important;
font-size:1.35rem;
background: #fff;
}
.table tr:nth-child(even) td {
background: var(--bg-soft) !important;
}
.table tr:hover td {
background: var(--teal-light) !important;
}
/* ── AJAX LOADER ─────────────────────────────────────────── */
#ajax_loader {
backdrop-filter: blur(4px) !important;
background: rgba(0,0,0,.5) !important;
}
#ajax_loader > div {
background: var(--white);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-lg);
width: 90px !important;
height: 90px !important;
}
/* ── ALERT / NOTIFICATION BOXES ──────────────────────────── */
.alertBox {
border-radius: 8px !important;
padding: 12px 16px !important;
font-size:1.35rem !important;
border-left: 4px solid currentColor !important;
border: none !important;
}
.error { border-left: 4px solid #e53e3e !important; }
.success { border-left: 4px solid #38a169 !important; }
.warning { border-left: 4px solid #d69e2e !important; }
.notification { border-left: 4px solid var(--teal) !important; }
/* ── SMOOTH SCROLL ───────────────────────────────────────── */
html { scroll-behavior: smooth; }
/* ── BLOG POST CARDS ─────────────────────────────────────── */
.post {
border-radius: var(--radius-lg) !important;
overflow: hidden;
box-shadow: var(--shadow-sm) !important;
transition: var(--transition) !important;
border: 1px solid var(--border);
}
.post:hover {
box-shadow: var(--shadow-md) !important;
transform: translateY(-4px) !important;
}
.post .post-body {
margin: 0 !important;
padding: 20px !important;
background: #fff !important;
}
.post-category a {
color: var(--orange) !important;
background: rgba(243,125,38,.1);
padding: 3px 10px !important;
border-radius: 20px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .5px;
}
/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonial-panel-blue,
.testimonial-panel-green {
border-radius: var(--radius-lg) !important;
padding: 24px !important;
box-shadow: var(--shadow-md) !important;
}
.testimonial-panel-blue {
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%) !important;
}
.testimonial-panel-green {
background: linear-gradient(135deg, #00aa86 0%, #007f65 100%) !important;
}
/* ── FAQ ACCORDIONS ──────────────────────────────────────── */
.panel-group .panel {
margin-bottom: 8px !important;
}
.panel-group .panel-heading a {
color: var(--dark) !important;
font-weight: 600 !important;
display: block;
float: none !important;
}
.panel-group .panel-heading a:hover {
color: var(--teal) !important;
}
.panel-group .panel-heading {
border-bottom: none !important;
cursor: pointer;
}
/* ── NAV TABS ────────────────────────────────────────────── */
.nav-tabs {
border-bottom: 2px solid var(--border) !important;
}
.nav-tabs > li > a {
border-radius: 8px 8px 0 0 !important;
color: var(--text-light) !important;
font-weight: 600 !important;
border: none !important;
padding: 10px 20px !important;
transition: var(--transition);
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
color: var(--teal) !important;
background: var(--teal-light) !important;
border-bottom: 2px solid var(--teal) !important;
}
/* ── UTILITY: Section headings ───────────────────────────── */
.section-title {
position: relative;
display: inline-block;
padding-bottom: 10px;
margin-bottom: 32px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 3px;
background: var(--orange);
border-radius: 3px;
}
/* ── RESPONSIVE TWEAKS ───────────────────────────────────── */
@media (max-width: 768px) {
.section { padding: 36px 0 !important; }
.footer { padding: 40px 0 20px !important; }
.footer .col-lg-3 { margin-bottom: 28px; }
.wa__btn_popup { right: 16px !important; bottom: 16px !important; }
.wa__popup_chat_box { right: 16px !important; bottom: 80px !important; width: calc(100vw - 32px) !important; }
}
/* ── Inter font fallback (system) ────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ============================================================
TREND 2.0 — Modern refinement layer (2025)
Appended last so it wins the cascade. Brand colors unchanged.
============================================================ */
:root{
--grad-teal: linear-gradient(135deg,#00b3bc 0%,#00a0a8 55%,#007f86 100%);
--grad-orange: linear-gradient(135deg,#ff9a4d 0%,#f37d26 60%,#d9661a 100%);
--ring: 0 0 0 4px rgba(0,160,168,.15);
--ring-orange: 0 0 0 4px rgba(243,125,38,.18);
}
/* ── HERO: glassy gradient band ──────────────────────────── */
.headerhero,
section[class*="-banner"]{
background: var(--grad-teal) !important;
position: relative;
overflow: hidden;
}
section[class*="-banner"] .panel-heading h1,
.headerhero h1{
color:#fff !important;
font-weight:800;
letter-spacing:-.5px;
text-shadow:0 2px 12px rgba(0,0,0,.12);
}
/* Steps band — depth + animated number badges */
section.hero{ background: var(--grad-teal) !important; color:#fff; }
section.hero h1{ color:#fff !important; }
.step1 span,.step2 span,.step3 span{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
background:rgba(255,255,255,.16);
border:2px solid rgba(255,255,255,.55);
color:#fff; font-size:22px; font-weight:800;
backdrop-filter: blur(4px);
box-shadow:0 8px 24px rgba(0,0,0,.15);
transition:var(--transition);
}
.step1:hover span,.step2:hover span,.step3:hover span{
background:#fff; color:var(--teal); transform:translateY(-4px) scale(1.05);
}
section.hero h3{ color:#fff !important; margin-top:14px; }
section.hero p{ color:rgba(255,255,255,.85) !important; }
/* ── SECTION HEADINGS — gradient underline accent ────────── */
.features h2,
h2[style*="13ce67"]{
color:var(--teal) !important;
font-weight:800 !important;
letter-spacing:-.5px;
}
.features h2::after,
h2[style*="13ce67"]::after{
content:""; display:block; width:64px; height:4px; margin:14px auto 0;
background:var(--grad-orange); border-radius:4px;
}
/* ── POPULAR VISA CARDS — modern lift cards ──────────────── */
.widget-panel.widget-style-2{
background:#fff !important;
border:1px solid var(--border);
border-radius:var(--radius-lg) !important;
padding:30px 18px 26px !important;
box-shadow:var(--shadow-sm);
transition:var(--transition);
position:relative;
overflow:hidden;
text-align:center;
}
.widget-panel.widget-style-2::before{
content:""; position:absolute; inset:0 0 auto 0; height:4px;
background:var(--grad-teal); transform:scaleX(0); transform-origin:left;
transition:var(--transition);
}
.widget-panel.widget-style-2:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
border-color:transparent;
}
.widget-panel.widget-style-2:hover::before{ transform:scaleX(1); }
.widget-panel.widget-style-2 img{
width:64px !important; height:64px !important;
border-radius:50% !important; object-fit:cover;
box-shadow:0 6px 18px rgba(0,160,168,.25);
transition:var(--transition);
}
.widget-panel.widget-style-2:hover img{ transform:scale(1.08) rotate(-3deg); }
.widget-panel.widget-style-2 h4{ margin:16px 0 6px; font-size:1.35rem; }
.widget-panel.widget-style-2 span[style*="13ce67"]{
color:var(--orange) !important; font-weight:700; font-size:.98rem;
}
/* ── FEE / PRICING CARDS — premium plan cards ────────────── */
.price_card{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:var(--radius-lg) !important;
box-shadow:var(--shadow-md);
overflow:hidden;
transition:var(--transition);
}
.price_card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.price_card .header,
.price_card .header.bg-purple,
.price_card .header.bg-gray{
background:var(--grad-teal) !important;
color:#fff !important;
padding:24px 16px !important;
}
.price_card .price,
.price_card h1{
color:var(--teal) !important;
font-weight:800 !important;
letter-spacing:-1px;
}
.price-features li,
.price_card li{ padding:9px 0; border-bottom:1px dashed var(--border); }
.price_card .name{ color:#fff !important; }
/* ── FORMS — modern inputs with focus glow ───────────────── */
.form-control{
height:auto !important;
min-height:48px;
padding:12px 16px !important;
border:1.5px solid var(--border) !important;
border-radius:var(--radius) !important;
font-size:15px !important;
background:#fff !important;
box-shadow:none !important;
transition:var(--transition);
}
.form-control:focus{
border-color:var(--teal) !important;
box-shadow:var(--ring) !important;
outline:none !important;
}
select.form-control{
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300a0a8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:right 16px center !important;
padding-right:42px !important;
}
.form-group label,
.panel-title{ font-weight:600; color:var(--dark); margin-bottom:7px; }
textarea.form-control{ min-height:96px; }
input[type="file"].form-control{ padding:10px 14px !important; }
#nationalistlive .panel-title{ color:#fff !important; }
/* ── BUTTONS — pill, gradient, lift ──────────────────────── */
.btn,.btn-purple,.btn-pink,.btn-success,.btn-info,
button[type="submit"], input[type="submit"]{
border:none !important;
border-radius:50px !important;
font-weight:700 !important;
letter-spacing:.2px;
padding:13px 30px !important;
transition:var(--transition) !important;
}
.btn-purple,.btn-success,.btn-info,
button[name="pay_now"],
input#next,#submit,#submit_regular,#submit_express{
background:var(--grad-orange) !important; color:#fff !important;
box-shadow:0 6px 18px rgba(243,125,38,.28);
}
.btn-pink{ background:var(--grad-teal) !important; color:#fff !important;
box-shadow:0 6px 18px rgba(0,160,168,.28); }
.btn:hover,button[type="submit"]:hover,input[type="submit"]:hover{
transform:translateY(-3px); filter:brightness(1.04);
box-shadow:0 12px 28px rgba(243,125,38,.36) !important;
}
.btn:active{ transform:translateY(-1px); }
.price_card .btn{ width:auto; min-width:170px; }
/* ── PAYMENT SUMMARY — clean card + striped table ────────── */
table.table thead th, table thead th{
background:var(--grad-teal) !important; color:#fff !important;
border:none !important; font-weight:600; padding:14px 16px !important;
}
table.table tbody tr:nth-child(even){ background:var(--bg-soft); }
table.table td, table td{ padding:13px 16px !important; vertical-align:middle; }
[class*="lead"]{ color:var(--teal); font-weight:700; }
/* ── FAQ ACCORDION — card style ──────────────────────────── */
.panelfaq{
border:1px solid var(--border) !important;
border-radius:10px !important;
margin-bottom:8px !important;
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:var(--transition);
}
.panelfaq:hover{ box-shadow:var(--shadow-md); }
.panelfaq .panel-heading,
.panelfaq .panel-heading.accordion-toggle{
padding:0 !important; margin:0 !important;
min-height:0 !important; line-height:1 !important;
background:none !important; border:none !important;
}
.panel-titlefaq {
margin: 0 !important;
font-size:1.35rem !important;
line-height: 1.3 !important;
padding: 0 !important;
}
.panel-titlefaq a{
display:flex !important; align-items:center; gap:10px;
padding:6px 12px !important; color:var(--dark) !important; font-weight:600;
min-height:0 !important; line-height:1.3 !important;
text-decoration:none !important;
}
.panel-titlefaq img{
width:28px !important; height:28px !important;
border-radius:50% !important; object-fit:cover;
flex-shrink:0; padding:0 !important; margin:0 !important;
}
/* Hide legacy duplicate "underline.png" image — section already has CSS underline */
img[alt="underline"],
img[src*="underline.png"]{ display:none !important; }
.question-toggle{ cursor:pointer; transition:var(--transition); }
.question-toggle:hover{ background:var(--teal-light); }
/* ── Section rhythm + misc polish ────────────────────────── */
section.section.features{
background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);
padding-top:0 !important; padding-bottom:16px !important;
margin-top:0 !important;
}
.container{ max-width:1200px; }
img{ max-width:100%; }
.pt80{ padding-top:4px !important; padding-bottom:0 !important; }
.section.features .row.pt80 > .col-sm-12{ padding-top:0 !important; padding-bottom:0 !important; }
/* === [REMOVED v1 hero / boarding-pass deck / dest-grid — superseded by mv-hero3 + mv-quick] === */
/* The following block (~163 lines) of unused CSS was removed:
.mv-hero, .mv-hero-bg, .mv-hero-grid, .mv-hero-col, .mv-hero-badge,
.mv-hero-title, .mv-hero-sub, .mv-hero-actions, .mv-hero-trust, .mv-hero-visual,
.mv-btn-light, .mv-btn-ghost,
.mv-deck, .mv-deck-layer, .mv-deck-layer--1/2,
.mv-pass, .mv-pass-code, .mv-pass-chips, .mv-pass-top, .mv-pass-label,
.mv-pass-country, .mv-pass-flag, .mv-pass-row, .mv-pass-status, .mv-pass-strip, .mv-pass-badge,
.mv-chip, .mv-chip--more,
.mv-dest, .mv-dest-grid, .mv-dest-card, .mv-dest-name, .mv-dest-price, .mv-dest-go,
plus their responsive @media rules.
*/
/* ============================================================
MODERN LANDING HERO (two-column) — DEPRECATED, see mv-hero3
============================================================ */
/* ============================================================
MODERN HOME SECTIONS (mv-*)
============================================================ */
.mv-h2{
text-align:center; font-size:2rem; font-weight:800;
color:var(--dark); letter-spacing:-.6px; margin:0 0 8px;
}
.mv-h2::after{
content:""; display:block; width:56px; height:4px; margin:10px auto 0;
background:var(--grad-orange); border-radius:4px;
}
.mv-sub{ text-align:center; color:var(--text-light); margin:0 auto 24px; max-width:660px; font-size:1.35rem; line-height:1.55; }
/* Stats bar */
.mv-stats{ background:var(--grad-teal); padding:28px 0; }
.mv-stats-grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;
}
.mv-stat{ color:#fff; }
.mv-stat-num{ display:block; font-size:2.4rem; font-weight:800; line-height:1; letter-spacing:-1px; }
.mv-stat-lbl{ display:block; margin-top:8px; font-size:1.35rem; color:rgba(255,255,255,.9); }
/* Why choose us */
.mv-why{ padding:44px 0; background:#fff; }
.mv-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.mv-feature{
background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
padding:22px 20px; text-align:center; box-shadow:var(--shadow-sm);
transition:var(--transition);
}
.mv-feature:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.mv-feature-ic{
width:70px; height:70px; margin:0 auto 18px; border-radius:20px;
display:flex; align-items:center; justify-content:center; font-size:32px;
background:var(--teal-light);
transition:var(--transition);
}
.mv-feature:hover .mv-feature-ic{ background:var(--grad-teal); transform:rotate(-6deg) scale(1.08); }
.mv-feature h3{ font-size:1.35rem; margin:0 0 10px; }
.mv-feature p{ color:var(--text-light); font-size:1.35rem; line-height:1.55; margin:0; }
/* FAQ */
.mv-faq{ padding:44px 0; background:linear-gradient(180deg,var(--bg-soft) 0%,#fff 100%); }
.mv-faq-list{
max-width:1200px; margin:0 auto;
column-count:2; column-gap:22px;
}
.mv-faq-item{
display:inline-block; width:100%;
background:#fff; border:1px solid var(--border); border-radius:var(--radius);
margin:0 0 14px; box-shadow:var(--shadow-sm); overflow:hidden;
transition:var(--transition);
break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
@media (max-width:768px){
.mv-faq-list{ column-count:1; }
}
.mv-faq-item:hover{ box-shadow:var(--shadow-md); }
.mv-faq-q {
width: 100%;
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 14px;
text-align: left;
font-family: 'Inter', 'Source Sans Pro', sans-serif;
font-size: 1.35rem;
font-weight: 700;
color: var(--dark);
line-height: 1.45;
}
.mv-faq-ic{
flex:0 0 auto; width:30px; height:30px; border-radius:50%;
background:var(--teal-light); color:var(--teal);
display:flex; align-items:center; justify-content:center; font-style:normal;
font-size:20px; font-weight:700; transition:var(--transition);
}
.mv-faq-item.open .mv-faq-ic{ background:var(--grad-teal); color:#fff; transform:rotate(45deg); }
.mv-faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.mv-faq-item.open .mv-faq-a{ max-height:600px; }
.mv-faq-a-inner{
padding:0 24px 22px; color:var(--text-light);
font-family:'Inter','Source Sans Pro',sans-serif;
font-size:1.35rem; line-height:1.7; font-weight:400;
}
.mv-faq-a-inner *{ font-family:inherit !important; font-size:inherit !important; font-style:normal !important; }
.mv-faq-a-inner p{ margin:0 0 10px; color:var(--text-light); }
@media (max-width:900px){
.mv-stats-grid{ grid-template-columns:repeat(2,1fr); }
.mv-why-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.mv-why-grid{ grid-template-columns:1fr; }
.mv-h2{ font-size:1.6rem; }
}
/* ── BRAND LOGO (inline SVG wordmark) ────────────────────── */
.mv-brand{
padding:8px 0 !important; height:auto !important;
display:flex !important; align-items:center;
background:none !important; /* kill any legacy logo background image */
text-indent:0 !important; overflow:visible !important;
}
.mv-brand img{ display:none !important; }
.mv-logo{ display:inline-flex; align-items:center; gap:13px; }
.mv-logo-accent{ color:var(--orange); }
.mv-logo-mark{
display:inline-flex; width:52px; height:52px; border-radius:15px;
box-shadow:0 8px 20px rgba(0,0,0,.20);
background:#ffffff; overflow:hidden;
transition:var(--transition);
}
.mv-logo-mark svg{ display:block; }
.mv-brand:hover .mv-logo-mark{ transform:translateY(-2px) rotate(-5deg); box-shadow:0 14px 30px rgba(0,0,0,.30); }
.mv-logo-text{ display:flex; flex-direction:column; line-height:1.05; }
.mv-logo-name{
font-family:'Inter',sans-serif; font-weight:800; font-size:1.6rem;
color:#ffffff !important; letter-spacing:-.9px;
text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.mv-logo-accent{ color:#ffd9b8 !important; }
.mv-logo-tag{
align-self:flex-start; margin-top:4px;
color:#ffffff !important; font-weight:500;
font-size:.7rem; letter-spacing:.4px; text-transform:none;
text-shadow:0 1px 2px rgba(0,0,0,.18);
opacity:1 !important;
}
/* ── NAV MENU ICONS ──────────────────────────────────────── */
.navbar-nav .mv-nav-ic{
margin-right:7px;
font-size:.95em;
opacity:.9;
transition:var(--transition);
}
.navbar-nav > li > a:hover .mv-nav-ic{ opacity:1; transform:translateY(-1px); }
.navbar-nav .nav-cta .mv-nav-ic{ margin-right:8px; }
/* ============================================================
HERO v3 — Trending centered hero with destination quick-pick
============================================================ */
.mv-hero3{
position:relative; overflow:hidden;
padding:36px 0 44px;
background:linear-gradient(135deg,#f0fbfc 0%,#fff 50%,#fff6ee 100%);
}
.mv-hero3-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.mv-blob{
position:absolute; border-radius:50%; filter:blur(70px); opacity:.55;
}
.mv-blob--a{ width:420px; height:420px; top:-120px; left:-100px; background:#a8ecef; }
.mv-blob--b{ width:360px; height:360px; bottom:-130px; right:-80px; background:#ffd2b0; }
.mv-blob--c{ width:300px; height:300px; top:30%; right:20%; background:#cdeff1; opacity:.4; }
.mv-hero3-inner{ position:relative; z-index:1; max-width:1080px; margin:0 auto; text-align:center; }
.mv-hero3-badge{
display:inline-flex; align-items:center; gap:8px;
background:#fff; border:1px solid var(--border);
color:var(--teal-dark); font-weight:700;
font-size:1.35rem; letter-spacing:1.4px; text-transform:uppercase;
padding:8px 20px; border-radius:50px;
box-shadow:0 8px 22px rgba(0,160,168,.10);
margin-bottom:14px;
}
.mv-hero3-badge .fa{ color:var(--teal); }
.mv-hero3-title{
font-family:'Inter',sans-serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:800; letter-spacing:-1.4px; line-height:1.08;
color:var(--dark); margin:0 0 12px;
}
.mv-grad-text{
background:linear-gradient(90deg,var(--teal) 0%,var(--orange) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.mv-hero3-sub{
font-size:1.32rem; color:var(--text-light);
max-width:760px; margin:0 auto 18px; line-height:1.55;
text-align:center !important;
}
/* coloured pills */
.mv-hero3-pills{
display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
margin-bottom:24px;
}
.mv-pill{
display:inline-flex; align-items:center; gap:9px;
background:#fff; border:1px solid var(--border);
font-weight:600; font-size:1.35rem; color:var(--dark);
padding:11px 22px; border-radius:50px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
transition:var(--transition);
}
.mv-pill:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); }
.mv-pill .fa{ font-size:.95em; }
.mv-pill--green{ color:#0a7a4d; border-color:#bff0d8; background:#effaf3; }
.mv-pill--green .fa{ color:#10b981; }
.mv-pill--orange{ color:#b45309; border-color:#fde0b8; background:#fff5e7; }
.mv-pill--orange .fa{ color:#f37d26; }
.mv-pill--blue{ color:#0b5e7d; border-color:#bfe2f0; background:#eaf6fb; }
.mv-pill--blue .fa{ color:#0ea5e9; }
.mv-pill--purple{ color:#6d28d9; border-color:#e0d3fa; background:#f4eefe; }
.mv-pill--purple .fa{ color:#8b5cf6; }
/* destination quick-pick row — the centerpiece */
.mv-quick{ margin-bottom:24px; }
.mv-quick-label{
display:block; text-transform:uppercase; letter-spacing:2px;
font-size:1.35rem; font-weight:700; color:var(--text-light);
margin-bottom:12px;
}
.mv-quick-row{
display:grid; grid-template-columns:repeat(8,1fr); gap:14px;
max-width:980px; margin:0 auto;
}
.mv-quick-card{
position:relative;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
background:#fff; border:1px solid var(--border); border-radius:16px;
padding:12px 8px 10px; text-decoration:none;
box-shadow:0 6px 16px rgba(0,0,0,.06);
transition:var(--transition);
overflow:hidden;
}
.mv-quick-card::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:linear-gradient(90deg,var(--teal),var(--orange));
transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.mv-quick-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 36px rgba(0,160,168,.20);
border-color:transparent;
}
.mv-quick-card:hover::after{ transform:scaleX(1); }
.mv-quick-img{
width:48px; height:48px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#e6fafb,#fff1e3);
overflow:hidden; margin-bottom:6px;
box-shadow:inset 0 0 0 2px #fff, 0 4px 12px rgba(0,160,168,.18);
}
.mv-quick-img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.mv-quick-name {
font-weight: 700;
color: var(--dark);
font-size: 1.4rem;
text-align: center;
line-height: 1.2;
}
.mv-quick-price{
margin-top:5px; font-size:1.35rem; font-weight:700;
color:var(--orange);
}
/* trust counters */
.mv-hero3-trust{
display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
padding-top:6px;
}
.mv-trust{
display:flex; flex-direction:column; align-items:center;
min-width:120px; padding:12px 20px;
background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
border:1px solid var(--border); border-radius:12px;
}
.mv-trust b {
font-family: 'Inter', sans-serif;
font-size: 1.4rem;
font-weight: 800;
color: var(--teal-dark);
letter-spacing: -.5px;
line-height: 1;
}
.mv-trust span{
margin-top:7px; font-size:1.35rem; color:var(--text-light);
text-transform:uppercase; letter-spacing:1.2px; font-weight:600;
}
/* Responsive */
@media (max-width:992px){
.mv-quick-row{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:560px){
.mv-hero3{ padding:32px 0 40px; }
.mv-quick-row{ grid-template-columns:repeat(2,1fr); gap:10px; }
.mv-hero3-pills{ gap:7px; }
.mv-pill{ font-size:.85rem; padding:7px 13px; }
.mv-trust{ min-width:88px; padding:10px 14px; }
.mv-trust b{ font-size:1.35rem; }
}
/* ============================================================
MOBILE OPTIMIZATIONS (≤768px)
============================================================ */
@media (max-width:768px){
/* prevent horizontal scroll */
html, body{ overflow-x:hidden !important; max-width:100% !important; }
.container, .container-fluid{ padding-left:14px !important; padding-right:14px !important; }
/* Header / logo — hug both edges on mobile */
header,
header > .headerhero,
.headerhero,
.headerhero > .container,
.headerhero .container,
.headerhero .navbar,
.headerhero .navbar-custom,
.headerhero .container-fluid,
.navbar-custom .container-fluid{
padding-left:0 !important;
padding-right:0 !important;
margin-left:0 !important;
margin-right:0 !important;
width:100% !important;
max-width:100% !important;
}
.headerhero{ padding-top:0 !important; padding-bottom:0 !important; }
.navbar-custom{ min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
.navbar-header{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:10px;
margin:0 !important; padding:6px 8px !important; min-height:0 !important;
float:none !important; width:100% !important;
box-sizing:border-box !important;
}
/* kill Bootstrap clearfix pseudo-elements that act as extra flex children */
.navbar-header::before,
.navbar-header::after,
.container-fluid::before,
.container-fluid::after,
.container::before,
.container::after{
display:none !important;
content:none !important;
}
.navbar-brand.mv-brand{
padding:0 !important; height:auto !important;
margin:0 !important; float:none !important; line-height:1 !important;
order:1 !important; /* logo on the LEFT */
}
.navbar-toggle{
order:2 !important; /* hamburger on the RIGHT */
margin-left:auto !important;
}
.mv-logo{ gap:8px !important; }
.mv-logo-mark,
.navbar-brand .mv-logo-mark{
width:38px !important; height:38px !important;
min-width:38px !important; flex:0 0 38px !important;
border-radius:11px !important;
}
.mv-logo-mark svg,
.navbar-brand .mv-logo-mark svg{
width:38px !important; height:38px !important; display:block !important;
}
.mv-logo-name{ font-size:1.35rem !important; letter-spacing:-.5px !important; }
.mv-logo-tag{ font-size:.56rem !important; letter-spacing:.3px !important; margin-top:2px !important; }
.navbar-toggle{
border:1px solid rgba(255,255,255,.55) !important;
background:rgba(255,255,255,.10) !important;
margin:0 !important; padding:6px 8px !important;
float:none !important; order:2;
}
.navbar-toggle .icon-bar{ background:#fff !important; }
/* collapsed menu panel — show on teal card */
.navbar-collapse{
background:rgba(0,0,0,.18); border-radius:12px;
margin-top:10px; padding:6px 10px !important;
max-height:75vh !important;
}
.navbar-nav{ float:none !important; margin:0 !important; }
.navbar-nav > li{ float:none !important; width:100% !important; }
.navbar-nav > li > a{
color:#fff !important; padding:10px 6px !important;
border-bottom:1px solid rgba(255,255,255,.10);
font-size:.98rem !important;
}
.navbar-nav > li:last-child > a{ border-bottom:none; }
.nav-cta a{
background:var(--orange) !important; border-radius:30px !important;
margin-top:6px; padding:10px 14px !important;
}
/* Hero */
.mv-hero3-title{ font-size:2rem !important; letter-spacing:-.8px !important; }
.mv-hero3-sub{ font-size:1.35rem !important; padding:0 4px !important; }
.mv-hero3-badge{ font-size:.78rem !important; padding:6px 14px !important; }
.mv-quick-label{ font-size:.84rem !important; }
.mv-quick-img{ width:42px !important; height:42px !important; }
.mv-quick-name{ font-size:1.35rem !important; }
.mv-quick-price{ font-size:.85rem !important; }
.mv-hero3-trust{ gap:10px !important; }
.mv-trust{ flex:1 0 calc(50% - 10px); min-width:0 !important; padding:8px 6px !important; }
.mv-trust b{ font-size:1.35rem !important; }
.mv-trust span{ font-size:.74rem !important; letter-spacing:.8px !important; }
/* Sections */
.mv-h2{ font-size:1.5rem !important; }
.mv-sub{ font-size:.98rem !important; padding:0 8px !important; }
.mv-stats{ padding:24px 0 !important; }
.mv-stats-grid{ grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }
.mv-why{ padding:32px 0 !important; }
.mv-faq{ padding:32px 0 !important; }
.mv-faq-q{ font-size:1.35rem !important; padding:14px 16px !important; }
.mv-faq-a-inner{ font-size:.98rem !important; padding:0 16px 16px !important; }
/* Footer */
.footer{ padding:28px 0 12px !important; }
.footer .row{ flex-direction:column !important; }
.footer [class*="col-"]{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; margin-bottom:14px; }
.footer .panel-title{ font-size:12px !important; }
.footer .nav li a{ font-size:13px !important; padding:3px 0 !important; }
.footer-bottom{ font-size:12px; margin-top:8px; padding-top:10px; }
.footer-bottom a{ display:inline-block; margin:0 4px; }
/* WhatsApp FAB smaller on mobile */
.wa__btn_popup{
bottom:14px !important; right:14px !important;
width:52px !important; height:52px !important;
}
.wa__btn_popup_icon{ width:26px !important; height:26px !important; background-size:24px !important; }
.wa__btn_popup_txt{ display:none !important; } /* hide tooltip on touch devices */
.wa__popup_chat_box{
right:14px !important; bottom:74px !important;
width:calc(100vw - 28px) !important; max-width:320px;
}
/* Forms scale-down */
.form-control{ font-size:16px !important; } /* 16px prevents iOS zoom on focus */
.btn{ font-size:.95rem !important; }
}
/* very small phones (≤420px) */
@media (max-width:420px){
.mv-logo-name{ font-size:1.35rem !important; }
.mv-logo-tag{ display:none !important; }
.mv-hero3-title{ font-size:1.7rem !important; }
.mv-quick-row{ gap:8px !important; }
.mv-pill{ font-size:.78rem !important; padding:6px 10px !important; }
}
/* ============================================================
MODERN VISA APPLICATION HERO (/visa/* pages)
============================================================ */
.mv-visa-hero{
position:relative; overflow:hidden;
padding:32px 0 20px;
background:linear-gradient(135deg,#f0fbfc 0%,#ffffff 55%,#fff4e8 100%);
}
.mv-visa-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.mv-visa-grid{
position:relative; z-index:1;
display:grid; grid-template-columns:1.4fr 1fr; gap:32px;
align-items:stretch;
}
@media (max-width:900px){ .mv-visa-grid{ grid-template-columns:1fr; gap:18px; } }
.mv-visa-card{
background:#fff; border-radius:24px;
padding:38px 38px 32px;
box-shadow:0 24px 60px rgba(0,160,168,.12), 0 4px 14px rgba(0,0,0,.05);
border:1px solid var(--border);
}
.mv-visa-badge{
display:inline-flex; align-items:center; gap:8px;
background:var(--teal-light); color:var(--teal-dark);
font-weight:700; font-size:.9rem; letter-spacing:1.2px; text-transform:uppercase;
padding:7px 16px; border-radius:50px; margin-bottom:18px;
}
.mv-visa-badge .fa{ color:var(--teal); }
.mv-visa-title{
font-family:'Inter',sans-serif; font-weight:800;
font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.8px;
color:var(--dark); margin:0 0 14px; line-height:1.18;
}
.mv-visa-sub{
font-size:1.30rem; color:var(--text-light); line-height:1.6;
margin:0 0 26px;
}
.mv-visa-form{ margin-bottom:18px; }
.mv-visa-fields{
display:grid; grid-template-columns:1fr 1fr auto; gap:14px;
align-items:end;
}
@media (max-width:720px){
.mv-visa-fields{ grid-template-columns:1fr; }
}
.mv-field label{
display:flex; align-items:center; gap:7px;
font-weight:700; font-size:1.35rem; color:var(--dark);
margin-bottom:6px;
}
.mv-field label .fa{ color:var(--teal); font-size:.9em; }
.mv-field select.form-control,
.mv-visa-form select.form-control{
width:100%; height:46px !important;
border:1.5px solid var(--border) !important; border-radius:10px !important;
padding:0 14px !important;
font-size:1.35rem !important; color:var(--dark) !important;
background:#fff !important;
transition:var(--transition);
}
.mv-field select.form-control:focus{
border-color:var(--teal) !important;
box-shadow:0 0 0 4px rgba(0,160,168,.12) !important;
outline:none !important;
}
/* jQuery-validate error labels — clean, non-overlapping */
.mv-field label.error,
.mv-visa-form label.error,
.visatypeservice label.error,
form label.error{
display:block !important;
margin:6px 0 0 !important;
padding:4px 10px !important;
background:#fef2f2 !important;
color:#b91c1c !important;
border:1px solid #fecaca !important;
border-radius:8px !important;
font-size:.85rem !important; font-weight:600 !important;
line-height:1.3 !important;
letter-spacing:0 !important;
text-transform:none !important;
width:auto !important; max-width:100%;
float:none !important;
box-shadow:none !important;
}
.mv-field label.error::before,
.mv-visa-form label.error::before,
form label.error::before{
content:"\f071"; /* fa exclamation-triangle */
font-family:'FontAwesome';
margin-right:6px;
font-size:.78rem;
}
/* Hide error label when it has no message (validation passed) */
.mv-field label.error:empty,
.mv-visa-form label.error:empty,
.visatypeservice label.error:empty,
form label.error:empty,
label.error.valid,
label.valid{
display:none !important;
padding:0 !important; margin:0 !important;
border:none !important; background:none !important;
}
label.error:empty::before,
label.valid::before{ content:none !important; }
/* highlight invalid select */
.mv-field select.error,
.mv-visa-form select.error,
form select.error{
border-color:#fca5a5 !important;
box-shadow:0 0 0 3px rgba(239,68,68,.10) !important;
}
.mv-visa-btn{
height:46px; padding:0 22px;
background:var(--grad-orange); color:#fff; font-weight:700; font-size:1.35rem;
border:none; border-radius:50px; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
box-shadow:0 8px 22px rgba(243,125,38,.35);
transition:var(--transition);
white-space:nowrap;
}
.mv-visa-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(243,125,38,.45); }
.mv-visa-perks{
list-style:none; padding:18px 0 0; margin:0;
display:flex; flex-wrap:wrap; gap:18px;
border-top:1px dashed var(--border);
}
.mv-visa-perks li{
display:flex; align-items:center; gap:8px;
color:var(--text-light); font-size:.95rem; font-weight:500;
}
.mv-visa-perks .fa{ color:#10b981; }
/* Right side card */
.mv-visa-side{ display:flex; }
.mv-visa-side-card{
width:100%;
background:var(--grad-teal); color:#fff;
border-radius:24px; padding:30px 28px;
box-shadow:0 24px 60px rgba(0,160,168,.20);
display:flex; flex-direction:column; gap:18px;
}
.mv-visa-side-label{
text-transform:uppercase; letter-spacing:2px;
font-size:.78rem; font-weight:700; color:rgba(255,255,255,.85);
margin-bottom:4px;
}
.mv-visa-side-row{
display:flex; align-items:flex-start; gap:14px;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.18);
}
.mv-visa-side-row:last-child{ border-bottom:none; padding-bottom:0; }
.mv-visa-side-row > .fa{
width:40px; height:40px; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.16); border-radius:12px;
font-size:1.35rem; color:#fff;
}
.mv-visa-side-row b{ display:block; color:#fff; font-size:1.35rem; font-weight:700; }
.mv-visa-side-row span{ display:block; color:rgba(255,255,255,.85); font-size:.88rem; margin-top:2px; }
@media (max-width:768px){
.mv-visa-hero{ padding:24px 0 40px; }
.mv-visa-card{ padding:24px 20px 22px; border-radius:18px; }
.mv-visa-side-card{ padding:22px 18px; border-radius:18px; }
}
/* ============================================================
ARTICLE TYPOGRAPHY (.mv-article — for $pageContent from DB)
============================================================ */
.mv-article{
max-width:980px; margin:0 auto; padding:8px 0;
font-family:'Inter','Source Sans Pro',sans-serif !important;
color:var(--text);
font-size:1.35rem; line-height:1.7;
}
.mv-article *{ font-family:'Inter','Source Sans Pro',sans-serif !important; }
/* Headings */
.mv-article h1,
.mv-article h2{
font-size:2rem !important; font-weight:700 !important;
color:var(--teal-dark) !important; letter-spacing:-.4px;
margin:18px 0 8px !important; line-height:1.22 !important;
position:relative; padding-left:18px;
}
.mv-article h1::before,
.mv-article h2::before{
content:""; position:absolute; left:0; top:8px; bottom:8px;
width:5px; border-radius:4px;
background:linear-gradient(180deg,var(--teal),var(--orange));
}
.mv-article h3{
font-size:1.55rem !important; font-weight:700 !important;
color:var(--teal) !important; letter-spacing:-.3px;
margin:26px 0 10px !important; line-height:1.3 !important;
}
.mv-article h4{
font-size:1.32rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
margin:20px 0 8px !important;
}
/* Paragraphs */
.mv-article p{
font-size:1.35rem !important; line-height:1.55 !important;
color:var(--text) !important; font-weight:400 !important;
margin:0 0 10px !important;
text-align:left !important;
}
.mv-article p:last-child{ margin-bottom:0 !important; }
/* Bold / strong — keep accent color */
.mv-article strong,
.mv-article b{
color:var(--dark) !important; font-weight:700 !important;
}
/* Links */
.mv-article a{
color:var(--teal-dark) !important; font-weight:600;
border-bottom:1px dashed rgba(0,160,168,.4);
text-decoration:none !important;
transition:var(--transition);
}
.mv-article a:hover{
color:var(--orange) !important;
border-bottom-color:var(--orange);
}
/* Lists */
.mv-article ul,
.mv-article ol{
margin:0 0 12px !important;
padding-left:0 !important;
list-style:none !important;
}
.mv-article ul li,
.mv-article ol li{
position:relative;
padding:4px 0 4px 36px !important;
font-size:1.35rem !important; line-height:1.5 !important;
color:var(--text) !important;
border-bottom:1px dashed var(--border);
}
.mv-article ul li:last-child,
.mv-article ol li:last-child{ border-bottom:none; }
.mv-article ul li::before{
content:"\f00c"; /* fa-check */
font-family:'FontAwesome';
position:absolute; left:0; top:8px;
width:22px; height:22px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--teal-light); color:var(--teal);
border-radius:50%; font-size:.7rem; font-weight:700;
}
.mv-article ol{ counter-reset:mv-li; }
.mv-article ol li{ counter-increment:mv-li; }
.mv-article ol li::before{
content:counter(mv-li);
position:absolute; left:0; top:6px;
width:24px; height:24px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--grad-teal); color:#fff;
border-radius:50%; font-size:.78rem; font-weight:700;
}
/* Blockquote */
.mv-article blockquote{
margin:22px 0; padding:18px 22px;
background:var(--bg-soft); border-left:4px solid var(--orange);
border-radius:0 12px 12px 0;
color:var(--text); font-style:italic;
}
.mv-article blockquote p{ margin:0 !important; }
/* Tables */
.mv-article table{
width:100%; border-collapse:collapse;
margin:18px 0; border-radius:12px; overflow:hidden;
box-shadow:var(--shadow-sm);
}
.mv-article th{
background:var(--grad-teal); color:#fff;
padding:14px 16px; text-align:left;
font-weight:700; font-size:1.35rem;
}
.mv-article td{
padding:13px 16px;
border-bottom:1px solid var(--border);
font-size:1.35rem; line-height:1.55;
}
.mv-article tr:last-child td{ border-bottom:none; }
.mv-article tr:nth-child(even) td{ background:#fafbfc; }
/* Images */
.mv-article img{
max-width:100%; height:auto;
border-radius:14px; margin:18px 0;
box-shadow:var(--shadow-md);
}
/* Horizontal rule */
.mv-article hr{
border:none; height:1px;
background:linear-gradient(90deg,transparent,var(--border),transparent);
margin:28px 0;
}
@media (max-width:768px){
.mv-article{ font-size:1.35rem; line-height:1.7; }
.mv-article h1, .mv-article h2{ font-size:1.4rem !important; margin:26px 0 10px !important; }
.mv-article h3{ font-size:1.35rem !important; }
.mv-article p{ font-size:1.35rem !important; }
.mv-article ul li, .mv-article ol li{ font-size:1.35rem !important; padding:6px 0 6px 28px !important; }
}
/* ============================================================
PRICING / VISA FEE PAGE (#pricing) — modern redesign
============================================================ */
#pricing{
background:linear-gradient(180deg,#f8fcfd 0%,#fff 100%) !important;
padding:32px 0 48px !important;
}
#pricing .panel-heading,
#pricing > .container .panel-heading{
background:none !important;
border:none !important;
padding:0 !important;
margin:0 0 24px !important;
display:block !important;
text-align:center !important;
}
#pricing .panel-heading h1{
font-family:'Inter',sans-serif !important;
font-size:2rem !important; font-weight:800 !important;
color:var(--dark) !important;
text-align:center !important; letter-spacing:-.6px;
margin:0 !important; padding:0 !important;
background:none !important; border:none !important;
display:block !important;
line-height:1.25 !important;
}
/* Visa-type tabs */
#pricing .nav-tabs{
display:flex !important; flex-wrap:wrap; gap:10px;
justify-content:center;
border:none !important;
padding:0 !important; margin:0 0 24px !important;
background:none !important;
}
#pricing .nav-tabs > li{
float:none !important; margin:0 !important; padding:0 !important;
}
#pricing .nav-tabs > li > a{
display:block;
background:#fff !important;
border:1.5px solid var(--border) !important;
border-radius:50px !important;
color:var(--teal-dark) !important;
font-weight:700 !important; font-size:1.35rem !important;
padding:10px 24px !important; margin:0 !important;
transition:var(--transition) !important;
box-shadow:0 4px 12px rgba(0,0,0,.04);
}
#pricing .nav-tabs > li > a:hover{
border-color:var(--teal) !important;
color:var(--teal) !important;
transform:translateY(-2px);
}
#pricing .nav-tabs > li.active > a,
#pricing .nav-tabs > li.active > a:hover,
#pricing .nav-tabs > li.active > a:focus{
background:var(--grad-orange) !important;
border-color:transparent !important;
color:#fff !important;
box-shadow:0 10px 24px rgba(243,125,38,.30) !important;
}
/* Pricing cards */
#pricing .price_card{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:20px !important;
padding:0 !important;
margin:12px 0 !important;
box-shadow:0 14px 36px rgba(0,160,168,.10), 0 2px 8px rgba(0,0,0,.04) !important;
overflow:hidden;
transition:var(--transition);
position:relative;
display:flex; flex-direction:column;
height:calc(100% - 24px);
}
#pricing .price_card::before{
content:""; position:absolute; left:0; right:0; top:0; height:5px;
background:var(--grad-teal);
}
#pricing .col-sm-4:nth-child(2) .price_card::before{ background:var(--grad-orange); }
#pricing .col-sm-4:nth-child(3) .price_card::before{ background:linear-gradient(90deg,#8b5cf6,#0ea5e9); }
#pricing .price_card:hover{
transform:translateY(-6px);
box-shadow:0 22px 50px rgba(0,160,168,.18), 0 4px 14px rgba(0,0,0,.06) !important;
}
#pricing .price_card .header{
padding:28px 24px 22px !important;
background:none !important; border:none !important;
flex:1; display:flex; flex-direction:column;
}
#pricing .price_card h4.name,
#pricing .price_card .header h4{
font-family:'Inter',sans-serif !important;
font-size:1.5rem !important; font-weight:800 !important;
color:var(--dark) !important;
margin:0 0 18px !important; padding:0 !important;
text-align:center; letter-spacing:-.4px;
background:none !important;
}
/* Price big number */
#pricing .price_card .price{
display:block !important; text-align:center;
font-family:'Inter',sans-serif !important;
font-size:3rem !important; font-weight:800 !important;
background:linear-gradient(135deg,var(--teal) 0%,var(--orange) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
line-height:1; letter-spacing:-2px;
margin:0 0 22px !important; padding:8px 0 !important;
}
/* Info rows */
#pricing .price_card .name{
display:flex !important; align-items:center; justify-content:center;
text-align:center; color:var(--text) !important;
font-size:1.35rem !important; font-weight:500 !important;
padding:8px 8px !important; margin:0 !important;
border-bottom:1px dashed var(--border);
background:none !important;
font-family:'Inter',sans-serif !important;
}
#pricing .price_card .name:last-child{ border-bottom:none; }
#pricing .price_card .name b{
color:var(--orange) !important;
font-weight:700;
}
/* Apply Now buttons */
#pricing .price_card .btn{
display:block;
margin:18px 24px 24px !important;
padding:14px 28px !important;
background:var(--grad-orange) !important;
border:none !important;
border-radius:50px !important;
color:#fff !important;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:700 !important;
letter-spacing:.3px;
box-shadow:0 10px 24px rgba(243,125,38,.30) !important;
transition:var(--transition) !important;
text-transform:none !important;
}
#pricing .price_card .btn:hover{
transform:translateY(-3px);
box-shadow:0 16px 32px rgba(243,125,38,.40) !important;
color:#fff !important;
}
#pricing .price_card .btn.btn-success{
background:var(--grad-teal) !important;
box-shadow:0 10px 24px rgba(0,160,168,.30) !important;
}
#pricing .price_card .btn.btn-success:hover{
box-shadow:0 16px 32px rgba(0,160,168,.40) !important;
}
/* Documents card features list */
#pricing .price-features{
list-style:none !important; padding:0 !important; margin:0 !important;
text-align:left;
}
#pricing .price-features li{
position:relative;
padding:10px 0 10px 32px !important;
font-size:1.35rem !important; line-height:1.5 !important;
color:var(--text) !important;
border-bottom:1px dashed var(--border);
list-style:none !important;
font-family:'Inter',sans-serif !important;
}
#pricing .price-features li:last-child{ border-bottom:none; }
#pricing .price-features li::before{
content:"\f00c"; /* fa-check */
font-family:'FontAwesome';
position:absolute; left:0; top:10px;
width:22px; height:22px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--teal-light); color:var(--teal);
border-radius:50%; font-size:.7rem; font-weight:700;
}
/* Equal column heights */
#pricing .row.visatypeservice{
display:flex; flex-wrap:wrap;
margin-left:-10px; margin-right:-10px;
}
#pricing .row.visatypeservice > .col-sm-4{
padding-left:10px; padding-right:10px;
display:flex;
}
#pricing .row.visatypeservice > .col-sm-4 > .price_card,
#pricing .row.visatypeservice > .col-sm-4 form{
width:100%; display:flex; flex-direction:column;
}
@media (max-width:768px){
#pricing{ padding:20px 0 32px !important; }
#pricing .panel-heading h1{ font-size:1.5rem !important; }
#pricing .nav-tabs > li > a{ font-size:.92rem !important; padding:8px 18px !important; }
#pricing .price_card .price{ font-size:2.4rem !important; }
#pricing .price_card h4.name{ font-size:1.3rem !important; }
#pricing .price_card .name{ font-size:1.35rem !important; }
#pricing .row.visatypeservice{ flex-direction:column; }
#pricing .row.visatypeservice > .col-sm-4{ width:100%; }
}
/* ============================================================
2-STEP VISA APPLICATION FORM — modern redesign
Targets: .travel-banner, #travelForm, [id^="personalVisaForm"]
============================================================ */
/* === Hide the legacy travel-banner / personal-banner entirely === */
/* Step indicator strip (.mv-step-strip) already shows the page context. */
.travel-banner,
.personal-banner{ display:none !important; }
/* === Step indicator: pure HTML/CSS, rendered via ::before on .travel-banner === */
.travel-banner::before,
.personal-banner::before{
content:"";
display:block;
position:relative;
width:100%; max-width:520px; height:60px;
margin:0 auto;
background:
/* connector line */
linear-gradient(to right, transparent 0, transparent 60px, #e5e7eb 60px, #e5e7eb calc(100% - 60px), transparent calc(100% - 60px)) no-repeat center 18px / 100% 3px;
}
/* Step circles + labels as a CSS grid overlay */
.travel-banner,
.personal-banner{ counter-reset: mvstep; }
.travel-banner::after,
.personal-banner::after{
content:"";
position:absolute;
left:50%; top:28px;
transform:translateX(-50%);
width:100%; max-width:520px; height:0;
pointer-events:none;
}
/* Use real markup approach: inject step pills via flex on the banner */
.travel-banner > .row,
.personal-banner > .row{ position:relative; z-index:2; }
/* Mini step indicator card on top (3 numbered chips with a track) */
.mv-step-indicator{
display:flex; align-items:center; justify-content:space-between;
width:100%; max-width:520px; margin:0 auto 4px;
position:relative; z-index:3;
}
.mv-step-indicator::before{
content:""; position:absolute; left:30px; right:30px; top:18px;
height:3px; background:#e5e7eb; border-radius:3px; z-index:1;
}
.mv-step-indicator .mv-step{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center;
}
.mv-step-bubble{
width:38px; height:38px; border-radius:50%;
background:#ffffff; border:2px solid #d1d5db;
display:flex; align-items:center; justify-content:center;
font-family:'Inter',sans-serif; font-weight:800; font-size:.95rem;
color:#9ca3af;
transition:var(--transition);
}
.mv-step-label{
margin-top:6px; font-family:'Inter',sans-serif;
font-size:.7rem; font-weight:700; letter-spacing:1.4px;
color:#9ca3af; text-transform:uppercase;
}
.mv-step.is-active .mv-step-bubble{
background:var(--grad-orange); color:#fff; border-color:transparent;
box-shadow:0 8px 18px rgba(243,125,38,.30);
}
.mv-step.is-active .mv-step-label{ color:var(--orange-dark); }
.mv-step.is-done .mv-step-bubble{
background:var(--teal); color:#fff; border-color:transparent;
}
.mv-step.is-done .mv-step-bubble::before{
content:"\f00c"; font-family:'FontAwesome'; font-size:.9rem;
}
.mv-step.is-done .mv-step-bubble span{ display:none; }
.mv-step.is-done .mv-step-label{ color:var(--teal-dark); }
/* gradient progress line up to active step */
.mv-step-indicator[data-step="2"]::after{
content:""; position:absolute; left:30px; width:calc(50% - 30px); top:18px;
height:3px; background:var(--grad-teal); border-radius:3px; z-index:1;
}
.mv-step-indicator[data-step="3"]::after{
content:""; position:absolute; left:30px; right:30px; top:18px;
height:3px; background:linear-gradient(90deg,var(--teal),var(--orange)); border-radius:3px; z-index:1;
}
/* Drop the SVG-based ::before/after pseudo decoration in favor of the HTML widget */
.travel-banner::before, .travel-banner::after,
.personal-banner::before, .personal-banner::after{ content:none !important; }
/* Step strip — wraps the step indicator just under the header */
.mv-step-strip{
background:linear-gradient(135deg,#f0fbfc 0%,#ffffff 55%,#fff4e8 100%);
border-bottom:1px solid var(--border);
padding:24px 14px 18px;
}
/* Kill the white space below banner so form sits flush */
.travel-banner + section.section,
.personal-banner + section.section,
.mv-step-strip + section.section,
.mv-step-strip ~ .travel-banner,
.mv-step-strip ~ .personal-banner{
padding-top:0 !important;
}
.mv-step-strip ~ .travel-banner,
.mv-step-strip ~ .personal-banner{
background:#fff !important;
border-bottom:none !important;
padding:18px 12px 4px !important;
}
section#pricing > .container > .col-sm-12 > .row.pt80,
section#pricing > .container > .col-sm-12 > .row > .col-md-10{
padding-top:0 !important;
}
/* === Form Card ============================================ */
#travelForm, [id^="personalVisaForm"]{
display:block;
}
.travel-banner ~ #pricing,
section.section[id="pricing"]:has(#travelForm),
section.section[id="pricing"]:has([id^="personalVisaForm"]){
background:#f8fcfd !important;
padding:20px 0 40px !important;
}
#travelForm .panel-body,
[id^="personalVisaForm"] .panel-body,
form#travelForm,
form[id^="personalVisaForm"]{
background:#fff;
border-radius:0;
padding:0;
}
/* Wrap the whole form in a card via the outer .panel-default */
section#pricing .panel-default:has(#travelForm),
section#pricing .panel-default:has([id^="personalVisaForm"]),
section#pricing > .container > .col-sm-12 > .row.pt80 .panel-default{
background:#ffffff !important;
border:1px solid var(--border) !important;
border-radius:24px !important;
box-shadow:0 24px 60px rgba(0,160,168,.14), 0 4px 14px rgba(0,0,0,.06) !important;
padding:0 !important;
max-width:1100px;
margin:24px auto 0 !important;
position:relative; z-index:5;
overflow:hidden;
}
/* Heading band INSIDE the form card */
section#pricing .panel-default:has(#travelForm) > .panel-body::before,
section#pricing .panel-default:has([id^="personalVisaForm"]) > .panel-body::before{
content:"";
display:block;
position:relative;
margin:0 0 24px;
padding:24px 28px;
background:linear-gradient(135deg,#f0fbfc 0%,#fff 60%,#fff4e8 100%);
border-bottom:1px solid var(--border);
border-radius:24px 24px 0 0;
font-family:'Inter',sans-serif;
text-align:left;
}
/* Inner heading via dedicated wrapper class on form */
section#pricing .panel-default:has(#travelForm)::before,
section#pricing .panel-default:has([id^="personalVisaForm"])::before{
content:"\f072 Travel Information";
font-family:'FontAwesome','Inter',sans-serif;
display:flex; align-items:center; gap:14px;
padding:22px 28px;
background:linear-gradient(135deg,#f0fbfc 0%,#fff 60%,#fff4e8 100%);
border-bottom:1px solid var(--border);
font-size:1.5rem; font-weight:800;
color:var(--teal-dark); letter-spacing:-.4px;
}
section#pricing .panel-default:has(#travelForm)::before{
content:"\f072 Travel Information";
}
section#pricing .panel-default:has([id^="personalVisaForm"])::before{
content:"\f2bd Personal Information";
}
/* hide the duplicate native ::before on .panel-body */
section#pricing .panel-default:has(#travelForm) > .panel-body::before,
section#pricing .panel-default:has([id^="personalVisaForm"]) > .panel-body::before{
display:none;
}
section#pricing .panel-default:has(#travelForm) > .panel-body,
section#pricing .panel-default:has([id^="personalVisaForm"]) > .panel-body{
padding:14px 28px 28px !important;
}
.travel-banner + section#pricing,
.personal-banner + section#pricing,
.travel-banner ~ section.section,
.personal-banner ~ section.section{
background:transparent !important;
padding-top:0 !important;
}
.travel-banner ~ section#pricing > .container,
.personal-banner ~ section#pricing > .container{
padding-top:0 !important;
}
/* Form rows + fields */
#travelForm .form-group,
[id^="personalVisaForm"] .form-group{
margin-bottom:18px !important;
position:relative;
}
#travelForm label, #travelForm .LatoBold,
[id^="personalVisaForm"] label, [id^="personalVisaForm"] .LatoBold{
display:flex !important; align-items:center; gap:9px;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
margin-bottom:9px !important;
letter-spacing:.2px !important;
text-transform:uppercase !important;
}
#travelForm label::before,
[id^="personalVisaForm"] label::before{
font-family:'FontAwesome' !important;
font-size:.95em !important; color:var(--teal) !important;
width:18px; text-align:center;
display:inline-flex; align-items:center; justify-content:center;
background:var(--teal-light);
border-radius:6px;
padding:3px 5px;
margin-right:2px;
}
#travelForm label[for="Address"]::before,
#travelForm label[for*="ddress"]::before { content:"\f041"; }
#travelForm label[for="Province"]::before,
#travelForm label[for*="rovince"]::before,
#travelForm label[for="State"]::before { content:"\f0ac"; }
#travelForm label[for="ArrivalDate"]::before,
#travelForm label[for*="Date"]::before { content:"\f073"; }
#travelForm label[for="City"]::before,
#travelForm label[for*="ity"]::before { content:"\f015"; }
#travelForm label[for="Pincode"]::before,
#travelForm label[for*="incode"]::before { content:"\f0c8"; }
#travelForm label[for="Mobile"]::before,
#travelForm label[for*="obile"]::before { content:"\f10b"; }
#travelForm label[for="Email"]::before,
#travelForm label[for*="mail"]::before { content:"\f0e0"; }
[id^="personalVisaForm"] label[for*="ame" i]::before,
[id^="personalVisaForm"] label[for*="irst" i]::before,
[id^="personalVisaForm"] label[for*="ast" i]::before { content:"\f007"; }
[id^="personalVisaForm"] label[for*="assport" i]::before { content:"\f02d"; }
[id^="personalVisaForm"] label[for*="ationality" i]::before { content:"\f024"; }
[id^="personalVisaForm"] label[for*="ender" i]::before { content:"\f228"; }
[id^="personalVisaForm"] label[for*="irth" i]::before,
[id^="personalVisaForm"] label[for*="DOB" i]::before,
[id^="personalVisaForm"] label[for*="dob" i]::before { content:"\f1fd"; }
[id^="personalVisaForm"] label[for*="ducation" i]::before { content:"\f19d"; }
[id^="personalVisaForm"] label[for*="rofession" i]::before { content:"\f0b1"; }
[id^="personalVisaForm"] label[for*="ddress" i]::before { content:"\f041"; }
[id^="personalVisaForm"] label[for*="ity" i]::before { content:"\f015"; }
[id^="personalVisaForm"] label[for*="ountry" i]::before { content:"\f0ac"; }
[id^="personalVisaForm"] label[for*="hone" i]::before,
[id^="personalVisaForm"] label[for*="obile" i]::before { content:"\f10b"; }
[id^="personalVisaForm"] label[for*="mail" i]::before { content:"\f0e0"; }
[id^="personalVisaForm"] label[for*="hoto" i]::before,
[id^="personalVisaForm"] label[for*="ile" i]::before { content:"\f030"; }
#travelForm .form-control,
[id^="personalVisaForm"] .form-control,
#travelForm input.form-control,
#travelForm textarea.form-control,
#travelForm select.form-control,
[id^="personalVisaForm"] input.form-control,
[id^="personalVisaForm"] textarea.form-control,
[id^="personalVisaForm"] select.form-control{
width:100% !important;
height:54px !important;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
font-weight:500 !important;
color:var(--dark) !important;
background:#f8fafc !important;
border:1.5px solid #e2e8f0 !important;
border-radius:12px !important;
padding:0 18px !important;
transition:var(--transition) !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.02) !important;
}
#travelForm .form-control:hover,
[id^="personalVisaForm"] .form-control:hover{
background:#fff !important;
border-color:#cbd5e1 !important;
}
#travelForm textarea.form-control,
[id^="personalVisaForm"] textarea.form-control{
height:auto !important;
min-height:96px !important;
padding:14px 18px !important;
font-size:1.35rem !important;
line-height:1.5 !important;
resize:vertical;
}
/* === File upload (Passport / Photograph) — modern dashed drop-zone === */
[id^="personalVisaForm"] input[type="file"].form-control,
[id^="personalVisaForm"] input[type="file"]{
height:auto !important;
min-height:88px !important;
padding:18px !important;
background:linear-gradient(180deg,#fafdfd 0%,#f0fbfc 100%) !important;
border:2px dashed #b9e5e8 !important;
border-radius:14px !important;
cursor:pointer;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
color:var(--teal-dark) !important;
transition:var(--transition) !important;
}
[id^="personalVisaForm"] input[type="file"]:hover{
background:linear-gradient(180deg,#f0fbfc 0%,#e6fafb 100%) !important;
border-color:var(--teal) !important;
transform:translateY(-1px);
}
[id^="personalVisaForm"] input[type="file"]::file-selector-button,
[id^="personalVisaForm"] input[type="file"]::-webkit-file-upload-button{
background:var(--grad-teal) !important;
color:#fff !important;
border:none !important;
border-radius:50px !important;
font-family:'Inter',sans-serif !important;
font-size:.95rem !important; font-weight:700 !important;
padding:10px 22px !important;
margin-right:14px !important;
cursor:pointer;
box-shadow:0 6px 16px rgba(0,160,168,.30) !important;
transition:var(--transition) !important;
}
[id^="personalVisaForm"] input[type="file"]::file-selector-button:hover,
[id^="personalVisaForm"] input[type="file"]::-webkit-file-upload-button:hover{
box-shadow:0 10px 22px rgba(0,160,168,.45) !important;
transform:translateY(-1px);
}
/* Polish "Upload Documents" sub-heading */
[id^="personalVisaForm"] h3{
display:flex !important; align-items:center; gap:10px;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
margin:30px 0 16px !important;
padding:0 0 12px !important;
border-bottom:2px solid var(--teal-light) !important;
letter-spacing:-.3px;
text-transform:none !important;
}
[id^="personalVisaForm"] h3::before{
content:"\f093"; /* fa-upload */
font-family:'FontAwesome';
width:32px; height:32px; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
background:var(--grad-teal); color:#fff;
border-radius:8px;
font-size:.95rem;
}
/* Style select dropdowns the same as inputs (with custom arrow) */
[id^="personalVisaForm"] select.form-control,
#travelForm select.form-control{
appearance:none; -webkit-appearance:none; -moz-appearance:none;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:right 16px center !important;
background-size:14px !important;
padding-right:44px !important;
cursor:pointer;
}
/* The H1 inside personal form (which has inline orange style) — override */
[id^="personalVisaForm"] + h1,
.travel-banner h1, .personal-banner h1{
display:none !important;
}
#travelForm .form-control:focus,
[id^="personalVisaForm"] .form-control:focus,
#travelForm .form-control:focus-visible,
[id^="personalVisaForm"] .form-control:focus-visible{
border-color:var(--teal) !important;
box-shadow:0 0 0 4px rgba(0,160,168,.12) !important;
outline:none !important;
}
#travelForm .form-control::placeholder,
[id^="personalVisaForm"] .form-control::placeholder{
color:#9ca3af !important;
opacity:1;
}
/* Buttons */
#travelForm .btn,
[id^="personalVisaForm"] .btn,
#travelForm input[type="submit"],
[id^="personalVisaForm"] input[type="submit"],
#travelForm button[type="submit"],
[id^="personalVisaForm"] button[type="submit"]{
display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px;
height:50px;
padding:0 30px !important;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:700 !important;
color:#fff !important;
background:var(--grad-orange) !important;
border:none !important;
border-radius:50px !important;
cursor:pointer;
box-shadow:0 10px 24px rgba(243,125,38,.32) !important;
transition:var(--transition) !important;
text-transform:none !important;
letter-spacing:.2px;
margin-top:8px;
}
#travelForm .btn:hover,
[id^="personalVisaForm"] .btn:hover,
#travelForm input[type="submit"]:hover,
[id^="personalVisaForm"] input[type="submit"]:hover{
transform:translateY(-2px);
box-shadow:0 16px 32px rgba(243,125,38,.42) !important;
color:#fff !important;
}
/* Add More button (secondary - teal gradient) */
[id^="personalVisaForm"] .btn-info,
[id^="personalVisaForm"] input[name="add_more"],
[id^="personalVisaForm"] button[name="add_more"],
[id^="personalVisaForm"] .btn-success{
background:var(--grad-teal) !important;
box-shadow:0 10px 24px rgba(0,160,168,.32) !important;
}
[id^="personalVisaForm"] .btn-info:hover,
[id^="personalVisaForm"] input[name="add_more"]:hover,
[id^="personalVisaForm"] .btn-success:hover{
box-shadow:0 16px 32px rgba(0,160,168,.42) !important;
}
/* Section dividers / sub-headings within the form */
#travelForm h3, #travelForm h4, #travelForm h5,
[id^="personalVisaForm"] h3, [id^="personalVisaForm"] h4, [id^="personalVisaForm"] h5{
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
margin:18px 0 12px !important;
padding-bottom:8px !important;
border-bottom:2px solid var(--teal-light) !important;
letter-spacing:-.3px;
}
/* ====================================================
MODERN TRENDING DATEPICKER
==================================================== */
.datepicker.dropdown-menu,
.datepicker-dropdown,
.datepicker-inline{
border:none !important;
border-radius:16px !important;
box-shadow:0 20px 50px rgba(0,160,168,.18), 0 6px 16px rgba(0,0,0,.08) !important;
padding:16px !important;
font-family:'Inter',sans-serif !important;
background:#ffffff !important;
min-width:340px !important;
width:340px !important;
z-index:9999 !important;
margin-top:6px !important;
}
/* Arrow / tip */
.datepicker-dropdown:before,
.datepicker-dropdown:after{ display:none !important; }
/* Calendar table wrapper */
.datepicker table{
width:100% !important;
font-family:'Inter',sans-serif !important;
border-collapse:separate !important;
border-spacing:2px !important;
}
/* Header row (Month Year + arrows) */
.datepicker thead tr:first-child th,
.datepicker thead tr:first-child{
background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%) !important;
border-radius:12px !important;
color:#fff !important;
}
.datepicker thead tr:first-child th{
padding:12px 6px !important;
font-weight:700 !important; font-size:1.35rem !important;
color:#fff !important;
}
.datepicker thead tr:first-child th.prev,
.datepicker thead tr:first-child th.next{
border-radius:10px !important;
width:42px !important; min-width:42px !important;
font-size:1.35rem !important;
cursor:pointer;
visibility:visible !important; display:table-cell !important;
color:#fff !important; opacity:1 !important;
transition:var(--transition);
}
.datepicker thead tr:first-child th.prev:hover,
.datepicker thead tr:first-child th.next:hover{
background:rgba(255,255,255,.18) !important;
}
.datepicker thead tr:first-child th.datepicker-switch{
letter-spacing:.3px;
}
/* Day-of-week headers (Mo Tu We…) */
.datepicker thead tr:nth-child(2) th,
.datepicker thead tr.dow th,
.datepicker .dow{
color:var(--text-light) !important;
font-weight:700 !important; font-size:.85rem !important;
text-transform:uppercase; letter-spacing:.6px;
padding:12px 0 !important; background:none !important;
}
/* Day cells */
.datepicker td.day,
.datepicker td{
width:42px !important; height:42px !important;
text-align:center; padding:0 !important;
font-size:1.35rem !important; font-weight:600 !important;
color:var(--dark) !important;
border-radius:50% !important;
background:none !important;
transition:all .18s ease !important;
cursor:pointer;
}
.datepicker td.day:hover,
.datepicker td.month:hover,
.datepicker td.year:hover{
background:var(--teal-light) !important;
color:var(--teal-dark) !important;
transform:scale(1.04);
}
.datepicker td.old.day,
.datepicker td.new.day{
color:#cbd5e1 !important;
}
/* Today */
.datepicker td.today,
.datepicker td.today.day,
.datepicker td.today.disabled,
.datepicker td.today:hover{
background:transparent !important;
color:var(--orange-dark) !important;
font-weight:800 !important;
position:relative;
box-shadow:inset 0 0 0 2px var(--orange) !important;
}
/* Selected / active */
.datepicker td.active,
.datepicker td.active.day,
.datepicker td.active:hover,
.datepicker td.active.day:hover,
.datepicker td.active.active{
background:var(--grad-teal) !important;
color:#fff !important; text-shadow:none !important;
font-weight:700 !important;
box-shadow:0 6px 14px rgba(0,160,168,.30) !important;
}
/* Disabled */
.datepicker td.disabled,
.datepicker td.disabled:hover{
background:none !important;
color:#e2e8f0 !important; cursor:not-allowed;
transform:none;
}
/* Month / Year grid */
.datepicker td span.month,
.datepicker td span.year{
border-radius:10px !important;
margin:3px !important;
padding:14px 6px !important;
font-size:1.35rem !important;
font-weight:600 !important;
background:#f8fafc !important; color:var(--dark) !important;
transition:var(--transition);
}
.datepicker td span.month:hover,
.datepicker td span.year:hover{
background:var(--teal-light) !important; color:var(--teal-dark) !important;
}
.datepicker td span.active,
.datepicker td span.active:hover{
background:var(--grad-teal) !important; color:#fff !important;
}
/* Date input — show calendar icon on right side */
#travelForm input[id*="date" i],
#travelForm input[id*="Date"],
[id^="personalVisaForm"] input[id*="date" i],
[id^="personalVisaForm"] input[id*="Date"],
[id^="personalVisaForm"] input[id*="dob" i],
[id^="personalVisaForm"] input[id*="DOB"]{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:right 14px center !important;
background-size:18px !important;
padding-right:42px !important;
cursor:pointer;
}
/* Add-more applicant row separator (for PersonalForm with multiple applicants) */
[id^="personalVisaForm"] .applicant-row,
[id^="personalVisaForm"] .traveller-block,
[id^="personalVisaForm"] > div.panel-body + div.panel-body{
border-top:1px dashed var(--border);
padding-top:20px;
margin-top:20px;
}
/* Mobile responsive */
@media (max-width:768px){
.travel-banner{ padding:18px 0 14px !important; }
.travel-banner h1{ font-size:1.45rem !important; }
.travel-banner::before{ height:46px; margin-bottom:8px; max-width:360px; }
#travelForm .form-control,
[id^="personalVisaForm"] .form-control{ font-size:16px !important; } /* prevent iOS zoom */
#travelForm .btn, [id^="personalVisaForm"] .btn{
width:100% !important; padding:0 20px !important;
}
section#pricing .panel-default{ padding:14px 8px !important; border-radius:14px !important; }
}
/* ============================================================
PAYMENT PAGE (frontend/payment-detail.php) — modern redesign
============================================================ */
.body-payment section#pricing,
section#pricing:has(form[name="paynow"]){
background:linear-gradient(180deg,#f8fcfd 0%,#ffffff 100%) !important;
padding:8px 0 10px !important;
}
.body-payment section#pricing > .container,
section#pricing:has(form[name="paynow"]) > .container{
max-width:1100px !important;
}
/* main heading */
section#pricing:has(form[name="paynow"]) h1,
.body-payment section#pricing h1{
font-family:'Inter',sans-serif !important;
font-size:1.9rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
text-align:center !important;
letter-spacing:-.5px;
margin:0 0 24px !important;
padding:0 !important;
}
section#pricing:has(form[name="paynow"]) h1::before,
.body-payment section#pricing h1::before{
content:"\f09d";
font-family:'FontAwesome';
display:inline-block;
width:42px; height:42px;
background:var(--grad-orange); color:#fff;
border-radius:12px; margin-right:14px;
text-align:center; line-height:42px;
box-shadow:0 8px 18px rgba(243,125,38,.30);
vertical-align:middle;
font-size:1.35rem; font-weight:400;
}
/* applicant table */
.body-payment section#pricing table.table,
section#pricing:has(form[name="paynow"]) table.table{
background:#fff !important;
border-radius:14px !important; overflow:hidden;
box-shadow:0 10px 30px rgba(0,160,168,.08), 0 2px 6px rgba(0,0,0,.04) !important;
margin:0 0 24px !important;
border-collapse:separate !important; border-spacing:0 !important;
}
.body-payment section#pricing table.table thead th,
section#pricing:has(form[name="paynow"]) table.table thead th{
background:var(--grad-teal) !important;
color:#fff !important;
font-family:'Inter',sans-serif !important;
font-size:.92rem !important; font-weight:700 !important;
letter-spacing:.5px; text-transform:uppercase;
padding:14px 16px !important;
border:none !important;
}
.body-payment section#pricing table.table tbody td,
section#pricing:has(form[name="paynow"]) table.table tbody td{
padding:14px 16px !important;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
color:var(--dark) !important;
border-top:1px solid var(--border) !important;
vertical-align:middle !important;
}
.body-payment section#pricing table.table tbody tr:nth-child(odd) td,
section#pricing:has(form[name="paynow"]) table.table tbody tr:nth-child(odd) td{
background:#f8fcfd !important;
}
/* edit/trash icons inside table */
.body-payment section#pricing .glyphicon-edit,
.body-payment section#pricing .glyphicon-trash,
section#pricing:has(form[name="paynow"]) .glyphicon-edit,
section#pricing:has(form[name="paynow"]) .glyphicon-trash{
display:inline-flex !important; align-items:center; justify-content:center;
width:34px; height:34px;
border-radius:50%;
font-family:'FontAwesome' !important; font-size:.95rem !important;
text-decoration:none !important;
transition:var(--transition) !important;
}
.body-payment section#pricing .glyphicon-edit,
section#pricing:has(form[name="paynow"]) .glyphicon-edit{
background:var(--teal-light); color:var(--teal-dark) !important;
}
.body-payment section#pricing .glyphicon-edit::before,
section#pricing:has(form[name="paynow"]) .glyphicon-edit::before{ content:"\f044" !important; }
.body-payment section#pricing .glyphicon-trash,
section#pricing:has(form[name="paynow"]) .glyphicon-trash{
background:#fef2f2; color:#dc2626 !important; margin-left:6px;
}
.body-payment section#pricing .glyphicon-trash::before,
section#pricing:has(form[name="paynow"]) .glyphicon-trash::before{ content:"\f1f8" !important; }
.body-payment section#pricing .glyphicon-edit:hover,
section#pricing:has(form[name="paynow"]) .glyphicon-edit:hover{
background:var(--teal); color:#fff !important; transform:scale(1.06);
}
.body-payment section#pricing .glyphicon-trash:hover,
section#pricing:has(form[name="paynow"]) .glyphicon-trash:hover{
background:#dc2626; color:#fff !important; transform:scale(1.06);
}
/* === Summary panel: card icons + reference + summary table === */
/* Target ONLY the direct parent that contains col-xs-6 children */
.body-payment section#pricing .col-sm-12:has(> .col-xs-6),
section#pricing:has(form[name="paynow"]) .col-sm-12:has(> .col-xs-6){
display:flex !important; flex-wrap:wrap !important;
align-items:stretch !important;
gap:18px;
margin:0 !important;
padding:0 !important;
width:100% !important;
}
.body-payment section#pricing .col-sm-12 > .col-xs-6,
section#pricing:has(form[name="paynow"]) .col-sm-12 > .col-xs-6{
background:#fff;
border:1px solid var(--border);
border-radius:18px;
padding:24px !important;
margin:0 !important;
flex:1 1 calc(50% - 9px) !important;
min-width:280px;
display:flex !important; flex-direction:column !important;
box-shadow:0 8px 24px rgba(0,160,168,.07);
float:none !important; width:auto !important;
}
/* === Payment methods grid (Visa/MC/Amex/PayPal/Netbanking/UPI tiles) === */
.pay-methods{
display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
margin:8px 0 18px;
}
.pay-method{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px;
background:linear-gradient(180deg,#fafdfd 0%,#f0fbfc 100%);
border:1px solid var(--border);
border-radius:12px;
padding:14px 8px;
transition:var(--transition);
cursor:default;
min-height:78px;
}
.pay-method:hover{
border-color:var(--teal);
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,160,168,.15);
}
.pay-method .fa{
font-size:2rem;
color:var(--teal-dark);
line-height:1;
}
.pay-method .fa-cc-visa{ color:#1a1f71; }
.pay-method .fa-cc-mastercard{ color:#eb001b; }
.pay-method .fa-cc-amex{ color:#2e77bb; }
.pay-method .fa-cc-paypal{ color:#003087; }
.pay-method .fa-university{ color:#0a7a4d; }
.pay-method .fa-mobile{ color:#f37d26; }
.pay-method span{
font-family:'Inter',sans-serif;
font-size:.78rem; font-weight:700;
color:var(--dark);
letter-spacing:.2px;
text-align:center;
}
/* Security note under the payment methods */
.pay-secure{
display:flex; align-items:center; gap:10px;
margin-top:auto;
padding:12px 14px;
background:#effaf3;
border:1px solid #bff0d8;
border-radius:10px;
color:#0a7a4d;
font-family:'Inter',sans-serif;
font-size:.88rem; font-weight:600;
line-height:1.4;
}
.pay-secure .fa{
color:#10b981; font-size:1.35rem;
}
@media (max-width:560px){
.pay-methods{ grid-template-columns:repeat(2,1fr); }
}
.body-payment section#pricing .col-xs-6 .lead,
section#pricing:has(form[name="paynow"]) .col-xs-6 .lead{
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
margin:0 0 14px !important;
padding-bottom:10px;
border-bottom:1px dashed var(--border);
letter-spacing:-.2px;
}
.body-payment section#pricing .col-xs-6 img,
section#pricing:has(form[name="paynow"]) .col-xs-6 img{
height:30px; width:auto;
margin:6px 8px 0 0;
opacity:.92;
filter:grayscale(.15);
transition:var(--transition);
}
.body-payment section#pricing .col-xs-6 img:hover,
section#pricing:has(form[name="paynow"]) .col-xs-6 img:hover{
opacity:1; filter:grayscale(0); transform:translateY(-2px);
}
/* Summary detail table inside col-xs-6 */
.body-payment section#pricing .col-xs-6 table.table,
section#pricing:has(form[name="paynow"]) .col-xs-6 table.table{
box-shadow:none !important;
margin:0 !important;
background:transparent !important;
}
.body-payment section#pricing .col-xs-6 table.table th,
section#pricing:has(form[name="paynow"]) .col-xs-6 table.table th{
background:none !important;
color:var(--text-light) !important;
font-size:1.35rem !important;
font-weight:600 !important;
text-transform:none !important;
letter-spacing:0 !important;
padding:10px 0 !important;
border:none !important;
border-bottom:1px dashed var(--border) !important;
}
.body-payment section#pricing .col-xs-6 table.table td,
section#pricing:has(form[name="paynow"]) .col-xs-6 table.table td{
background:none !important;
font-size:1.35rem !important;
font-weight:700 !important;
color:var(--dark) !important;
text-align:right !important;
padding:10px 0 !important;
border:none !important;
border-bottom:1px dashed var(--border) !important;
}
.body-payment section#pricing .col-xs-6 table.table tr:last-child td,
.body-payment section#pricing .col-xs-6 table.table tr:last-child th,
section#pricing:has(form[name="paynow"]) .col-xs-6 table.table tr:last-child td,
section#pricing:has(form[name="paynow"]) .col-xs-6 table.table tr:last-child th{
border-bottom:none !important;
color:var(--orange) !important;
font-size:1.25rem !important;
}
/* Hide rows whose value cell is empty (e.g. missing Visa Type) */
.body-payment section#pricing .col-xs-6 table.table tr:has(td:empty),
section#pricing:has(form[name="paynow"]) .col-xs-6 table.table tr:has(td:empty){
display:none !important;
}
/* === Payment buttons (now nested INSIDE the right summary card) === */
form[name="paynow"]{
display:flex; flex-direction:column; gap:12px;
margin:18px 0 0;
padding:0;
}
form[name="paynow"] .btn{
display:flex !important; align-items:center; justify-content:center; gap:12px;
float:none !important;
width:100% !important;
height:auto !important; min-height:54px;
padding:16px 28px !important;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important; font-weight:700 !important;
border:none !important; border-radius:50px !important;
color:#fff !important;
transition:var(--transition) !important;
text-transform:none !important;
cursor:pointer;
}
form[name="paynow"] .btn-purple,
form[name="paynow"] button[name="pay_now"]{
background:linear-gradient(135deg,#003087 0%,#0070ba 100%) !important;
box-shadow:0 10px 26px rgba(0,112,186,.35) !important;
}
form[name="paynow"] .btn-purple:hover,
form[name="paynow"] button[name="pay_now"]:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(0,112,186,.45) !important;
color:#fff !important;
}
form[name="paynow"] .btn-primary{
background:var(--grad-orange) !important;
box-shadow:0 10px 26px rgba(243,125,38,.35) !important;
}
form[name="paynow"] .btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(243,125,38,.45) !important;
color:#fff !important;
}
form[name="paynow"] .btn .fa{ font-size:1.15em; }
/* Payment already done state */
.body-payment section#pricing h2{
text-align:center; color:#0a7a4d;
font-family:'Inter',sans-serif; font-size:1.5rem; font-weight:800;
background:#effaf3; border:1px solid #bff0d8;
border-radius:14px; padding:20px;
margin:24px 0;
}
.body-payment section#pricing h2::before{
content:"\f00c "; font-family:'FontAwesome';
margin-right:10px; color:#10b981;
}
/* Mobile */
@media (max-width:768px){
.body-payment section#pricing .col-xs-6,
section#pricing:has(form[name="paynow"]) .col-xs-6{
width:100% !important; float:none !important;
}
form[name="paynow"] .btn{ width:100% !important; }
}
/* ============================================================
PAYMENT STATUS PAGES (success / failed / cancelled)
thankspaypal.php / thanksstripe.php / cancelpaypal.php
============================================================ */
.mv-pay-status{
background:linear-gradient(180deg,#f8fcfd 0%,#fff 100%);
padding:48px 14px 80px;
min-height:60vh;
}
.mv-pay-status .container{
max-width:680px !important;
}
.mv-pay-card{
position:relative;
background:#fff;
border:1px solid var(--border);
border-radius:24px;
padding:48px 36px 36px;
box-shadow:0 24px 60px rgba(0,160,168,.10), 0 4px 14px rgba(0,0,0,.05);
text-align:center;
overflow:hidden;
animation:mvPayIn .4s ease-out;
}
@keyframes mvPayIn{
from{ opacity:0; transform:translateY(20px); }
to{ opacity:1; transform:translateY(0); }
}
/* Status icon — big circular bubble at top */
.mv-pay-icon{
width:96px; height:96px;
margin:0 auto 22px;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:3rem; color:#fff;
box-shadow:0 18px 40px rgba(0,0,0,.18);
animation:mvIconPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mvIconPop{
0%{ transform:scale(0); opacity:0; }
60%{ transform:scale(1.1); opacity:1; }
100%{ transform:scale(1); }
}
.mv-pay-card.is-success .mv-pay-icon{
background:linear-gradient(135deg,#10b981 0%,#059669 100%);
box-shadow:0 18px 40px rgba(16,185,129,.40);
}
.mv-pay-card.is-failed .mv-pay-icon{
background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);
box-shadow:0 18px 40px rgba(239,68,68,.40);
}
.mv-pay-card.is-cancelled .mv-pay-icon{
background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
box-shadow:0 18px 40px rgba(245,158,11,.40);
}
.mv-pay-card.is-invalid .mv-pay-icon{
background:linear-gradient(135deg,#94a3b8 0%,#64748b 100%);
box-shadow:0 18px 40px rgba(100,116,139,.30);
}
/* Status badge */
.mv-pay-badge{
display:inline-flex; align-items:center; gap:8px;
background:#effaf3; color:#0a7a4d;
font-family:'Inter',sans-serif; font-weight:700;
font-size:.85rem; letter-spacing:1.6px;
padding:8px 18px; border-radius:50px;
border:1px solid #bff0d8;
margin-bottom:18px;
}
.mv-pay-badge--fail{
background:#fef2f2; color:#b91c1c; border-color:#fecaca;
}
.mv-pay-badge--warn{
background:#fffbeb; color:#92400e; border-color:#fde68a;
}
.mv-pay-title{
font-family:'Inter',sans-serif !important;
font-size:2rem !important; font-weight:800 !important;
color:var(--dark) !important;
letter-spacing:-.6px;
margin:0 0 14px !important;
line-height:1.18;
}
.mv-pay-sub{
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
color:var(--text-light) !important;
line-height:1.55 !important;
max-width:520px; margin:0 auto 28px !important;
}
/* Detail rows */
.mv-pay-details{
background:#f8fcfd;
border:1px solid var(--border);
border-radius:14px;
padding:8px 22px;
margin:0 0 28px;
text-align:left;
}
.mv-pay-row{
display:flex; align-items:center; justify-content:space-between;
padding:14px 0;
border-bottom:1px dashed var(--border);
font-family:'Inter',sans-serif;
}
.mv-pay-row:last-child{ border-bottom:none; }
.mv-pay-row span{
font-size:1.05rem; font-weight:600; color:var(--text-light);
}
.mv-pay-row b{
font-size:1.18rem; font-weight:800; color:var(--dark);
word-break:break-all; text-align:right;
}
.mv-pay-row--total{
background:linear-gradient(135deg,rgba(16,185,129,.06) 0%,rgba(0,160,168,.06) 100%);
margin:6px -22px -8px;
padding:16px 22px;
border-bottom:none;
border-radius:0 0 13px 13px;
}
.mv-pay-row--total span{ color:var(--teal-dark); font-weight:700; }
.mv-pay-row--total b{
font-size:1.6rem;
background:linear-gradient(90deg,var(--teal) 0%,var(--orange) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Action buttons */
.mv-pay-actions{
display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.mv-pay-btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:auto; min-height:54px;
padding:14px 28px;
font-family:'Inter',sans-serif;
font-size:1.05rem; font-weight:700;
border-radius:50px;
text-decoration:none !important;
transition:var(--transition);
border:1.5px solid transparent;
cursor:pointer;
}
.mv-pay-btn--primary{
background:var(--grad-teal); color:#fff !important;
box-shadow:0 10px 26px rgba(0,160,168,.32);
}
.mv-pay-btn--primary:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(0,160,168,.42);
color:#fff !important;
}
.mv-pay-card.is-failed .mv-pay-btn--primary,
.mv-pay-card.is-cancelled .mv-pay-btn--primary{
background:var(--grad-orange);
box-shadow:0 10px 26px rgba(243,125,38,.32);
}
.mv-pay-card.is-failed .mv-pay-btn--primary:hover,
.mv-pay-card.is-cancelled .mv-pay-btn--primary:hover{
box-shadow:0 16px 34px rgba(243,125,38,.42);
}
.mv-pay-btn--ghost{
background:#fff; color:var(--teal-dark) !important;
border-color:var(--border);
}
.mv-pay-btn--ghost:hover{
background:var(--bg-soft);
border-color:var(--teal);
color:var(--teal-dark) !important;
transform:translateY(-2px);
}
/* Confetti-style background blobs for the success state */
.mv-pay-card.is-success::before,
.mv-pay-card.is-success::after{
content:""; position:absolute; pointer-events:none;
width:240px; height:240px; border-radius:50%;
filter:blur(60px);
}
.mv-pay-card.is-success::before{
background:rgba(16,185,129,.18);
top:-100px; left:-80px;
}
.mv-pay-card.is-success::after{
background:rgba(243,125,38,.15);
bottom:-110px; right:-80px;
}
@media (max-width:560px){
.mv-pay-status{ padding:28px 10px 50px; }
.mv-pay-card{ padding:38px 22px 26px; border-radius:18px; }
.mv-pay-icon{ width:80px; height:80px; font-size:2.4rem; }
.mv-pay-title{ font-size:1.55rem !important; }
.mv-pay-sub{ font-size:1.05rem !important; }
.mv-pay-row{ flex-direction:column; align-items:flex-start; gap:4px; padding:12px 0; }
.mv-pay-row b{ text-align:left; }
.mv-pay-btn{ width:100%; }
}
/* ============================================================
FOOTER-LINKED STATIC PAGES — modern redesign via CSS
Targets: About, Contact, Privacy, Terms, Track, FAQ, How-to-Apply,
UAE/Saudi/Oman/Turkey Visa Countries
============================================================ */
/* === Page hero banners (Contact / Track) === */
.contact-banner,
.track-banner,
.about-banner{
background:linear-gradient(135deg,#0a8087 0%,#00a0a8 50%,#f37d26 110%) !important;
background-image:linear-gradient(135deg,#0a8087 0%,#00a0a8 50%,#f37d26 110%) !important;
min-height:0 !important;
padding:48px 14px 56px !important;
position:relative; overflow:hidden !important;
margin:0 !important;
color:#fff !important;
}
.contact-banner .row.pt80,
.track-banner .row.pt80{
padding:0 !important;
}
.contact-banner h1,
.track-banner h1,
.about-banner h1{
font-family:'Inter',sans-serif !important;
font-size:2.4rem !important; font-weight:800 !important;
color:#ffffff !important;
letter-spacing:-.7px !important;
text-align:center !important;
margin:0 0 10px !important;
padding:0 16px !important;
line-height:1.18 !important;
text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.contact-banner h1.inner-bannerh{ color:#fff !important; }
.contact-banner .inner-bannerp,
.contact-banner p{
text-align:center !important;
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
color:rgba(255,255,255,.92) !important;
margin:0 !important;
}
/* Soft glow blobs in banner background */
.contact-banner::before,
.track-banner::before{
content:""; position:absolute; pointer-events:none;
width:380px; height:380px; border-radius:50%;
background:rgba(255,255,255,.10);
top:-180px; left:-100px; filter:blur(40px);
}
.contact-banner::after,
.track-banner::after{
content:""; position:absolute; pointer-events:none;
width:340px; height:340px; border-radius:50%;
background:rgba(255,179,108,.18);
bottom:-160px; right:-80px; filter:blur(40px);
}
/* === Content wrapper inside #pricing (about/privacy/terms/how-to-apply) === */
body section.section#pricing > .container > .row.pt80,
body section.section#pricing > .container{
padding-top:10px !important;
}
/* Wrap content with an auto-card via the col-md-10 wrapper (always present on these pages) */
body section.section#pricing .col-md-10.col-md-offset-1{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:24px !important;
box-shadow:0 18px 50px rgba(0,160,168,.10), 0 4px 14px rgba(0,0,0,.05) !important;
padding:34px 36px !important;
margin:0 auto !important;
max-width:1000px;
float:none !important;
width:auto !important;
}
body section.section#pricing .panel-default,
body section.section#pricing .panel{
background:transparent !important;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}
/* Heading inside content panel */
body section.section#pricing .panel-default .panel-heading,
body section.section#pricing .panel .panel-heading{
background:none !important;
border:none !important;
border-bottom:2px solid var(--teal-light) !important;
padding:0 0 16px !important;
margin:0 0 22px !important;
}
body section.section#pricing .panel-default .panel-heading h1,
body section.section#pricing .panel .panel-heading h1,
body section.section#pricing .panel-body h1{
font-family:'Inter',sans-serif !important;
font-size:2rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
letter-spacing:-.5px !important;
margin:0 !important; padding:0 !important;
text-align:left !important;
text-transform:none !important;
font-style:normal !important;
background:none !important;
}
body section.section#pricing .panel-default h3,
body section.section#pricing .panel h3,
body section.section#pricing .panel-title{
font-family:'Inter',sans-serif !important;
font-size:1.45rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
letter-spacing:-.2px;
margin:26px 0 10px !important;
padding:0 0 8px !important;
border-bottom:1px dashed var(--border) !important;
text-transform:none !important;
}
body section.section#pricing .panel-body p,
body section.section#pricing .panel p{
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
line-height:1.65 !important;
color:var(--text) !important;
margin:0 0 14px !important;
text-align:left !important;
}
body section.section#pricing .panel-body a,
body section.section#pricing .panel a{
color:var(--teal-dark) !important;
font-weight:600;
border-bottom:1px dashed rgba(0,160,168,.45);
text-decoration:none !important;
transition:var(--transition);
}
body section.section#pricing .panel-body a:hover,
body section.section#pricing .panel a:hover{
color:var(--orange) !important;
border-bottom-color:var(--orange);
}
/* === Contact form === */
#contactForm{ padding:6px 0; }
#contactForm .form-group{
margin-bottom:18px !important;
display:block !important;
}
#contactForm label,
#contactForm .control-label{
display:flex !important; align-items:center; gap:8px;
text-align:left !important;
float:none !important; width:auto !important;
padding:0 0 8px !important;
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
letter-spacing:.3px; text-transform:uppercase;
}
#contactForm label::before{
font-family:'FontAwesome';
font-size:.9em; color:var(--teal);
width:22px; height:22px; border-radius:6px;
background:var(--teal-light);
display:inline-flex; align-items:center; justify-content:center;
padding:3px;
}
#contactForm label[for="name"]::before{ content:"\f007"; }
#contactForm label[for="email"]::before{ content:"\f0e0"; }
#contactForm label[for="phone"]::before{ content:"\f10b"; }
#contactForm label[for="enquiry"]::before{ content:"\f075"; }
#contactForm .col-sm-9, #contactForm .col-sm-6, #contactForm .col-sm-3{
width:100% !important; padding:0 !important; float:none !important;
}
#contactForm .form-control{
width:100% !important;
height:54px !important;
font-family:'Inter',sans-serif !important;
font-size:1.15rem !important; font-weight:500 !important;
color:var(--dark) !important;
background:#f8fafc !important;
border:1.5px solid #e2e8f0 !important;
border-radius:12px !important;
padding:0 18px !important;
transition:var(--transition) !important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.02) !important;
}
#contactForm textarea.form-control{
height:auto !important; min-height:130px !important;
padding:14px 18px !important;
line-height:1.5 !important;
}
#contactForm .form-control:focus{
background:#fff !important;
border-color:var(--teal) !important;
box-shadow:0 0 0 4px rgba(0,160,168,.12) !important;
outline:none !important;
}
#contactForm .form-control::placeholder{ color:#9ca3af !important; }
#contactForm .btn,
#contactForm input[type="submit"]{
display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
width:100% !important;
height:auto !important; min-height:54px;
padding:16px 28px !important;
font-family:'Inter',sans-serif !important;
font-size:1.1rem !important; font-weight:700 !important;
color:#fff !important;
background:var(--grad-orange) !important;
border:none !important; border-radius:50px !important;
cursor:pointer; box-shadow:0 10px 26px rgba(243,125,38,.32) !important;
transition:var(--transition) !important;
text-transform:none !important;
}
#contactForm .btn:hover,
#contactForm input[type="submit"]:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(243,125,38,.42) !important;
}
/* Right column on contact page — address / map.
Scoped so empty spacer cols (e.g. the two col-sm-5 flanking the
travel-form Continue button) don't get card styling. */
.contact-page-info,
section#pricing .col-sm-5:has(.panel),
section#pricing .col-sm-5:has(.social-icons),
section#pricing .col-sm-5:has(.contact-page-info){
background:linear-gradient(135deg,#f0fbfc 0%,#fff 100%);
border:1px solid var(--border);
border-radius:18px;
padding:26px;
}
/* Kill the card styling on empty spacer cols around form buttons */
section#pricing .col-sm-5:empty,
section#pricing form .col-sm-5{
background:none !important;
border:none !important;
border-radius:0 !important;
padding:0 !important;
box-shadow:none !important;
}
/* === Track Application form === */
#trackForm{
display:flex; align-items:center; justify-content:center;
gap:12px; flex-wrap:wrap;
margin:0 auto; max-width:680px;
background:#fff;
border-radius:18px;
padding:18px;
box-shadow:0 18px 50px rgba(0,0,0,.18);
}
#trackForm .col-sm-2{ display:none !important; }
#trackForm .col-sm-5, #trackForm .col-sm-3{
flex:1 1 220px !important;
width:auto !important; padding:0 !important; float:none !important;
}
#trackForm .col-sm-3{ flex:0 0 auto !important; }
#trackForm .form-group{ margin:0 !important; }
#trackForm input.form-control{
width:100% !important;
height:56px !important;
font-family:'Inter',sans-serif !important;
font-size:1.18rem !important; font-weight:600 !important;
background:#f8fafc !important;
border:1.5px solid #e2e8f0 !important;
border-radius:12px !important;
padding:0 18px !important;
letter-spacing:.5px;
}
#trackForm input.form-control:focus{
background:#fff !important;
border-color:var(--teal) !important;
box-shadow:0 0 0 4px rgba(0,160,168,.12) !important;
}
#trackForm input[type="submit"],
#trackForm .btn{
height:56px !important; min-height:56px;
padding:0 36px !important;
font-family:'Inter',sans-serif !important;
font-size:1.1rem !important; font-weight:700 !important;
color:#fff !important;
background:var(--grad-orange) !important;
border:none !important; border-radius:50px !important;
cursor:pointer;
box-shadow:0 10px 26px rgba(243,125,38,.32) !important;
transition:var(--transition) !important;
}
#trackForm input[type="submit"]:hover,
#trackForm .btn:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(243,125,38,.42) !important;
}
/* === FAQ list page (blogs/faqs.php / blogs/faqpost.php) === */
.faq-question-list .panelfaq,
section#pricing .panelfaq{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:14px !important;
margin-bottom:12px !important;
box-shadow:0 6px 20px rgba(0,160,168,.06) !important;
overflow:hidden;
transition:var(--transition) !important;
}
.faq-question-list .panelfaq:hover,
section#pricing .panelfaq:hover{
box-shadow:0 12px 30px rgba(0,160,168,.14) !important;
transform:translateY(-2px);
}
/* === Visa Countries pages (uaecountry / saudicountry / etc.) === */
body section#pricing table,
body section#pricing .table{
width:100%; margin:18px 0 !important;
border-radius:12px !important;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,160,168,.08) !important;
border:none !important;
}
body section#pricing table thead th,
body section#pricing .table thead th{
background:var(--grad-teal) !important;
color:#fff !important;
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; font-weight:700 !important;
padding:14px 16px !important;
text-align:left !important;
border:none !important;
letter-spacing:.3px;
}
body section#pricing table tbody td,
body section#pricing .table tbody td{
padding:13px 16px !important;
font-family:'Inter',sans-serif !important;
font-size:1.1rem !important;
border-top:1px solid var(--border) !important;
background:#fff !important;
color:var(--dark) !important;
}
body section#pricing table tbody tr:nth-child(even) td,
body section#pricing .table tbody tr:nth-child(even) td{
background:#f8fcfd !important;
}
/* === Lists inside content (privacy/terms bullet points) === */
body section#pricing .panel-body ul,
body section#pricing .panel ul,
body section#pricing .panel-body ol,
body section#pricing .panel ol{
margin:0 0 18px !important;
padding-left:0 !important;
list-style:none !important;
}
body section#pricing .panel-body ul li,
body section#pricing .panel ul li{
position:relative;
padding:6px 0 6px 30px !important;
font-size:1.35rem !important;
line-height:1.55 !important;
color:var(--text) !important;
}
body section#pricing .panel-body ul li::before,
body section#pricing .panel ul li::before{
content:"\f00c"; font-family:'FontAwesome';
position:absolute; left:0; top:9px;
width:20px; height:20px;
background:var(--teal-light); color:var(--teal);
border-radius:50%; font-size:.7rem; font-weight:700;
display:inline-flex; align-items:center; justify-content:center;
}
/* === Contact page 2-column layout (form left, info right) === */
section#pricing .row > .col-sm-7{
width:60% !important; float:left !important; padding-right:16px !important;
}
section#pricing .row > .col-sm-5:has(.panel),
section#pricing .row > .col-sm-5:has(.social-icons){
width:40% !important; float:left !important; padding-left:16px !important;
background:linear-gradient(135deg,#f0fbfc 0%,#fff 100%) !important;
border:1px solid var(--border) !important;
border-radius:18px !important;
padding:26px !important;
margin-top:0 !important;
box-shadow:0 8px 24px rgba(0,160,168,.06);
}
@media (max-width:768px){
section#pricing .row > .col-sm-7,
section#pricing .row > .col-sm-5{
width:100% !important; float:none !important;
padding-left:0 !important; padding-right:0 !important;
margin-bottom:18px;
}
}
/* === FAQs page (blogs/faqs.php) — no #pricing id === */
section.section:has(.panelfaq){
background:linear-gradient(180deg,#f8fcfd 0%,#fff 100%) !important;
padding:40px 14px 60px !important;
}
section.section:has(.panelfaq) > .container > .row > .col-md-12 > .text-center > h1,
section.section:has(.panelfaq) h1.articlehfour{
font-family:'Inter',sans-serif !important;
font-size:2.2rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
letter-spacing:-.6px !important;
text-align:center !important;
margin:0 auto 32px !important;
padding:0 !important;
text-transform:none !important;
text-shadow:none !important;
}
section.section:has(.panelfaq) > .container > .row > .col-md-12 > .text-center{
background:none !important; border:none !important;
}
section.section:has(.panelfaq) .panel-group.col-sm-10{
width:100% !important; max-width:880px;
margin:0 auto !important; float:none !important;
padding:0 !important;
}
section.section:has(.panelfaq) .panelfaq{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:14px !important;
margin-bottom:12px !important;
box-shadow:0 6px 20px rgba(0,160,168,.06) !important;
overflow:hidden;
transition:var(--transition) !important;
}
section.section:has(.panelfaq) .panelfaq:hover{
box-shadow:0 14px 32px rgba(0,160,168,.14) !important;
transform:translateY(-2px);
}
/* ============================================================
BLOG DETAIL PAGE (blogs/blogpost.php) — modern editorial design
============================================================ */
div.section:has(.col-md-7 .panel-body h1){
background:linear-gradient(180deg,#f8fcfd 0%,#fff 100%) !important;
padding:20px 14px 30px !important;
}
/* Two-column layout: article + sticky sidebar */
div.section:has(.col-md-7 .panel-body h1) > .container > .row{
display:flex !important; flex-wrap:wrap !important;
gap:5px;
margin:0 !important;
align-items:flex-start;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7{
flex:1 1 600px !important;
width:auto !important; max-width:760px; min-width:0;
padding:0 !important; float:none !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5{
flex:0 1 360px !important;
width:auto !important; max-width:380px; min-width:0;
padding:0 !important; float:none !important;
position:sticky; top:90px;
}
@media (max-width:992px){
div.section:has(.col-md-7 .panel-body h1) .col-md-7,
div.section:has(.col-md-7 .panel-body h1) .col-md-5{
flex:1 1 100% !important; max-width:100% !important;
position:static !important;
}
}
/* Article card */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
padding:40px 42px;
box-shadow:0 18px 50px rgba(0,160,168,.10), 0 4px 14px rgba(0,0,0,.05);
}
/* Article title (main H1) */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body > h1,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body > h1:first-of-type{
font-family:'Inter',sans-serif !important;
font-size:2.4rem !important; font-weight:800 !important;
color:var(--dark) !important;
letter-spacing:-.9px !important;
line-height:1.18 !important;
margin:0 0 18px !important;
padding:0 0 14px !important;
border-bottom:3px solid var(--teal-light);
text-transform:none !important;
}
/* Body content typography */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body h2{
font-family:'Inter',sans-serif !important;
font-size:1.85rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
letter-spacing:-.5px !important;
margin:32px 0 12px !important;
line-height:1.22 !important;
position:relative; padding-left:18px;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body h2::before{
content:""; position:absolute; left:0; top:10px; bottom:10px;
width:5px; border-radius:4px;
background:linear-gradient(180deg,var(--teal),var(--orange));
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body h3{
font-family:'Inter',sans-serif !important;
font-size:1.5rem !important; font-weight:700 !important;
color:var(--teal) !important;
margin:26px 0 10px !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body p{
font-family:'Inter',sans-serif !important;
font-size:1.35rem !important;
line-height:1.7 !important;
color:var(--text) !important;
margin:0 0 16px !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body p a,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body li a{
color:var(--teal-dark) !important;
font-weight:600;
border-bottom:1px dashed rgba(0,160,168,.45);
text-decoration:none !important;
transition:var(--transition);
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body p a:hover,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body li a:hover{
color:var(--orange) !important;
border-bottom-color:var(--orange);
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body strong,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body b{
color:var(--dark) !important; font-weight:700;
}
/* Lists with check icons */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ul,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ol{
margin:0 0 20px !important;
padding-left:0 !important;
list-style:none !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ul li,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ol li{
position:relative;
padding:8px 0 8px 36px !important;
font-size:1.35rem !important; line-height:1.55 !important;
color:var(--text) !important;
border-bottom:1px dashed var(--border);
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ul li:last-child,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ol li:last-child{
border-bottom:none;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ul li::before{
content:"\f00c"; font-family:'FontAwesome';
position:absolute; left:0; top:10px;
width:22px; height:22px;
background:var(--teal-light); color:var(--teal);
border-radius:50%; font-size:.72rem; font-weight:700;
display:inline-flex; align-items:center; justify-content:center;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ol{ counter-reset:bp-li; }
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ol li{ counter-increment:bp-li; }
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body ol li::before{
content:counter(bp-li);
position:absolute; left:0; top:8px;
width:24px; height:24px;
background:var(--grad-teal); color:#fff;
border-radius:50%; font-size:.82rem; font-weight:700;
font-family:'Inter',sans-serif;
display:inline-flex; align-items:center; justify-content:center;
}
/* In-article CTA button — ONLY for elements explicitly marked .btn or .primary-button */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body a.btn,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body a.primary-button{
display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
padding:14px 32px !important;
background:var(--grad-orange) !important;
color:#fff !important;
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; font-weight:700 !important;
border:none !important; border-radius:50px !important;
box-shadow:0 10px 26px rgba(243,125,38,.32) !important;
transition:var(--transition) !important;
text-decoration:none !important;
margin:18px 0 !important;
}
/* === Right sidebar === */
div.section:has(.col-md-7 .panel-body h1) .col-md-5 .panel-body{
background:#fff;
border:1px solid var(--border);
border-radius:24px;
padding:24px;
box-shadow:0 18px 50px rgba(0,160,168,.10), 0 4px 14px rgba(0,0,0,.05);
}
/* Featured image */
div.section:has(.col-md-7 .panel-body h1) .col-md-5 figure{
margin:0 0 22px !important; float:none !important;
position:relative; overflow:hidden;
border-radius:16px;
box-shadow:0 14px 32px rgba(0,0,0,.18);
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 figure img{
width:100% !important;
height:auto !important; max-height:300px;
object-fit:cover;
display:block;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 figure figcaption{
font-family:'Inter',sans-serif;
font-size:.92rem; font-style:italic;
color:var(--text-light);
padding:10px 4px 0;
text-align:center;
line-height:1.4;
}
/* Sidebar Quick Overview / What do I need headings */
div.section:has(.col-md-7 .panel-body h1) .col-md-5 h3{
font-family:'Inter',sans-serif !important;
font-size:1.4rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
margin:18px 0 12px !important;
padding:0 0 8px !important;
border-bottom:2px solid var(--teal-light) !important;
letter-spacing:-.3px;
display:flex; align-items:center; gap:8px;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 h3:first-of-type::before{
content:"\f05a"; font-family:'FontAwesome';
width:28px; height:28px;
background:var(--grad-teal); color:#fff;
border-radius:8px;
display:inline-flex; align-items:center; justify-content:center;
font-size:.85rem;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 h3:nth-of-type(2)::before{
content:"\f15c"; font-family:'FontAwesome';
width:28px; height:28px;
background:var(--grad-orange); color:#fff;
border-radius:8px;
display:inline-flex; align-items:center; justify-content:center;
font-size:.85rem;
}
/* Sidebar lists */
div.section:has(.col-md-7 .panel-body h1) .col-md-5 ul{
margin:0 0 18px !important;
padding-left:0 !important;
list-style:none !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 ul li{
position:relative;
padding:8px 0 8px 28px !important;
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; line-height:1.5 !important;
color:var(--text) !important;
border-bottom:1px dashed var(--border);
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 ul li:last-child{ border-bottom:none; }
div.section:has(.col-md-7 .panel-body h1) .col-md-5 ul li::before{
content:"\f00c"; font-family:'FontAwesome';
position:absolute; left:0; top:10px;
width:18px; height:18px;
background:var(--teal-light); color:var(--teal);
border-radius:50%; font-size:.6rem; font-weight:700;
display:inline-flex; align-items:center; justify-content:center;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 p{
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; line-height:1.55 !important;
color:var(--text) !important;
margin:0 0 12px !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 p b{
color:var(--orange-dark) !important;
}
/* Apply Now button in sidebar */
div.section:has(.col-md-7 .panel-body h1) .col-md-5 .btn,
div.section:has(.col-md-7 .panel-body h1) .col-md-5 a.btn,
div.section:has(.col-md-7 .panel-body h1) .col-md-5 .btn-pink{
display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
width:100% !important;
padding:16px 28px !important;
background:var(--grad-orange) !important;
color:#fff !important;
font-family:'Inter',sans-serif !important;
font-size:1.1rem !important; font-weight:700 !important;
border:none !important; border-radius:50px !important;
box-shadow:0 10px 26px rgba(243,125,38,.32) !important;
transition:var(--transition) !important;
text-decoration:none !important;
margin:14px 0 4px !important;
text-transform:none !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 .btn:hover,
div.section:has(.col-md-7 .panel-body h1) .col-md-5 a.btn:hover{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(243,125,38,.42) !important;
color:#fff !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-5 .col-sm-12.text-center{
padding:0 !important;
}
/* Tables in blog content */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body table{
width:100% !important;
border-collapse:separate; border-spacing:0;
margin:20px 0 !important;
border-radius:14px; overflow:hidden;
box-shadow:0 10px 28px rgba(0,160,168,.10);
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body th{
background:var(--grad-teal) !important;
color:#fff !important;
padding:14px 16px !important;
font-size:1.05rem !important; font-weight:700 !important;
text-align:left !important;
border:none !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body td{
padding:13px 16px !important;
font-size:1.15rem !important;
border-top:1px solid var(--border) !important;
background:#fff !important;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body tr:nth-child(even) td{
background:#f8fcfd !important;
}
/* Blockquote */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body blockquote{
margin:22px 0 !important;
padding:20px 24px !important;
background:linear-gradient(135deg,#f0fbfc 0%,#fff 100%);
border-left:4px solid var(--orange);
border-radius:0 14px 14px 0;
font-style:italic;
font-size:1.35rem;
color:var(--text);
}
/* Images in article */
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body img{
max-width:100%; height:auto;
border-radius:14px;
margin:18px 0;
box-shadow:0 10px 28px rgba(0,0,0,.10);
}
/* Mobile */
@media (max-width:768px){
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body,
div.section:has(.col-md-7 .panel-body h1) .col-md-5 .panel-body{
padding:24px 20px;
border-radius:18px;
}
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body > h1{ font-size:1.7rem !important; }
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body h2{ font-size:1.4rem !important; }
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body h3{ font-size:1.2rem !important; }
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body p,
div.section:has(.col-md-7 .panel-body h1) .col-md-7 .panel-body li{ font-size:1.1rem !important; }
}
/* === Blog list page (blogs/blogs.php) — modern card grid === */
section.section:has(.post.post-sm){
background:linear-gradient(180deg,#f8fcfd 0%,#fff 100%) !important;
padding:40px 14px 60px !important;
}
/* Title at top */
section.section:has(.post.post-sm) h1.titlevisa,
section.section:has(.post.post-sm) .panel-heading h1{
font-family:'Inter',sans-serif !important;
font-size:2.2rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
letter-spacing:-.6px !important;
text-align:center !important;
margin:0 auto 36px !important;
padding:0 16px !important;
max-width:900px;
line-height:1.25 !important;
text-transform:none !important;
}
section.section:has(.post.post-sm) .panel-heading{
background:none !important; border:none !important;
padding:0 !important;
}
/* Make the blog cards a proper 4-column grid */
section.section:has(.post.post-sm) > .container > .row > .col-md-12 > .col-md-12 > .col-md-12,
section.section:has(.post.post-sm) > .container > .row > .col-md-12:has(> .col-md-3 .post.post-sm){
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:24px !important;
padding:0 !important; float:none !important; width:100% !important;
}
/* When panel-heading is also a direct child, exclude it from the grid flow */
section.section:has(.post.post-sm) > .container > .row > .col-md-12:has(> .col-md-3 .post.post-sm) > .panel-heading{
grid-column:1 / -1 !important;
}
section.section:has(.post.post-sm) .col-md-3{
width:auto !important; padding:0 !important; float:none !important;
height:auto !important; min-height:0 !important;
}
section.section:has(.post.post-sm) .col-md-3[style*="height"]{
height:auto !important;
}
/* The blog card itself */
section.section:has(.post.post-sm) .post.post-sm{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:18px !important;
overflow:hidden !important;
box-shadow:0 10px 28px rgba(0,160,168,.08), 0 2px 6px rgba(0,0,0,.04) !important;
transition:var(--transition) !important;
display:flex !important; flex-direction:column !important;
height:100% !important;
}
section.section:has(.post.post-sm) .post.post-sm:hover{
transform:translateY(-6px) !important;
box-shadow:0 20px 40px rgba(0,160,168,.20), 0 6px 14px rgba(0,0,0,.08) !important;
border-color:transparent !important;
}
/* Post image */
section.section:has(.post.post-sm) .post-img{
display:block !important; position:relative;
overflow:hidden;
height:auto !important;
}
section.section:has(.post.post-sm) .post-img[style*="height"]{
height:auto !important;
}
section.section:has(.post.post-sm) .post-img img{
width:100% !important;
height:180px !important;
object-fit:cover !important;
display:block;
transition:transform .5s ease !important;
}
section.section:has(.post.post-sm) .post.post-sm:hover .post-img img{
transform:scale(1.06) !important;
}
/* When no image, use a gradient placeholder */
section.section:has(.post.post-sm) .post.post-sm:not(:has(.post-img))::before,
section.section:has(.post.post-sm) .post.post-sm:has(.post-img:empty)::before{
content:""; display:block; height:180px;
background:linear-gradient(135deg,#00a0a8 0%,#0a8087 50%,#f37d26 100%);
}
/* Post body */
section.section:has(.post.post-sm) .post-body{
padding:18px 20px 20px !important;
display:flex !important; flex-direction:column !important;
gap:10px; flex:1;
}
/* Category pill */
section.section:has(.post.post-sm) .post-category{
margin:0 !important;
}
section.section:has(.post.post-sm) .post-category a{
display:inline-block;
background:var(--grad-orange) !important;
color:#fff !important;
font-family:'Inter',sans-serif !important;
font-size:.72rem !important; font-weight:800 !important;
letter-spacing:1.4px;
text-transform:uppercase;
padding:5px 12px !important;
border-radius:50px !important;
text-decoration:none !important;
border:none !important;
box-shadow:0 4px 12px rgba(243,125,38,.30);
}
section.section:has(.post.post-sm) .post-category a:hover{
background:var(--grad-teal) !important;
color:#fff !important;
border-color:transparent !important;
}
/* Title */
section.section:has(.post.post-sm) .post-titlevisa{
font-family:'Inter',sans-serif !important;
font-size:1.18rem !important; font-weight:700 !important;
color:var(--dark) !important;
letter-spacing:-.3px;
line-height:1.35 !important;
margin:0 !important; padding:0 !important;
}
section.section:has(.post.post-sm) .post-titlevisa a{
color:var(--dark) !important;
text-decoration:none !important;
border:none !important;
transition:color .25s ease !important;
}
section.section:has(.post.post-sm) .post-titlevisa a:hover{
color:var(--teal) !important;
border:none !important;
}
/* Add "Read more →" at bottom of each card */
section.section:has(.post.post-sm) .post-body::after{
content:"Read more →";
margin-top:auto;
font-family:'Inter',sans-serif;
font-size:.92rem; font-weight:700;
color:var(--teal);
padding-top:8px;
border-top:1px dashed var(--border);
transition:var(--transition);
}
section.section:has(.post.post-sm) .post.post-sm:hover .post-body::after{
color:var(--orange);
letter-spacing:.4px;
}
/* Responsive grid */
@media (max-width:992px){
section.section:has(.post.post-sm) > .container > .row > .col-md-12 > .col-md-12 > .col-md-12,
section.section:has(.post.post-sm) > .container > .row > .col-md-12:has(> .col-md-3 .post.post-sm){
grid-template-columns:repeat(3,1fr) !important;
}
}
@media (max-width:768px){
section.section:has(.post.post-sm) > .container > .row > .col-md-12 > .col-md-12 > .col-md-12,
section.section:has(.post.post-sm) > .container > .row > .col-md-12:has(> .col-md-3 .post.post-sm){
grid-template-columns:repeat(2,1fr) !important; gap:16px !important;
}
section.section:has(.post.post-sm) h1.titlevisa{ font-size:1.5rem !important; }
}
@media (max-width:480px){
section.section:has(.post.post-sm) > .container > .row > .col-md-12 > .col-md-12 > .col-md-12,
section.section:has(.post.post-sm) > .container > .row > .col-md-12:has(> .col-md-3 .post.post-sm){
grid-template-columns:1fr !important;
}
}
/* === PayPal Smart Checkout block (next to legacy PayPal Standard button) === */
.paypal-sdk-block{
margin-top:18px !important;
padding-top:18px !important;
border-top:1px dashed rgba(0,160,168,.22) !important;
}
.paypal-sdk-divider{
text-align:center;
margin:0 0 14px;
position:relative;
font-family:'Inter',sans-serif;
font-size:.82rem; font-weight:700;
letter-spacing:1.4px; text-transform:uppercase;
color:#7e8a98;
}
.paypal-sdk-divider span{
background:#fff; padding:0 12px; position:relative; z-index:1;
}
.paypal-sdk-divider::before{
content:""; position:absolute;
left:0; right:0; top:50%;
border-top:1px dashed rgba(0,160,168,.20);
z-index:0;
}
#paypal-smart-buttons{
min-height:50px;
max-width:100%;
}
.paypal-sdk-status{
margin-top:12px;
font-family:'Inter',sans-serif;
font-size:.95rem;
padding:0 4px;
min-height:1.2em;
}
.paypal-sdk-status.is-loading{color:#516374;}
.paypal-sdk-status.is-success{
color:#047857;
background:rgba(16,185,129,.08);
padding:10px 14px; border-radius:10px;
border-left:3px solid #10b981;
}
.paypal-sdk-status.is-warning{
color:#92400e;
background:rgba(243,125,38,.08);
padding:10px 14px; border-radius:10px;
border-left:3px solid #f37d26;
}
.paypal-sdk-status.is-error{
color:#b91c1c;
background:rgba(220,38,38,.07);
padding:10px 14px; border-radius:10px;
border-left:3px solid #dc2626;
}
/* === Slim footer for inner pages (no links, copyright only) === */
footer.footer.footer-slim{
background:linear-gradient(135deg,#007a80 0%,#00a0a8 100%) !important;
padding:18px 16px !important;
margin:0 !important;
min-height:0 !important;
}
footer.footer.footer-slim .footer-slim-inner{
text-align:center !important;
color:rgba(255,255,255,.92) !important;
font-family:'Inter',sans-serif !important;
font-size:.95rem !important; font-weight:500 !important;
letter-spacing:.3px !important;
}
/* === Track Application Status — modern hero + result + info === */
.mv-track-hero{
position:relative; overflow:hidden;
background:linear-gradient(135deg,#007a80 0%,#00a0a8 50%,#0a8087 100%) !important;
padding:42px 16px 50px !important;
margin:0 !important;
}
.mv-track-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.mv-track-hero-bg .blob{
position:absolute; border-radius:50%; filter:blur(60px); opacity:.35;
}
.mv-track-hero-bg .blob.b1{width:340px;height:340px;background:#00d4dd;top:-80px;left:-60px;}
.mv-track-hero-bg .blob.b2{width:280px;height:280px;background:#f37d26;top:30%;right:-40px;opacity:.28;}
.mv-track-hero-bg .blob.b3{width:240px;height:240px;background:#0a8087;bottom:-80px;left:35%;}
.mv-track-hero-inner{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto !important;}
.mv-track-eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:'Inter',sans-serif; font-size:.82rem; font-weight:700;
letter-spacing:1.5px; text-transform:uppercase;
color:#fff;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
padding:7px 16px; border-radius:50px;
backdrop-filter:blur(8px);
margin-bottom:18px;
}
.mv-track-eyebrow .dot{
width:8px;height:8px;border-radius:50%;
background:#7afff5;box-shadow:0 0 0 4px rgba(122,255,245,.25);
animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(122,255,245,.25);}50%{box-shadow:0 0 0 9px rgba(122,255,245,0);}}
.mv-track-title{
font-family:'Inter',sans-serif !important;
font-size:clamp(1.8rem, 4.4vw, 2.6rem) !important; font-weight:800 !important;
color:#fff !important; line-height:1.18 !important;
letter-spacing:-.8px !important;
margin:0 0 12px !important;
text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.mv-track-hero .mv-track-sub,
section.mv-track-hero p.mv-track-sub{
font-family:'Source Sans Pro',sans-serif !important;
font-size:1.08rem !important;
color:rgba(255,255,255,.95) !important;
margin:0 auto 26px !important; max-width:560px !important;
line-height:1.55 !important;
font-weight:500 !important;
text-align:center !important;
display:block !important;
text-shadow:0 1px 2px rgba(0,0,0,.15);
}
/* form */
form.mv-track-form{
display:flex !important; gap:10px !important;
background:#fff !important;
border-radius:60px !important;
padding:8px !important;
box-shadow:0 20px 50px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.08) !important;
max-width:640px !important; margin:0 auto !important;
align-items:center !important;
}
form.mv-track-form .mv-track-input-wrap{
position:relative !important; flex:1 1 auto !important;
display:flex !important; align-items:center !important;
min-width:0 !important;
}
form.mv-track-form .mv-track-input-ic{
position:absolute !important; left:20px !important; top:50% !important;
transform:translateY(-50%) !important;
color:#00a0a8 !important; display:flex !important; align-items:center !important;
pointer-events:none !important; z-index:2 !important;
background:#fff !important;
}
form.mv-track-form input.mv-track-input,
form.mv-track-form #application_number{
width:100% !important;
border:none !important; outline:none !important; box-shadow:none !important;
background:transparent !important;
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; font-weight:600 !important;
color:#1a2332 !important;
padding:14px 18px 14px 52px !important;
letter-spacing:.4px !important;
height:auto !important;
border-radius:0 !important;
}
form.mv-track-form input.mv-track-input::placeholder,
form.mv-track-form #application_number::placeholder{
color:#9aa6b3 !important; font-weight:500 !important; opacity:1 !important;
}
.mv-track-btn{
display:inline-flex; align-items:center; gap:8px;
background:linear-gradient(135deg,#f37d26 0%,#e96915 100%) !important;
color:#fff !important;
border:none !important; cursor:pointer;
font-family:'Inter',sans-serif !important;
font-size:1rem !important; font-weight:700 !important;
padding:14px 28px !important;
border-radius:50px !important;
box-shadow:0 8px 18px rgba(243,125,38,.40) !important;
transition:all .25s ease !important;
white-space:nowrap;
}
.mv-track-btn:hover{
transform:translateY(-1px);
background:linear-gradient(135deg,#e96915 0%,#d65a0c 100%) !important;
box-shadow:0 12px 26px rgba(243,125,38,.50) !important;
}
.mv-track-trust{
display:flex; gap:24px; justify-content:center; flex-wrap:wrap;
margin-top:22px; margin-bottom:0;
color:rgba(255,255,255,.92) !important;
font-family:'Inter',sans-serif; font-size:.92rem; font-weight:600;
}
.mv-track-trust span{color:rgba(255,255,255,.92) !important;}
.mv-track-trust span{display:inline-flex;align-items:center;gap:7px;}
/* === Result card === */
.mv-track-result{padding:40px 16px 0;}
.mv-track-result-card{
max-width:780px; margin:0 auto;
background:#fff;
border-radius:20px;
padding:30px 32px;
box-shadow:0 18px 50px rgba(0,160,168,.12), 0 4px 12px rgba(0,0,0,.05);
border:1px solid var(--border);
border-top:5px solid #00a0a8;
}
.mv-track-result-card.is-missing{border-top-color:#f37d26;}
.mv-track-result-head{
display:flex; align-items:flex-start; gap:18px;
margin-bottom:22px;
}
.mv-track-result-badge{
flex-shrink:0;
width:56px;height:56px; border-radius:50%;
background:linear-gradient(135deg,#10b981 0%,#059669 100%);
color:#fff; display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 18px rgba(16,185,129,.35);
}
.mv-track-result-badge.missing{
background:linear-gradient(135deg,#f37d26 0%,#e96915 100%);
box-shadow:0 8px 18px rgba(243,125,38,.35);
}
.mv-track-result-head h2{
font-family:'Inter',sans-serif;
font-size:1.45rem; font-weight:800;
color:#1a2332; margin:0 0 4px;
}
.mv-track-result-head p{
font-size:1.02rem; color:#516374; margin:0; line-height:1.5;
}
.mv-track-result-head p strong{color:#00a0a8;}
.mv-track-result-grid{
background:#f8fcfd;
border-radius:14px; padding:8px 18px;
border:1px solid rgba(0,160,168,.10);
}
.mv-track-result-grid .row-cell{
display:flex; justify-content:space-between; align-items:center;
padding:14px 0;
border-bottom:1px dashed rgba(0,160,168,.15);
}
.mv-track-result-grid .row-cell:last-child{border-bottom:none;}
.row-label{
font-family:'Inter',sans-serif; font-weight:600;
color:#516374; font-size:.95rem;
}
.row-value{
font-family:'Inter',sans-serif; font-weight:700;
color:#1a2332; font-size:1.02rem;
}
.status-pill{
display:inline-block;
background:linear-gradient(135deg,#00a0a8 0%,#007a80 100%);
color:#fff !important; padding:5px 14px;
border-radius:50px; font-size:.85rem !important; font-weight:700;
letter-spacing:.4px; text-transform:uppercase;
box-shadow:0 4px 10px rgba(0,160,168,.30);
}
.mv-track-result-help{margin-top:18px; text-align:center;}
.mv-help-btn{
display:inline-block;
background:#fff; color:#00a0a8 !important;
border:1.5px solid rgba(0,160,168,.30);
padding:10px 24px; border-radius:50px;
font-family:'Inter',sans-serif; font-weight:700;
text-decoration:none !important;
transition:all .25s ease;
}
.mv-help-btn:hover{background:#00a0a8; color:#fff !important; border-color:#00a0a8;}
/* === Info / How it works === */
.mv-track-info{padding:50px 16px 60px; background:linear-gradient(180deg,#f8fcfd 0%,#fff 100%);}
.mv-track-info-grid{margin-top:24px !important;}
.mv-track-info-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
max-width:1000px; margin:0 auto 50px;
}
.mv-info-card{
background:#fff; border:1px solid var(--border);
border-radius:18px; padding:28px 24px 24px;
position:relative;
box-shadow:0 10px 28px rgba(0,160,168,.08);
transition:all .3s ease;
}
.mv-info-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 38px rgba(0,160,168,.16);
border-color:transparent;
}
.mv-info-num{
position:absolute; top:-16px; left:24px;
width:42px;height:42px; border-radius:50%;
background:linear-gradient(135deg,#f37d26 0%,#e96915 100%);
color:#fff;
display:inline-flex; align-items:center; justify-content:center;
font-family:'Inter',sans-serif; font-weight:800; font-size:1.2rem;
box-shadow:0 8px 18px rgba(243,125,38,.34);
}
.mv-info-card h3{
font-family:'Inter',sans-serif !important;
font-size:1.15rem !important; font-weight:700 !important;
color:#1a2332 !important;
margin:14px 0 8px !important; padding:0 !important;
border:none !important; text-transform:none !important;
}
.mv-info-card p{
font-size:.98rem; color:#516374; line-height:1.6; margin:0;
}
/* article body */
.mv-track-article{
max-width:880px; margin:0 auto;
background:#fff; border-radius:20px;
padding:40px 44px;
border:1px solid var(--border);
box-shadow:0 12px 32px rgba(0,160,168,.08);
}
.mv-track-article h2{
font-family:'Inter',sans-serif !important;
font-size:1.7rem !important; font-weight:800 !important;
color:#00a0a8 !important;
margin:0 0 16px !important; padding:0 0 14px !important;
border-bottom:3px solid transparent !important;
border-image:linear-gradient(90deg,#00a0a8 0%,#f37d26 100%) 1 !important;
text-transform:none !important; letter-spacing:-.5px !important;
}
.mv-track-article h3{
font-family:'Inter',sans-serif !important;
font-size:1.25rem !important; font-weight:700 !important;
color:#1a2332 !important;
margin:30px 0 10px !important; padding:0 0 0 14px !important;
border-left:4px solid #f37d26 !important;
text-transform:none !important; letter-spacing:-.3px !important;
}
.mv-track-article p{
font-family:'Source Sans Pro',sans-serif !important;
font-size:1.35rem !important; line-height:1.72 !important;
color:#3a4756 !important; margin:0 0 14px !important;
}
.mv-track-article a{
color:#00a0a8 !important; font-weight:600 !important;
text-decoration:none !important;
border-bottom:1.5px solid rgba(0,160,168,.30) !important;
transition:all .25s ease !important;
}
.mv-track-article a:hover{color:#f37d26 !important; border-bottom-color:#f37d26 !important;}
.mv-note{
background:linear-gradient(135deg,rgba(243,125,38,.06) 0%,rgba(0,160,168,.06) 100%) !important;
padding:14px 18px !important; border-radius:12px !important;
border-left:4px solid #f37d26 !important;
margin:24px 0 !important;
}
.mv-note strong{color:#1a2332 !important;}
.mv-cta-strip{
display:flex; flex-wrap:wrap; gap:12px;
margin-top:30px; padding-top:24px;
border-top:1px dashed rgba(0,160,168,.20);
justify-content:center;
}
.mv-cta-btn{
display:inline-block;
font-family:'Inter',sans-serif; font-weight:700; font-size:.98rem;
padding:12px 24px; border-radius:50px;
text-decoration:none !important;
transition:all .25s ease;
border:none !important;
}
.mv-cta-btn.mv-cta-orange{
background:linear-gradient(135deg,#f37d26 0%,#e96915 100%) !important;
color:#fff !important;
box-shadow:0 8px 20px rgba(243,125,38,.34);
}
.mv-cta-btn.mv-cta-teal{
background:linear-gradient(135deg,#00a0a8 0%,#007a80 100%) !important;
color:#fff !important;
box-shadow:0 8px 20px rgba(0,160,168,.34);
}
.mv-cta-btn.mv-cta-ghost{
background:#fff !important; color:#00a0a8 !important;
border:1.5px solid rgba(0,160,168,.30) !important;
}
.mv-cta-btn:hover{transform:translateY(-2px);}
/* Hide the old .track-banner styles if anything leaks */
.mv-track-hero ~ section .track-banner,
.mv-track-hero .track-banner{display:none !important;}
@media (max-width:768px){
.mv-track-hero{padding:48px 16px 60px !important;}
.mv-track-form{flex-direction:column; border-radius:18px; padding:10px;}
.mv-track-btn{width:100%; justify-content:center;}
.mv-track-trust{gap:14px; font-size:.85rem;}
.mv-track-info-grid{grid-template-columns:1fr; gap:30px;}
.mv-info-num{top:-14px;}
.mv-track-article{padding:28px 22px;}
.mv-track-article h2{font-size:1.35rem !important;}
.mv-track-result-card{padding:24px 20px;}
.mv-track-result-head{flex-direction:column; gap:12px;}
.mv-track-result-grid .row-cell{flex-direction:column; align-items:flex-start; gap:4px;}
}
/* === Static country-blog post pages (Saudi / UAE / Oman / Turkey) — modern magazine layout === */
div.section:has(.section-row > figure.pull-right){
background:linear-gradient(180deg,#f8fcfd 0%,#fff 240px,#fff 100%) !important;
padding:0 0 70px !important;
}
div.section:has(.section-row > figure.pull-right) > .container{
max-width:1080px !important;
}
div.section:has(.section-row > figure.pull-right) > .container > .row.pt80{
padding-top:40px !important;
}
div.section:has(.section-row > figure.pull-right) .col-md-10.col-md-offset-1{
width:100% !important; margin-left:0 !important;
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:22px !important;
box-shadow:0 14px 40px rgba(0,160,168,.10), 0 4px 12px rgba(0,0,0,.04) !important;
padding:42px 48px 48px !important;
}
div.section:has(.section-row > figure.pull-right) .section-row{ padding:0 !important; }
/* Hero H1 */
div.section:has(.section-row > figure.pull-right) .section-row > h1{
font-family:'Inter',sans-serif !important;
font-size:2.1rem !important; font-weight:800 !important;
color:var(--teal-dark) !important;
line-height:1.18 !important; letter-spacing:-.7px !important;
margin:0 0 18px !important; padding:0 0 16px !important;
border-bottom:3px solid transparent !important;
border-image:linear-gradient(90deg,#00a0a8 0%,#f37d26 100%) 1 !important;
text-transform:none !important;
}
/* Lead paragraph */
div.section:has(.section-row > figure.pull-right) .section-row > p{
font-family:'Source Sans Pro',sans-serif !important;
font-size:1.18rem !important; line-height:1.7 !important;
color:#384554 !important; margin:0 0 24px !important;
}
div.section:has(.section-row > figure.pull-right) .section-row > p strong,
div.section:has(.section-row > figure.pull-right) .section-row > p b{
color:var(--teal-dark) !important; font-weight:700 !important;
}
div.section:has(.section-row > figure.pull-right) .section-row > p a,
div.section:has(.section-row > figure.pull-right) .panel-body a{
color:var(--teal) !important;
font-weight:600 !important;
text-decoration:none !important;
border-bottom:1.5px solid rgba(0,160,168,.30) !important;
transition:var(--transition) !important;
}
div.section:has(.section-row > figure.pull-right) .section-row > p a:hover,
div.section:has(.section-row > figure.pull-right) .panel-body a:hover{
color:var(--orange) !important;
border-bottom-color:var(--orange) !important;
}
/* Hero figure - now a full-width feature image with rounded corners */
div.section:has(.section-row > figure.pull-right) figure.pull-right{
float:none !important;
width:100% !important; margin:0 0 32px !important;
border-radius:18px !important; overflow:hidden !important;
position:relative !important;
box-shadow:0 12px 36px rgba(0,160,168,.18) !important;
}
div.section:has(.section-row > figure.pull-right) figure.pull-right img{
width:100% !important; height:340px !important;
object-fit:cover !important; display:block !important;
}
div.section:has(.section-row > figure.pull-right) figure.pull-right figcaption{
position:absolute !important;
left:0; right:0; bottom:0;
padding:18px 24px !important;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 100%) !important;
}
div.section:has(.section-row > figure.pull-right) figure.pull-right figcaption h2{
font-family:'Inter',sans-serif !important;
color:#fff !important; font-size:1.15rem !important;
font-weight:700 !important; margin:0 !important;
text-shadow:0 1px 2px rgba(0,0,0,.4);
text-transform:none !important; letter-spacing:.2px !important;
}
/* Panel body section */
div.section:has(.section-row > figure.pull-right) .panel-body{
padding:0 !important; background:none !important;
border:none !important; box-shadow:none !important;
}
div.section:has(.section-row > figure.pull-right) .panel-body h3{
font-family:'Inter',sans-serif !important;
font-size:1.45rem !important; font-weight:700 !important;
color:var(--teal-dark) !important;
margin:36px 0 14px !important; padding:0 0 0 16px !important;
border-left:4px solid var(--orange) !important;
line-height:1.3 !important; letter-spacing:-.3px !important;
text-transform:none !important;
}
div.section:has(.section-row > figure.pull-right) .panel-body h4{
font-family:'Inter',sans-serif !important;
font-size:1.18rem !important; font-weight:700 !important;
color:#1a2332 !important;
margin:24px 0 8px !important;
text-transform:none !important; letter-spacing:-.2px !important;
}
div.section:has(.section-row > figure.pull-right) .panel-body p{
font-family:'Source Sans Pro',sans-serif !important;
font-size:1.08rem !important; line-height:1.75 !important;
color:#3a4756 !important; margin:0 0 14px !important;
}
div.section:has(.section-row > figure.pull-right) .panel-body p strong,
div.section:has(.section-row > figure.pull-right) .panel-body p b{
color:var(--teal-dark) !important; font-weight:700 !important;
}
/* CTA button */
div.section:has(.section-row > figure.pull-right) .btn-pink,
div.section:has(.section-row > figure.pull-right) a.btn{
display:inline-flex !important; align-items:center !important;
gap:8px !important;
background:linear-gradient(135deg,#f37d26 0%,#e96915 100%) !important;
color:#fff !important; border:none !important;
font-family:'Inter',sans-serif !important;
font-size:1.05rem !important; font-weight:700 !important;
letter-spacing:.3px !important;
padding:14px 30px !important;
border-radius:50px !important;
text-decoration:none !important;
box-shadow:0 8px 22px rgba(243,125,38,.34) !important;
transition:var(--transition) !important;
margin:14px 0 22px !important;
}
div.section:has(.section-row > figure.pull-right) .btn-pink::after,
div.section:has(.section-row > figure.pull-right) a.btn::after{
content:"→"; font-weight:800; font-size:1.15rem;
}
div.section:has(.section-row > figure.pull-right) .btn-pink:hover,
div.section:has(.section-row > figure.pull-right) a.btn:hover{
transform:translateY(-2px) !important;
box-shadow:0 14px 30px rgba(243,125,38,.45) !important;
background:linear-gradient(135deg,#00a0a8 0%,#007a80 100%) !important;
border-bottom:none !important;
}
div.section:has(.section-row > figure.pull-right) .col-sm-12.text-center{
text-align:center !important; margin:18px 0 24px !important;
padding:18px !important;
background:linear-gradient(135deg,rgba(243,125,38,.06) 0%,rgba(0,160,168,.06) 100%);
border-radius:14px;
border:1px dashed rgba(243,125,38,.30);
}
/* Mobile */
@media (max-width:768px){
div.section:has(.section-row > figure.pull-right) .col-md-10.col-md-offset-1{
padding:26px 20px 30px !important;
border-radius:14px !important;
}
div.section:has(.section-row > figure.pull-right) .section-row > h1{
font-size:1.5rem !important;
}
div.section:has(.section-row > figure.pull-right) figure.pull-right img{
height:200px !important;
}
div.section:has(.section-row > figure.pull-right) .panel-body h3{
font-size:1.2rem !important; margin-top:26px !important;
}
div.section:has(.section-row > figure.pull-right) .section-row > p{
font-size:1.05rem !important;
}
}
/* Mobile tweaks */
@media (max-width:768px){
.contact-banner,
.track-banner,
.about-banner{
padding:32px 14px 38px !important;
}
.contact-banner h1,
.track-banner h1,
.about-banner h1{ font-size:1.7rem !important; }
body section.section#pricing .col-md-10.col-md-offset-1{
padding:22px 18px !important; border-radius:18px !important;
}
body section.section#pricing .panel-default .panel-heading h1,
body section.section#pricing .panel-body h1{ font-size:1.55rem !important; }
section.section:has(.panelfaq) h1.articlehfour{ font-size:1.6rem !important; }
#trackForm{ flex-direction:column; }
#trackForm input.form-control,
#trackForm input[type="submit"]{ width:100% !important; }
}
/* ============================================================
TRAVEL / PERSONAL FORM — tighten spacing + mobile polish
Fixes the large empty gaps (nested .panel-body padding +
oversized labels) reported on small screens.
============================================================ */
/* The two columns are each wrapped in a redundant .panel-body whose
20px padding stacks into a big gap on mobile — remove that padding. */
#travelForm .col-md-5 > .panel-body,
[id^="personalVisaForm"] .col-md-5 > .panel-body{
padding:0 !important;
}
@media (max-width:767px){
/* Labels: large 1.35rem uppercase is oversized on phones */
#travelForm label, #travelForm .LatoBold,
[id^="personalVisaForm"] label, [id^="personalVisaForm"] .LatoBold{
font-size:1rem !important;
margin-bottom:6px !important;
gap:7px !important;
}
#travelForm label::before,
[id^="personalVisaForm"] label::before{ padding:2px 4px !important; }
/* Tighter spacing between fields */
#travelForm .form-group,
[id^="personalVisaForm"] .form-group{ margin-bottom:14px !important; }
/* Inputs: comfortable height, 16px font (prevents iOS zoom) */
#travelForm .form-control,
#travelForm input.form-control,
#travelForm select.form-control,
[id^="personalVisaForm"] .form-control,
[id^="personalVisaForm"] input.form-control,
[id^="personalVisaForm"] select.form-control{
height:48px !important;
font-size:16px !important;
padding:0 14px !important;
}
#travelForm textarea.form-control,
[id^="personalVisaForm"] textarea.form-control{
min-height:78px !important;
font-size:16px !important;
}
/* Collapse the empty spacer columns and trim card/section padding */
#travelForm .row > .col-md-1:empty,
[id^="personalVisaForm"] .row > .col-md-1:empty{ display:none !important; }
section#pricing .panel-default:has(#travelForm) > .panel-body,
section#pricing .panel-default:has([id^="personalVisaForm"]) > .panel-body{
padding:12px 16px 18px !important;
}
section#pricing .panel-default:has(#travelForm),
section#pricing .panel-default:has([id^="personalVisaForm"]){
margin-top:12px !important;
border-radius:16px !important;
}
.travel-banner ~ section#pricing .row.pt80,
section#pricing .row.pt80{ padding-top:0 !important; }
/* Page banner heading scale */
.travel-banner h1{ font-size:20px !important; }
/* --- Personal-information form parity (uses col-sm-4/8 groups) --- */
/* Stack the 3-up field groups full width and use the space (smaller
side gutters), matching the tightened travel form. */
[id^="personalVisaForm"] .col-sm-4,
[id^="personalVisaForm"] .col-sm-8{
width:100% !important;
float:none !important;
padding-left:6px !important;
padding-right:6px !important;
}
[id^="personalVisaForm"] > .col-sm-12,
[id^="personalVisaForm"] .row > .col-sm-12{
padding-left:0 !important;
padding-right:0 !important;
}
/* Upload sub-heading a touch smaller on phones */
[id^="personalVisaForm"] h3{ font-size:1.05rem !important; margin:18px 0 12px !important; }
.personal-banner h1{ font-size:20px !important; }
}
/* ============================================================
PAYMENT PAGE — remove the large gap below the step strip
and tighten the layout on mobile.
============================================================ */
/* Collapse the top padding that sat between the step strip and the
"Visa Fee Payment Details" heading. (Base top padding now 8px at source.) */
.body-payment section#pricing > .container > .row.pt80,
.body-payment section#pricing .row.pt80{ padding-top:0 !important; margin-top:0 !important; }
.body-payment section#pricing > .container > .row.pt80 > .col-sm-12 > .row:first-child{ margin-top:0 !important; }
@media (max-width:768px){
.mv-step-strip{ padding:14px 10px 8px !important; }
.body-payment section#pricing{ padding-top:4px !important; padding-bottom:20px !important; }
.body-payment section#pricing h1{ font-size:1.3rem !important; margin:4px 0 14px !important; }
.body-payment section#pricing h1::before{ width:34px; height:34px; line-height:34px; font-size:1.1rem; margin-right:10px; }
/* Applicant table: compact + keep horizontal scroll inside its wrapper */
.body-payment section#pricing table.table{ font-size:13px !important; }
.body-payment section#pricing table.table thead th,
.body-payment section#pricing table.table tbody td{ padding:10px 8px !important; }
.body-payment section#pricing .table-responsive{ border:0 !important; }
}
/* ============================================================
BLOG DETAIL — trim the large white space around breadcrumbs
(.section has a global 56px top/bottom padding; scope it down)
============================================================ */
.blog-detail-section{ padding:14px 0 28px !important; }
.blog-detail-section .mv-breadcrumb{ padding:2px 0 6px !important; margin:0 !important; }
.blog-detail-section > .container > .row:first-child{ margin-bottom:0 !important; }
@media (max-width:768px){
.blog-detail-section{ padding:8px 0 20px !important; }
}