:root{
  --emerald:#0B3D35; --emerald-2:#124E44; --gold:#C9A45C;
  --ivory:#F8F6F0; --sand:#E9DFCC; --ink:#17201E; --muted:#66716D;
  --white:#fff; --line:rgba(23,32,30,.11); --shadow:0 18px 50px rgba(11,61,53,.10);
  --radius:18px; --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.7}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.section{padding:92px 0}
.section-sm{padding:58px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow:before{content:"";width:28px;height:1px;background:var(--gold)}
h1,h2,h3{line-height:1.14;letter-spacing:-.035em}
h1{font-size:clamp(2.5rem,5vw,4.7rem)}
h2{font-size:clamp(2rem,3.4vw,3rem)}
h3{font-size:1.25rem}
.lead{color:var(--muted);font-size:1.05rem;max-width:680px}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}
.section-head > div:last-child{max-width:560px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:999px;border:1px solid transparent;font-weight:800;font-size:.88rem;transition:.25s ease;cursor:pointer}
.btn-primary{background:var(--emerald);color:#fff}
.btn-primary:hover{background:var(--emerald-2);transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline:hover{background:#fff;color:var(--emerald)}
.btn-light{background:#fff;color:var(--emerald)}
.btn-gold{background:var(--gold);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--emerald)}
.btn-ghost:hover{border-color:var(--emerald)}
.topbar{background:var(--emerald);color:#dfeae6;font-size:.76rem}
.topbar .container{display:flex;justify-content:space-between;padding:8px 0;gap:20px}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.25s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 30px rgba(0,0,0,.05)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--emerald)}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--emerald);color:var(--gold);display:grid;place-items:center;font-size:1.1rem}
.logo small{display:block;color:var(--muted);font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.nav-links{display:flex;align-items:center;gap:26px;font-size:.82rem;font-weight:700}
.nav-links a{color:#3c4845;position:relative}
.nav-links a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--gold);transition:.2s}
.nav-links a:hover:after,.nav-links a.active:after{width:100%}
.nav-cta{display:flex;gap:10px;align-items:center}
.menu-btn{display:none;border:0;background:none;font-size:1.5rem;color:var(--emerald)}
.hero{min-height:680px;display:flex;align-items:center;background:var(--emerald)}
.hero-inner{padding:95px 0;color:#fff;max-width:790px}
.hero h1{margin:18px 0 20px}
.hero .lead{color:#e7efec;font-size:1.08rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:30px;color:#d9e4e0;font-size:.78rem;font-weight:700}
.hero-meta span{display:flex;align-items:center;gap:7px}
.quick-actions{margin-top:-46px;position:relative;z-index:2}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.quick-card{padding:25px;border-right:1px solid var(--line);transition:.2s}
.quick-card:last-child{border-right:0}
.quick-card:hover{background:var(--ivory)}
.quick-card .icon{font-size:1.4rem;color:var(--gold);margin-bottom:12px}
.quick-card strong{display:block;font-size:.95rem}
.quick-card span{display:block;color:var(--muted);font-size:.75rem;margin-top:3px}
.quick-card b{display:block;color:var(--emerald);font-size:.75rem;margin-top:12px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.image-card{border-radius:28px;overflow:hidden;position:relative;box-shadow:var(--shadow);background:var(--ivory)}
.image-card img{width:100%;height:520px;object-fit:cover}
.image-badge{position:absolute;left:22px;bottom:22px;background:#fff;padding:16px 18px;border-radius:15px;box-shadow:0 12px 30px rgba(0,0,0,.12);max-width:260px}
.image-badge strong{display:block;color:var(--emerald);font-size:.9rem}
.image-badge span{font-size:.72rem;color:var(--muted)}
.check-list{list-style:none;display:grid;gap:12px;margin:25px 0}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check-list li:before{content:"✓";color:var(--gold);font-weight:900}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff;transition:.25s;box-shadow:0 5px 20px rgba(0,0,0,.025)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-icon{width:46px;height:46px;border-radius:14px;background:var(--ivory);color:var(--emerald);display:grid;place-items:center;font-size:1.15rem;margin-bottom:20px}
.card p{color:var(--muted);font-size:.82rem;margin:10px 0 20px}
.card-link{color:var(--emerald);font-size:.78rem;font-weight:800}
.soft{background:var(--ivory)}
.dark{background:var(--emerald);color:#fff}
.dark .lead{color:#cbdcd7}
.dark .eyebrow{color:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin-top:38px}
.stat{padding:25px;text-align:center;background:rgba(255,255,255,.025)}
.stat strong{display:block;font-size:1.45rem;color:#fff}
.stat span{font-size:.72rem;color:#c8d8d3}
.leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.person{display:flex;gap:20px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.avatar{width:74px;height:74px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--emerald);font-weight:900;font-size:1.3rem;flex:none}
.person p{font-size:.75rem;color:var(--muted)}
.service-feature{background:var(--emerald);border-radius:28px;overflow:hidden;color:#fff;display:grid;grid-template-columns:1fr 1fr}
.service-feature img{width:100%;height:100%;min-height:460px;object-fit:cover}
.service-feature-content{padding:58px}
.service-feature .lead{color:#cbdcd7}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:steps}
.step{padding:25px;border-top:2px solid var(--gold);background:#fff;border-radius:0 0 16px 16px}
.step-num{color:var(--gold);font-weight:900;font-size:.75rem;letter-spacing:.1em}
.step p{font-size:.78rem;color:var(--muted);margin-top:8px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
.package-table{width:100%;border-collapse:collapse;min-width:650px}
.package-table th,.package-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.82rem}
.package-table th{background:var(--emerald);color:#fff}
.package-table th:nth-child(3){background:#174f45}
.package-table tr:last-child td{border-bottom:0}
.package-table td:nth-child(2),.package-table td:nth-child(3){font-weight:800;color:var(--emerald)}
.destination-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.destination{min-height:300px;border-radius:20px;overflow:hidden;position:relative;color:#fff;background:#333}
.destination img{width:100%;height:100%;object-fit:cover;position:absolute}
.destination:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.8))}
.destination-content{position:absolute;z-index:1;left:20px;right:20px;bottom:20px}
.destination-content p{font-size:.73rem;color:#e9efed;margin-top:5px}
.page-hero{padding:100px 0;background:var(--ivory)}
.page-hero .lead{margin-top:16px}
.breadcrumb{font-size:.72rem;color:var(--muted);margin-bottom:20px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.contact-cards{display:grid;gap:15px}
.contact-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.contact-card .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);font-weight:800}
.contact-card h3{margin:6px 0}
.contact-card p{font-size:.78rem;color:var(--muted)}
.form-card{padding:30px;border-radius:22px;background:var(--ivory)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem;font-weight:800}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;padding:12px 14px;border-radius:11px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(11,61,53,.08)}
.field textarea{min-height:130px;resize:vertical}
.map{border:0;width:100%;height:380px;border-radius:22px}
.cta{border-radius:26px;padding:55px;background:var(--emerald);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta .lead{color:#cbdcd7;margin-top:10px}
.site-footer{background:#092d28;color:#dce8e4;padding:60px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
.site-footer h4{color:#fff;font-size:.8rem;margin-bottom:17px}
.site-footer p,.site-footer a{font-size:.75rem;color:#a9bfba}
.site-footer ul{list-style:none;display:grid;gap:9px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:.68rem;color:#91aaa4}
.whatsapp{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font-weight:900;z-index:999;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.mobile-bar{display:none}
.reveal{opacity:0;transform:translateY(16px);transition:.65s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:1050px){
  .nav-links{gap:17px}.cards,.destination-grid{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:repeat(2,1fr)} .quick-card:nth-child(2){border-right:0}
  .quick-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split{gap:40px}.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .topbar{display:none}.nav{height:68px}.nav-links,.nav-cta{display:none}.menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:68px;left:0;right:0;background:#fff;padding:18px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line);box-shadow:0 15px 30px rgba(0,0,0,.08)}
  .nav-links.open a{padding:8px 5px}
  .hero{min-height:650px}.hero-inner{padding:80px 0}
  .quick-actions{margin-top:18px}.quick-grid{grid-template-columns:1fr 1fr}
  .section{padding:68px 0}.section-head,.split,.service-feature,.contact-grid{grid-template-columns:1fr;display:grid}
  .section-head{gap:15px}.image-card img{height:400px}.service-feature-content{padding:38px 28px}
  .process{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.leaders{grid-template-columns:1fr}
  .cta{display:block;padding:38px 26px}.cta .btn{margin-top:20px}
  .form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .site-footer{padding-bottom:80px}
  .mobile-bar{position:fixed;display:flex;align-items:center;justify-content:space-around;bottom:0;left:0;right:0;height:60px;background-color:#06231e;border-top:1px solid rgba(255,255,255,.12);z-index:998;padding:0 8px;box-sizing:border-box}
  .mobile-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;font-size:12px;gap:4px;color:#e2e8f0}
  .mobile-bar a:last-child{border:0}
  .whatsapp{bottom:76px;right:16px;width:46px;height:46px}
}
@media(max-width:520px){
  .cards,.destination-grid,.process{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:1fr}.quick-card{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .quick-card:last-child{border-bottom:0!important}.hero-actions .btn{width:100%}
  .hero-meta{display:grid;gap:10px}.stats{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}
}

/* Bilingual language switcher */
.lang-switch{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.lang-switch a{font-size:.7rem;font-weight:800;padding:6px 9px;border-radius:999px;color:var(--muted)}
.lang-switch a.active{background:var(--emerald);color:#fff}
html[lang="bn"] body{font-family:"Noto Sans Bengali",Manrope,system-ui,sans-serif}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,html[lang="bn"] h4{letter-spacing:-.02em}
html[lang="bn"] .eyebrow{letter-spacing:.06em}
html[lang="bn"] .btn{font-weight:700}
@media(max-width:780px){.lang-switch{margin-left:auto;margin-right:8px}.lang-switch a{padding:5px 8px}}


.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #1b4d3e; /* Theme primary color */
}

.service-icon svg {
  width: 24px;
  height: 24px;
}

.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-meta svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.eyebrow::before {
  display: none !important;
}


.leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.person {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Container/Wrapper for the profile image */
.leader-photo-wrapper {
  position: relative;
  width: 90px;            /* সাইজ প্রয়োজনমতো বাড়াতে/কমাতে পারেন */
  height: 90px;
  border-radius: 50%;
  border: 2px solid #0f623d; /* বর্ডার আগের চেয়ে চিকন করা হয়েছে (2px) */
  padding: 3px;           /* ছবি ও বর্ডারের মাঝে হালকা গ্যাপ রাখার জন্য */
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Image inside the wrapper */
.leader-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ছবি যাতে ফ্রেমের সাথে সুন্দরভাবে ফিট হয় */
  object-position: top center; /* মুখ ও পুরো মাথা যাতে স্পষ্ট ও নিখুঁতভাবে দেখা যায় */
  border-radius: 50%;
  display: block;
}

.leader-details h3 {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
  color: #1e293b;
}

.leader-details .role {
  font-size: 0.875rem;
  color: #64748b;
  margin: 2px 0 10px 0;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-call {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-call:hover {
  background: #e2e8f0;
}

.btn-wa {
  background: #25d366;
  color: #ffffff;
  padding: 6px 8px;
}

.btn-wa:hover {
  background: #1da851;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px; /* লোগো ও টেক্সটের মধ্যকার ফাঁকা জায়গা */
  text-decoration: none;
}

.logo-img {
  height: 50px; /* ৪০ পিক্সেল থেকে বাড়িয়ে ৫০ পিক্সেল করা হয়েছে */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Table Helper Styles */
.package-table .check-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* Breadcrumb Styling for Light Backgrounds */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Home Link */
.breadcrumb a {
  color: #1e293b; /* স্পষ্ট গাঢ় কালার (Slate Dark) */
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: #005a43; /* হোভার করলে ব্র্যান্ড গ্রিন কালার */
  text-decoration: underline;
}

/* Separator '/' */
.breadcrumb .sep {
  color: #94a3b8; /* মাঝারি ধূসর কালার */
  font-weight: 400;
}

/* Current Page */
.breadcrumb .current {
  color: #005a43; /* ব্র্যান্ড ডার্ক গ্রিন (বা স্বর্ণালী কালারের জন্য #b48310 ব্যবহার করতে পারেন) */
  font-weight: 600;
}


/* FOOTER BASE */
.site-footer {
  background-color: #06231e; /* Dark rich emerald */
  color: #cbd5e1;
  padding: 64px 0 28px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; /* Increased from 14px */
  line-height: 1.65;
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* GRID LAYOUT */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* BRAND COLUMN */
.footer-brand .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
  margin-bottom: 18px;
}

.footer-brand .logo-img {
  height: 48px; /* Increased logo size */
  width: auto;
  object-fit: contain;
}

.footer-brand .logo-text {
  display: flex;
  flex-direction: column;
}

.footer-brand .logo-title {
  font-weight: 700;
  font-size: 18px; /* Increased from 16px */
  color: #ffffff;
  line-height: 1.25;
}

.footer-brand .logo-sub {
  font-size: 11px; /* Increased from 10px */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a9bfba;
  margin-top: 3px;
}

.footer-desc {
  color: #cbd5e1; /* Brighter readability color */
  max-width: 340px;
  margin: 0 0 22px 0;
  font-size: 14.5px; /* Increased from 13.5px */
  line-height: 1.6;
}

/* SOCIAL LINKS */
.social-links {
  display: flex;
  gap: 12px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Increased from 36px */
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.social-btn:hover {
  background: #10b981; /* Accent Green */
  color: #ffffff;
  transform: translateY(-2px);
  border-color: #10b981;
}

/* COLUMN HEADINGS */
.footer-column h4 {
  color: #ffffff;
  font-size: 17px; /* Increased from 15px */
  font-weight: 600;
  margin: 0 0 22px 0;
  letter-spacing: 0.5px;
}

/* FOOTER LINKS & CONTACT INFO */
.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 14px; /* Increased spacing */
}

.footer-links-list a, 
.footer-column p, 
.footer-column address {
  color: #cbd5e1; /* Upgraded text color for higher contrast */
  font-size: 15px; /* Increased from 14px */
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  font-style: normal;
}

.footer-links-list a:hover {
  color: #10b981;
}

/* BOTTOM FOOTER BAR */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 14px; /* Increased copyright text size */
  color: #94a3b8;
}

.footer-bottom a {
  color: #10b981;
  text-decoration: none;
  font-weight: 600;
}


/* CONTACT COLUMN FIXES */
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: #94a3b8;
}

.contact-item svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: #10b981;
}

.contact-item a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}

.contact-item a:hover {
  color: #ffffff;
}

/* FOOTER BOTTOM & CREDITS */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Single Divider Line */
}

.footer-bottom {
  padding-top: 20px;
  /* Make sure no border-top is present here */
  border-top: none;
}

.footer-bottom-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

/* Floating WhatsApp Button Styling */
.whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.developer-credit a {
  color: #10b981;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}

.developer-credit a:hover {
  text-decoration: underline;
}

/* ==========================================
   MOBILE ACTION BAR & FLOATING BUTTON FIXES
   ========================================== */

/* Mobile Bottom Fixed Bar */
.mobile-bar {
  display: none; /* Desktop default: Hidden */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #06231e; /* Same Dark Emerald background */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 9998;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  box-sizing: border-box;
}

.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 12px;
  gap: 4px;
  flex: 1;
  height: 100%;
}

.mobile-bar a svg {
  color: #10b981; /* Accent Green icons */
}

.mobile-bar a:hover,
.mobile-bar a:active {
  color: #10b981;
}

/* Floating WhatsApp Button Adjustment */
.whatsapp {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* NOTE: <=780px mobile-bar/whatsapp/footer handled in the core
   responsive block above — no duplicate 768px rules. */

/* Mobile Bar Custom Styles */
.mobile-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 11px;
  gap: 3px;
  flex: 1;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-bar-item.lang-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-bar-item #lang-label {
  font-weight: 700;
  color: #10b981; /* Green highlight for language button */
}

/* =========================================
   FULL WIDTH HERO
========================================= */

.hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.hero-background {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center center;

  transform: scale(1.01);
}


/* =========================================
   PROFESSIONAL OVERLAY
========================================= */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  /*
    Left side is darker for readable text.
    Right side remains lighter so the photo
    stays visually visible.
  */

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.76) 0%,
      rgba(0, 0, 0, 0.62) 35%,
      rgba(0, 0, 0, 0.28) 68%,
      rgba(0, 0, 0, 0.10) 100%
    );
}


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

.hero-inner {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 720px;

  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 720px;
  padding: 80px 0;
}


/* =========================================
   EYEBROW (Visibility Fixed for Light & Dark)
========================================= */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 22px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  /* Default color for light backgrounds across all sections */
  color: #005a43; 
}

.eyebrow::before {
  content: "";

  width: 30px;
  height: 2px;

  background: currentColor;
}

/* Maintain crisp white eyebrow only inside Hero overlay/dark backgrounds */
.hero .eyebrow {
  color: #ffffff;
}


/* =========================================
   HEADING
========================================= */

.hero h1 {
  margin: 0;

  max-width: 700px;

  color: #ffffff;

  font-size: clamp(44px, 5.2vw, 70px);
  line-height: 1.07;

  letter-spacing: -0.035em;
  font-weight: 750;
}

.hero h1 span {
  display: inline;
}


/* =========================================
   DESCRIPTION
========================================= */

.hero .lead {
  max-width: 650px;

  margin: 26px 0 0;

  color: rgba(255, 255, 255, 0.88);

  font-size: 17px;
  line-height: 1.75;
}


/* =========================================
   ACTIONS
========================================= */

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}

.hero-actions .btn {
  min-height: 52px;

  padding: 0 22px;

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

  border-radius: 8px;

  text-decoration: none;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.hero-actions .btn:hover {
  transform: translateY(-2px);
}


/* =========================================
   META
========================================= */

.hero-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 13px 25px;

  margin-top: 36px;
  padding-top: 23px;

  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 13px;
}

.hero-meta svg {
  flex-shrink: 0;
}


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

@media (max-width: 900px) {

  .hero {
    width: 100%;
    min-height: 680px;
    overflow: hidden;
  }

  .hero-inner {
    width: 100%;
    min-height: 680px;

    padding-left: 24px;
    padding-right: 24px;

    box-sizing: border-box;
  }

  .hero-content {
    width: 100%;
    max-width: 680px;
  }

  /* Keep the photo clearly visible */
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.38) 55%,
        rgba(0, 0, 0, 0.18) 100%
      );
  }

  .hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}


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

@media (max-width: 600px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  /* -----------------------------------------
     HERO
  ----------------------------------------- */

  .hero {
    position: relative;

    width: 100%;
    min-height: 0;

    overflow: hidden;

    display: flex;
    align-items: center;
  }


  /* -----------------------------------------
     HERO INNER
  ----------------------------------------- */

  .hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 100%;

    min-height: 0;

    padding: 56px 18px 64px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
  }


  /* -----------------------------------------
     BACKGROUND PHOTO
  ----------------------------------------- */

  .hero-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .hero-bg-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    /*
      Important:
      Photo will cover the complete mobile
      hero without leaving blank areas.
    */
    object-fit: cover;

    /*
      Change this if the main subject is
      on a different side of the photo.
    */
    object-position: center center;

    transform: none;
  }


  /* -----------------------------------------
     PHOTO OVERLAY
  ----------------------------------------- */

  .hero-overlay {
    position: absolute;
    inset: 0;

    /*
      Much lighter than before.
      This allows the actual photo to remain
      clearly visible.
    */
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.38) 42%,
        rgba(0, 0, 0, 0.58) 100%
      );
  }


  /* -----------------------------------------
     CONTENT
  ----------------------------------------- */

  .hero-content {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 100%;

    padding: 8px 0;

    box-sizing: border-box;
  }


  /* -----------------------------------------
     EYEBROW
  ----------------------------------------- */

  .eyebrow {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 100%;

    margin-bottom: 18px;

    font-size: 12px;
    line-height: 1.5;

    letter-spacing: 0;

    white-space: normal;

    overflow-wrap: break-word;
  }

  .eyebrow::before {
    flex: 0 0 auto;
    width: 22px;
  }


  /* -----------------------------------------
     BANGLA HEADING
  ----------------------------------------- */

  .hero h1 {
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size: clamp(31px, 8.8vw, 39px);

    line-height: 1.23;

    letter-spacing: -0.015em;

    font-weight: 700;

    /*
      Prevent text from escaping the viewport.
    */
    overflow-wrap: break-word;
    word-break: normal;
  }

  .hero h1 span {
    display: inline;
  }


  /* -----------------------------------------
     DESCRIPTION
  ----------------------------------------- */

  .hero .lead {
    width: 100%;
    max-width: 100%;

    margin: 21px 0 0;

    font-size: 14.5px;

    line-height: 1.85;

    overflow-wrap: break-word;
  }


  /* -----------------------------------------
     BUTTONS
  ----------------------------------------- */

  .hero-actions {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 12px;

    margin-top: 27px;
  }

  .hero-actions .btn {
    width: 100%;

    min-height: 52px;

    padding-left: 16px;
    padding-right: 16px;

    box-sizing: border-box;

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

    gap: 9px;

    border-radius: 8px;
  }


  /* -----------------------------------------
     META INFORMATION
  ----------------------------------------- */

  .hero-meta {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    margin-top: 29px;
    padding-top: 20px;

    box-sizing: border-box;

    border-top-color: rgba(255, 255, 255, 0.25);
  }

  .hero-meta span {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 12.5px;
    line-height: 1.5;
  }

  .hero-meta svg {
    flex: 0 0 auto;
  }
}


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

@media (max-width: 400px) {

  .hero {
    min-height: 0;
  }

  .hero-inner {
    min-height: 0;

    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-content {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero h1 {
    font-size: 30px;
    line-height: 1.25;
  }

  .hero .lead {
    font-size: 14px;
    line-height: 1.85;
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.40) 45%,
        rgba(0, 0, 0, 0.60) 100%
      );
  }
}


/* =========================================
   VERY SMALL SCREEN
========================================= */

@media (max-width: 350px) {

  .hero-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1 {
    font-size: 28px;
    line-height: 1.27;
  }

  .hero .lead {
    font-size: 13.5px;
  }

}



/* NOTE: footer-grid uses the core blocks above:
   <=1050px → 2 cols, <=520px → 1 col. No duplicate 992/576 rules. */

/* FINAL responsive overrides — must stay last: later .footer-grid /
   .mobile-bar / .whatsapp redefinitions above would otherwise beat the media queries. */
@media(max-width:1050px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  .mobile-bar{display:flex}
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{display:block}
  .footer-bottom-content{flex-direction:column !important;text-align:center;gap:8px}
  .site-footer{padding-bottom:80px}
  .whatsapp{bottom:76px;right:16px;width:46px;height:46px}
}