/* --------------------------
   Global Styles
--------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #020617;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #ffffff;
}

/* --------------------------
   HERO SECTION
--------------------------- */
/* =========================
   HERO – IMAGE ONLY
   NO BLUR • NO CROP
   ========================= */

.hero{
  position: relative;
  width: 100%;
  min-height: 100svh;        /* responsive height for all devices */
  background-color: #e5e5e5; /* gap fill color */
  overflow: hidden;
}

/* background image */
.hero-bg{
  position: absolute;
  inset: 0;
  transition: background-image 0.4s ease-in-out;
  /* background-image: url('../images/1.png'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;  /* ✅ FULL IMAGE VISIBLE (TEXT SAFE) */
}

/* ---------- MOBILE ---------- */
@media (max-width: 480px){
  .hero{ min-height: 30svh; }   /* adjust if you want */
}

/* ✅ Mobile (0–768px) */
@media (max-width: 768px){
  .hero{ min-height: 40svh; }   /* adjust: 50–70svh */
}

/* ✅ Tablet (769–1024px) */
@media (min-width: 769px) and (max-width: 1024px){
  .hero{ min-height: 60svh; }
}

/* ✅ Small laptop (1025–1280px) */
@media (min-width: 1025px) and (max-width: 1280px){
  .hero{ min-height: 80svh; }
}

/* ✅ Desktop (1281px+) */
@media (min-width: 1281px){
  .hero{ min-height: 100svh; }
}

/* Content wrapper */
.hero-inner {
  position: relative;
  z-index: 5;
  max-width: 900px;

  /* content pushed left */
  margin-left: 100px;
  text-align: left;
}

/* --------------------------
   LOGO
--------------------------- */


/* --------------------------
   TITLE (big + one line on desktop)
--------------------------- */
.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;

  color: #ffffff;  /* Full bright white */
  
  /* Strong glow + outline for readability */
  text-shadow:
    0 0 10px rgba(0,0,0,0.7),
    0 0 20px rgba(0,0,0,0.6),
    2px 2px 4px rgba(0,0,0,0.7);

  margin-bottom: 20px;
  white-space: nowrap;
  display: inline-block;
}


/* --------------------------
   SUBTITLE (big + one line on desktop)
--------------------------- */
.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;

  color: #f8fbff; /* brighter white */
  
  text-shadow:
    0 0 8px rgba(0,0,0,0.7),
    0 0 12px rgba(0,0,0,0.5);

  margin-bottom: 30px;
  white-space: nowrap;
  display: inline-block;
}


/* --------------------------
   BUTTONS
--------------------------- */
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 35px;
}

.btn {
  min-width: 260px;          /* ✅ SAME WIDTH FOR BOTH */
  text-align: center;        /* center text */
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: 0.25s;
}
/* Primary button */
.btn-primary {
  background: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.40);
}

.btn-primary:hover {
  background: #1e40af;
}

/* Secondary (Ask VisaPath AI) button */
.btn-secondary {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.65);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.30);
  margin-top: 10px; /* extra downward spacing */
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.30);
}

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

  .hero-inner {
    margin-left: 20px;  /* adjust left spacing for small screens */
    margin-right: 20px;
  }

  .hero-title {
    white-space: normal;   /* allow wrap */
    font-size: 2.4rem;
    line-height: 1.2;
  }

  .hero-subtitle {
    white-space: normal;   /* allow wrap */
    font-size: 1.3rem;
    line-height: 1.4;
  }
}

/* ---------- SMALL SCREEN BUTTON SIZE ---------- */
@media (min-width: 480px) and (max-width: 768px) {

  .btn {
    min-width: 190px;     /* 🔽 smaller box */
    padding: 10px 15px;   /* 🔽 less padding */
    font-size: 0.9rem;   /* 🔽 slightly smaller text */
  }

}























/* ==========================
   OUR SERVICES SECTION
========================== */

.services {
  position: relative;
  padding: 80px 20px 100px;
  background: #1E3A8A; /* same base as body */
  color: #f9fafb;
  text-align: center;
}

.services-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.services-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.services-subtitle {
  font-size: 1rem;
  color: #cbd5f5;
  margin-bottom: 40px;
}

/* Grid for service cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Individual card */
.service-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 20px;
  border: 1px solid #1f2937;
  padding: 20px 18px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  border-color: #2563eb;
}

/* Icon + title */
.service-icon {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.service-name {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.service-desc {
  font-size: 0.9rem;
  color: #e5e7eb;
}

/* Countries list */
.service-countries-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin: 10px 0 6px;
}

.service-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  font-size: 0.78rem;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(15, 118, 255, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.6);
  color: #e0f2fe;
}

/* CTA */
.service-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  color: #f9fafb;
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}

.service-cta:hover {
  background: #1e40af;
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .services-title {
    font-size: 2rem;
  }
}





































/* ==========================
   HOW IT WORKS SECTION (WHITE THEME)
========================== */

.how {
  position: relative;
  padding: 80px 20px 100px;
  background: #ffffff;   /* WHITE BACKGROUND */
  color: #111827;   
  text-align: center;     /* DARK TEXT FOR READABILITY */
}

