:root{
    --brand:#0d6efd; /* primary */
    --brand-2:#0bb197; /* accent */
    --dark:#132238;
    --light:#f8fbff;
  }
  body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
  .topbar{background:var(--dark); color:#b8c6dc; font-size:.9rem}
  .topbar a{color:#e7eefc; text-decoration:none}

  .navbar-brand img{height:48px;}
  .nav-link{font-weight:600}
  .btn-brand{background:var(--brand); color:#fff}
  .btn-brand:hover{background:#0b5ed7; color:#fff}
  .btn-accent{background:var(--brand-2); color:#fff}
  .btn-accent:hover{background:#099f88; color:#fff}

  /* Hero / Carousel overlay */
  .carousel-item{position:relative}
  .carousel-item img{height:72vh; width:100%; object-fit:cover}
  @media (max-width: 576px){ .carousel-item img{height:60vh} }
  .slide-mask{position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,34,56,.15), rgba(19,34,56,.65)); z-index:1}
  .hero-content{position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff; z-index:2}
  .hero-content h1,.hero-content h2{font-weight:800; text-shadow:0 6px 24px rgba(0,0,0,.35)}
  .badge-soft{background:rgba(13,110,253,.12); color:#fff; border:1px solid rgba(255,255,255,.25)}

  /* Section helpers */
  section{padding:20px 0}
  .section-title{font-weight:800}
  .section-sub{color:#6b7b92}
  .bg-soft{background:var(--light)}

/* ---------------------------------------
   Services section : premium styling/FX
----------------------------------------*/
.services-section{
  position:relative;
  /* soft gradient bg that works with light images */
  background: linear-gradient(180deg,#f9fbff 0%, #f3f7ff 60%, #eef4ff 100%);
  overflow:hidden;
}

/* subtle bokeh dots in bg */
.services-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(18px 18px at 10% 20%, rgba(13,110,253,.06) 0, transparent 60%),
    radial-gradient(14px 14px at 85% 35%, rgba(32,201,151,.07) 0, transparent 60%),
    radial-gradient(16px 16px at 70% 80%, rgba(255,193,7,.07) 0, transparent 60%);
  pointer-events:none;
}

/* Staggered reveal on load */
#services .col-sm-6{
  opacity:0; transform:translateY(14px);
  animation: svcRise .6s ease forwards;
}
#services .col-sm-6:nth-child(1){ animation-delay:.05s }
#services .col-sm-6:nth-child(2){ animation-delay:.12s }
#services .col-sm-6:nth-child(3){ animation-delay:.19s }
#services .col-sm-6:nth-child(4){ animation-delay:.26s }
#services .col-sm-6:nth-child(5){ animation-delay:.33s }
#services .col-sm-6:nth-child(6){ animation-delay:.40s }
#services .col-sm-6:nth-child(7){ animation-delay:.47s }
#services .col-sm-6:nth-child(8){ animation-delay:.54s }
#services .col-sm-6:nth-child(9){ animation-delay:.61s }
@keyframes svcRise{ to{ opacity:1; transform:translateY(0)} }

/* Card lift (kept yours, slightly enhanced) */
.service-card{
  position:relative;
  border-radius:1rem;
  transition:transform .25s, box-shadow .25s;
  will-change: transform;
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow:0 1.25rem 2.25rem rgba(0,0,0,.12);
}

/* Gradient border glow on hover */
.service-card::before{
  content:"";
  position:absolute; inset:0; border-radius:1rem;
  padding:1px; background:linear-gradient(135deg, rgba(13,110,253,.35), rgba(32,201,151,.35));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition:opacity .25s ease;
}
.service-card:hover::before{ opacity:1 }

/* Image wrapper: shine sweep */
.img-wrap{ position:relative; overflow:hidden; border-top-left-radius:1rem; border-top-right-radius:1rem; }
.img-wrap::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 45%, transparent 55%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.service-card:hover .img-wrap::after{ transform: translateX(120%) }

/* Image hover (no cropping) */
.service-img{
  width:100%; height:230px; object-fit:contain; background:#f8f9fa;
  transition:transform .35s ease, filter .35s ease;
}
.service-card:hover .service-img{ transform:scale(1.06); filter:saturate(1.05) contrast(1.02) }

/* Icon badge: pulse + spin on hover */
.service-icon-badge{
  position:absolute; top:.6rem; left:.6rem;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand,#0d6efd), var(--brand-2,#6610f2));
  color:#fff; box-shadow:0 .6rem 1.4rem rgba(0,0,0,.14); z-index:2;
}
.service-icon-badge i{ font-size:1.25rem; transition:transform .6s ease }
.service-card:hover .service-icon-badge i{ transform:rotate(360deg) }
.service-icon-badge::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(13,110,253,.28);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(13,110,253,.28) }
  70%{ box-shadow:0 0 0 12px rgba(13,110,253,0) }
  100%{ box-shadow:0 0 0 0 rgba(13,110,253,0) }
}


/* Keep the zoom neatly clipped */
.img-wrap{ overflow:hidden; }

  



  /* CTA ribbon */
  .ribbon{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff}

  /* Footer */
  footer{background:#0f1a2b; color:#c0d0ea}
  footer a{color:#ffffff; text-decoration:none}
  .footer-brand{font-weight:800; color:#fff}

  /* Utilities */
  .shadow-soft{box-shadow:0 1rem 2rem rgba(0,0,0,.08)}
  .rounded-2xl{border-radius:1.25rem}

  /* Floating actions */
/* Floating Button Base Styles */
.float-whatsapp,
.float-call,
.back-to-top {
  position: fixed;
  right: 25px;
  z-index: 999;
  transition: all 0.3s ease;
}

/* WhatsApp Floating Button */
.float-whatsapp {
  bottom: 95px;
  background-color: #25d366;
  border: none;
}

/* Call Floating Button */
.float-call {
  bottom: 160px;
  background-color: #007bff;
  border: none;
}

/* Hover Effects */
.float-whatsapp:hover,
.float-call:hover {
  transform: scale(1.1);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

/* Back to Top Button */
.back-to-top {
  bottom: 30px;
  display: none;
}

/* Show back to top when active */
.back-to-top.show {
  display: block;
}


  /* Tiny gallery logo strip */
  .logo-strip img{filter:grayscale(100%); opacity:.7; transition:all .2s}
  .logo-strip img:hover{filter:none; opacity:1}









  /* ---------- PASSPORT PROCESS SECTION ---------- */
/* --- Passport Process: UI Fixes --- */
.passport-process-section { background:#052943; position:relative; overflow:hidden; }
.passport-process-section .process-bg-img{
  position:absolute; inset:auto 0 50% 0; /* keeps it behind content */
  transform:translateY(50%); opacity:.25; pointer-events:none; z-index:0;
}

/* Card container */
.passport-process-section .process-step{
  position:relative; z-index:1;
  background:#fff; border-radius:1rem;
  padding:3.25rem 1.25rem 1.5rem;    /* extra top space for the number */
  box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  min-height: 300px;                  /* consistent height */
  display:flex; flex-direction:column; justify-content:flex-start;
}
.passport-process-section .process-step:hover{
  transform:translateY(-8px);
  box-shadow:0 1.25rem 2rem rgba(0,0,0,.12);
}

/* Step number badge */
.passport-process-section .process-number{
  position:absolute; top:0; left:50%;
  transform:translate(-50%, -50%);    /* sits outside/above card nicely */
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#dc3545; color:#fff; font-weight:800; font-size:.9rem;
  box-shadow:0 .5rem 1rem rgba(220,53,69,.25);
  transition:transform .35s ease, background .35s ease;
  z-index:2;
}
.passport-process-section .process-step:hover .process-number{
  background:linear-gradient(135deg,#ff5a5a,#d71f1f);
  transform:translate(-50%, -50%) rotate(360deg) scale(1.1);
}

/* Avatar/image */
.passport-process-section .process-icon-wrap{
  display:inline-block; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 4px #fff, 0 8px 16px rgba(0,0,0,.08);
}
.passport-process-section .process-img{
  display:block;                       /* fixes inline-baseline shift */
  width:90px; height:90px; object-fit:cover;
  margin:0 auto 12px;                  /* center strictly */
  transition:transform .35s ease, filter .35s ease;
}
.passport-process-section .process-step:hover .process-img{
  transform:scale(1.08) rotate(3deg);
  filter:saturate(1.1) contrast(1.03);
}

/* Titles & text */
.passport-process-section .process-title{
  margin:.25rem 0 .35rem; font-weight:800; letter-spacing:.25px; color: #052943;
}
.passport-process-section .process-text{
  color:#6b7b92; font-size:.9rem; line-height:1.55; margin:0 auto; max-width:260px;
}

/* Responsive polish */
@media (max-width: 575.98px){
  .passport-process-section .process-step{ min-height: 280px; padding:3rem 1rem 1.25rem; }
  .passport-process-section .process-img{ width:80px; height:80px; }
}









/* Contact section background with soft light overlay */
.contact-section{
  position: relative;
  background:
    linear-gradient( to bottom, rgba(255,255,255,35%), rgba(255,255,255,35%) ),
    url("./images/contact.png") center/cover no-repeat;
  /* If your image path differs, update it here or keep the inline bg removed and set via this class */
  padding: 72px 0;
}

/* Make sure content remains above the overlay (for safety if you later use ::before overlays) */
.contact-section .container{ position: relative; z-index: 1; }

/* Panel behind form for readability */
.contact-panel{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(13,110,253,.08);
  backdrop-filter: saturate(1.1) blur(2px);
}

/* Inputs tidy look */
.contact-panel .form-control,
.contact-panel .form-select{
  background:#fff; border-color:#e7ecf5;
}
.contact-panel .form-control:focus,
.contact-panel .form-select:focus{
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Soft reusable shadow */
.shadow-soft{ box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08); }

/* Optional: gentle float-in animation */
@keyframes riseIn { from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.contact-panel, .contact-section .ratio, .contact-section .rounded-3.bg-white{
  animation: riseIn .5s ease both;
}
.contact-panel{ animation-delay:.05s; }
.contact-section .ratio{ animation-delay:.12s; }
.contact-section .rounded-3.bg-white{ animation-delay:.18s; }











/* Experience section */
.experience-section{ background:linear-gradient(180deg,#fff, #f8fbff 60%, #f4f8ff); }

/* Collage */
.xp-collage{ min-height: 360px; }
.xp-img{ position:absolute; object-fit:cover; }
.xp-img.main{ inset:auto 0 0 0; width:70%; height:58%; }
.xp-img.side{ top:10px; right:0; width:55%; height:50%; }
.xp-img.circle{
  top:-10px; left:-10px; width:180px; height:180px; border-radius:50%;
  border:6px solid #fff;
}

/* Stats */
.xp-stat{ border-radius:1rem; transition:transform .25s, box-shadow .25s; }
.xp-stat:hover{ transform:translateY(-6px); box-shadow:0 1.25rem 2rem rgba(0,0,0,.08); }
.icon-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px; font-size:1.25rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.06);
}

/* Brand color helper (optional) */
.text-brand{ color:var(--brand, #0d6efd); }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .xp-img.main, .xp-img.side, .xp-img.circle{ position:relative; inset:auto; width:100%; height:auto; margin-bottom:12px; }
  .xp-collage{ min-height: auto; }
}









/* Visa Countries Section */
#visa-countries {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.section-title {
  font-weight: 700;
  color: #052943;
}

.country-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}
.country-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, 0.08);
}

/* Flag Style */
.country-flag-wrap {
  display: inline-block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease;
}
.country-card:hover .country-flag-wrap {
  transform: rotate(8deg) scale(1.05);
}

.country-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text enhancements */
#visa-countries .section-sub {
  max-width: 700px;
  margin: 0 auto;
  font-size: 0.95rem;
}

.badge.text-bg-primary {
  background-color: var(--brand, #0d6efd) !important;
}




.single-banner{ overflow:hidden; border-radius: 18px; }
.single-banner img{ max-height: 340px; object-fit: cover; }

.slide-mask{
  position:absolute;
  inset:0;
  background: rgba(12,46,74,.55);
}

.hero-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.breadcrumb-item + .breadcrumb-item::before{
  color: rgba(255,255,255,.7);
}

.location-btn {
  display: block;
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: #0d6efd; /* Blue theme */
  color: #fff;
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(13, 110, 253, 0.18);
}

.location-btn:hover {
  background: #084298;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(13, 110, 253, 0.35);
}