:root{
     --brand: rgb(241, 89, 47);       /* প্রধান কালার */
  --brand-2: rgb(5, 73, 79);      /* দ্বিতীয় কালার */
  --brand-mix: rgb(123, 81, 63);     /* darker */
    --ink:#111827;           /* headings */
    --muted:#6b7280;         /* secondary text */
    --line:#e5e7eb;          /* borders */
  }

  /* ===== Hero (soft gradient) ===== */
  .c-hero{
    background: radial-gradient(90% 200% at 10% 0%, #e8f0fb 0%, #f7f9fc 40%, #ffffff 100%);
    border-bottom:1px solid var(--line);
  }
  .c-eyebrow{
    color:var(--brand); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  }
  .c-title{
    font-size: clamp(28px, 4vw, 44px);
    font-weight:800; color:var(--ink); margin:.15rem 0 0;
  }
  .c-sub{ color:#475569; }

  /* ===== Cards ===== */
  .card-soft{
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    border:1px solid #e9eef5;
    border-radius:16px;
    box-shadow: 0 18px 40px rgba(13,64,117,.08);
  }
  .card-header-clean{
    padding:18px 20px; border-bottom:1px dashed #e6edf5;
    display:flex; align-items:center; gap:.6rem;
  }
  .card-header-clean .bi{
    width:34px; height:34px; display:grid; place-items:center;
    border-radius:10px; background:#e8f1fb; color:var(--brand);
  }
  
  .card-header-clean h5{ margin:0; font-weight:700; color:#0f172a; }

  /* ===== Offices list ===== */
  .office{
    display:flex; gap:.9rem; padding:12px 6px; border-bottom:1px dashed #edf2f7;
  }
  .office:last-child{ border-bottom:0; }
  .office .pin{
    color:#0ea5e9; background:#e6f6fd; border-radius:8px;
    width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto;
  }
  .office .label{ font-weight:700; color:#0f172a; margin:0; }
  .office .meta{ color:#64748b; margin:2px 0 0; font-size:.93rem; }
  .office .meta b{ color:#334155; font-weight:600; }

  /* ===== Form ===== */
  .form-label{ font-weight:600; color:#334155; }
  .form-control, .form-select{
    border:1px solid #d8e1ea; padding:.7rem .9rem;
    border-radius:10px; box-shadow:none;
  }
  .form-control:focus{ border-color:#b9d4fa; box-shadow:0 0 0 .2rem rgba(29,90,147,.08); }
  .input-icon{
    position:relative;
  }
  .input-icon .bi{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:#94a3b8;
  }
  .input-icon input, .input-icon textarea{
    padding-left:40px;
  }
  .btn-grad{
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color:#fff; border:0; padding:.7rem 1.1rem; border-radius:10px;
  }
  .btn-grad:hover{ filter:brightness(.96); color:#fff; }

  /* ===== Map ===== */
  .map-wrap{
    position:relative;  overflow:hidden;
    box-shadow: 0 18px 40px rgba(13,64,117,.08);
    border:1px solid #e9eef5;
  }
  .hq-badge{
    position:absolute; left:16px; top:16px; z-index:2;
    background:#fff; border:1px solid #e3eaf2; border-radius:12px;
    padding:10px 12px; display:flex; gap:.6rem; align-items:center;
  }
  .hq-badge .bi{ color:#16a34a; }
  .map-wrap iframe{ width:100%; height:360px; border:0; display:block; }

  /* spacing responsive */
  .py-xl-roomy{ padding-top:2rem; padding-bottom:2rem; }
  @media (min-width: 992px){
    .py-xl-roomy{ padding-top:3rem; padding-bottom:3rem; }
  }
  .input-icon {
  position: relative;
}

/* phone row layout */
.phone-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

/* icon left */
.phone-wrap .bi{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}

/* select width */
.phone-code{
  width:200px;
  padding-left:36px; /* icon space */
}

/* input takes rest */
.phone-input{
  flex:1;
}
  .office-box {
  background: #ffffff;
  border-left: 6px solid #1e4f74;
  transition: all 0.3s ease;
  font-family: "Roboto", sans-serif;
}

.office-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 991.98px){
  #navMain.collapse,
  #navMain.collapsing,
  #navMain.collapse.show{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    background:var(--brand-2);
    border-top:1px solid #eee;
    padding:.5rem 1rem;
  }
  /* dropdowns open inside list */
  .navbar .dropdown-toggle::after{ display:none; }
  .mobile-caret{ display:inline-block; font-size:.9rem; transition:transform .2s; }
  .mobile-caret.rotate{ transform:rotate(180deg); }

  .navbar .dropdown-menu{
    position:static; display:none; float:none;
    margin:.25rem 0 0 0; border:0; box-shadow:none; background:#fff;
    padding:.25rem 0; width:100%;
  }
  .navbar .dropdown-menu.show{ display:block; }

  #navMain .nav-link{ padding:.75rem 0; }
}
@media (max-width: 991.98px){
  /* collapse পুরো স্ক্রিন জুড়ে */
  #navMain.collapse,
  #navMain.collapsing,
  #navMain.collapse.show{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    background:var(--brand-2);
    border-top:1px solid #eee;
    padding:.5rem 1rem;
  }

  /* Bootstrap caret লুকিয়ে আমাদের chevron দেখাই */
  .navbar .dropdown-toggle::after{ display:none; }

  /* dropdown ভিতরে খুলবে */
  .navbar .dropdown-menu{
    position:static; display:none; float:none;
    margin:.25rem 0 0 0; border:0; box-shadow:none; background:#fff;
    padding:.25rem 0; width:100%;
  }
  .navbar .dropdown-menu.show{ display:block; }

  /* chevron rotate */
  .mobile-caret{ display:inline-block; font-size:.9rem; transition:transform .2s; }
  .mobile-caret.rotate{ transform: rotate(180deg); }

  /* menu item spacing */
  #navMain .nav-link{ padding:.75rem 0; color: white;}
}
/* 🔵 Circular Icon Style */
.pin {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* গোল করে দেয় */
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Hover effect on icons */
.pin:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.label {
  font-size: 20px;
  letter-spacing: 0.4px;
}

.meta {
  font-size: 18px;
  color: #555;
  line-height: 1.5;
}

.contact-link {
  color: #1e4f74;
  text-decoration: none;
  transition: 0.3s;
}

.contact-link:hover {
  color: #0d6efd;
  text-decoration: underline;
}
.icon-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.office-card {
  transition: all 0.3s ease;
}

.office-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.pin {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.4rem;
  flex-shrink: 0;
  color: white; /* icon color */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Office icon (location) */
.office-item:nth-child(1) .pin {
  background-color: #1e4f74; /* nice blue */
  color: white;
}

/* Phone icon */
.office-item:nth-child(2) .pin {
  background-color: #2a9d8f; /* greenish */
  color: white;
}

/* Email icon */
.office-item:nth-child(3) .pin {
  background-color: #e76f51; /* reddish */
  color: white;
}

/* Optional: link styling */
.contact-link {
  color: #1e4f74;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: #0d6efd;
  text-decoration: underline;
}