.how-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.how-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.how-subtitle {
  font-size: 1rem;
  color: #475569;  /* grey */
  margin-bottom: 40px;
}

/* Steps grid */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Individual step card */
.how-step {
  background: #f9fafb;  /* light grey card */
  border: 1px solid #d1d5db;
  border-radius: 20px;
  padding: 18px 16px 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);

  display: flex;
  flex-direction: column;
  gap: 10px;

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

.how-step:hover {
  transform: translateY(-3px);
  border-color: #2563eb;    /* blue hover border */
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* Icons and text */
.how-icon {
  font-size: 1.8rem;
}

.how-step-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

.how-step-desc {
  font-size: 0.92rem;
  color: #475569;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .how-grid {
    grid-template-columns: 1fr;
  }

  .how-title {
    font-size: 2rem;
  }
}


















/* ==========================
   WHY VISA PATH – BLUE PREMIUM
========================== */

.why {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 40%, #bfdbfe 100%);
  color: #0f172a;
  padding: 80px 20px 100px;
  text-align: center;
}

.why-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.why-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1e3a8a;
}

.why-subtitle {
  font-size: 1rem;
  color: #475569;
  margin-bottom: 45px;
}

/* Grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Cards */
.why-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  padding: 26px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
  border-color: #3b82f6;
}

/* Icons + text */
.why-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.why-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.why-desc {
  font-size: 0.92rem;
  color: #334155;
}

/* Trust badges */
.trust-badges {
  margin-top: 40px;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.badge-trust {
  background: #e0f2fe;
  color: #1e3a8a;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #93c5fd;
}

/* Responsive */
@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-title {
    font-size: 2rem;
  }
}


















/* ==========================
   SUPPORTED COUNTRIES SECTION
========================== */

/* ==========================
   SUPPORTED COUNTRIES SECTION – FINAL DARK PREMIUM
========================== */

.countries {
  background: #1D4ED8 !important;   /* Dark navy for max visibility */
  padding: 80px 20px 100px;
  text-align: center;
  color: #f8fafc;
}

.countries-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.countries-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #e2e8f0;     /* Soft light */
  margin-bottom: 10px;
}

.countries-subtitle {
  font-size: 1rem;
  color: #cbd5e1;
  margin-bottom: 40px;
}

/* Tabs */
.country-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 35px;
}

.tab-btn {
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #475569;
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  transition: 0.25s;
}

.tab-btn:hover {
  border-color: #94a3b8;
}

.tab-btn.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

/* Panels */
.panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.panel.show {
  display: block;
  opacity: 1;
}

/* Flag grid */
.flag-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.flag {
  font-size: 3rem;
  padding: 12px;
  transition: transform 0.2s ease;
}

.flag:hover {
  transform: scale(1.15);
}

/* Responsive */
@media (max-width: 768px) {
  .flag {
    font-size: 2.2rem;
  }
}



































/* ==========================
   CHATBOT – FLOAT BUTTON
========================== */

#chatbot-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #2563eb;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  cursor: pointer;
  z-index: 2000;
  transition: 0.25s;
}

#chatbot-button:hover {
  transform: scale(1.05);
  background: #1d4ed8;
}

/* ==========================
   CHATBOT PANEL
========================== */

#chatbot-panel {
  position: fixed;
  top: 0;
  right: -100vw; /* FIX: always hide fully on any screen */
  width: 420px;  /* desktop width unchanged */
  height: 100vh;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: -4px 0 20px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  z-index: 2500;
  transition: right 0.35s ease;
}

#chatbot-panel.open {
  right: 0;
}




/* HEADER */
.chat-header {
  background: #1e3a8a;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
}

#chatbot-close {
  background: transparent;
  border: none;
  color: #f1f5f9;
  font-size: 1.3rem;
  cursor: pointer;
}

/* BODY */
.chat-body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
}

.ai-msg {
  background: #1e293b;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  color: #f8fafc;
  font-size: 0.95rem;
  max-width: 85%;
}

/* INPUT */
.chat-input {
  display: flex;
  border-top: 1px solid #1e293b;
}

#chatbot-input {
  flex: 1;
  padding: 14px;
  border: none;
  outline: none;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.95rem;
}

#chatbot-send {
  background: #2563eb;
  padding: 14px 22px;
  border: none;
  color: white;
  cursor: pointer;
  font-weight: 600;
  transition: 0.25s;
}

#chatbot-send:hover {
  background: #1d4ed8;
}

/* Mobile */
@media (max-width: 600px) {
  #chatbot-panel {
    width: 100%;
  }
}





























/* ==========================
   FOOTER SECTION – BLUE GRADIENT
========================== */

.footer {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #3b82f6 100%);
  color: #f1f5f9;
  padding: 60px 25px 30px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #ffffff;
}

.footer-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #e2e8f0;
  margin-bottom: 10px;
}

.footer-link {
  font-size: 0.92rem;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  transition: 0.25s;
}

.footer-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Bottom bar */
.footer-bottom {
  text-align: center;
  margin-top: 45px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.25);
  font-size: 0.85rem;
  color: #e0e7ff;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}