@font-face {
    font-family: "Arial Narrow";
    src: url("{{ asset('frontend/assets/fonts/arial-narrow.woff2') }}") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Arial Narrow";
    src: url("{{ asset('frontend/assets/fonts/arial-narrow-bold.woff2') }}") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

/* Arial Narrow - পুরো website */
html,
body {
    font-family: "Arial Narrow", Arial, sans-serif !important;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Summernote Editor */
.note-editor,
.note-editor .note-editable,
.note-editor .note-toolbar,
.note-editor .note-btn,
.note-editor .dropdown-menu {
    font-family: "Arial Narrow", Arial, sans-serif !important;
}

/* Headings */
.section-default h1 {
    font-family: "Arial Narrow", Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--brand-2);
    font-size: 4.3rem;
}

.section-default h1 span {
    font-family: "Arial Narrow", Arial, sans-serif !important;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--brand);
    font-size: 4.3rem;
}

:root {
    --brand: rgb(241, 89, 47);
    --brand-2: rgb(5, 73, 79);
    --brand-mix: rgb(123, 81, 63);

    --nav-bg: #fff;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --cursor-size: 34px;
    --cursor-dot: 6px;
    --btn-color: rgb(5, 73, 79);
    --btn-hover-color: var(--brand);
}

.topbar-color {
    background-color: var(--brand);
}

.topbar span a {
    text-decoration: none;
    color: white;
}

.logo-marquee {
    overflow: hidden;
}

.logo-marquee .track {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
}

.logo-marquee .slide{
  display: flex;
  gap: 30px;              
  align-items: center;
  flex-shrink: 0;
}

/* left-to-right / right-to-left */
.logo-marquee.ltr .track { animation-direction: reverse; }
.logo-marquee.rtl .track { animation-direction: normal; }

@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}
.logo-marquee { 
  overflow: hidden;
  position: relative;
}

.logo-marquee .track{
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation: marquee 45s linear infinite;
}

.logo-marquee .slide{
  display: flex;
  gap: 30px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.logo-marquee img{
  flex-shrink: 0;
  display: block;
}
 .site-header {
    position: sticky; top: 0; z-index: 1100; background: #fff;
    border-bottom: 1px solid #e6e3e3;
     box-shadow: 0 10px 20px -15px rgba(0,0,0,.35);
  }
  .header-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    gap: 12px;
  }
  .brand-col {
    display: flex; align-items: center; padding: 10px 0;
    min-width: 220px; /* adjust */
  }
  .brand-col img { height: 48px; width: auto; object-fit: contain; }
  @media (max-width: 991.98px){
    .brand-col { min-width: 0; }
    .brand-col img { height: 42px; }
  }

  .right-col {
    display: flex; flex-direction: column;
  }

 

  /* Dropdown glass + layering */
  .topbar .dropdown-menu, .navbar .dropdown-menu {
    z-index: 1200;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }

  /* Hover-open on desktop */
  @media (min-width: 992px){
    .topbar .dropdown:hover .dropdown-menu { display: block; }
    .navbar .dropdown.mega:hover > .dropdown-menu { display: block; }
  }

  /* Navbar row */
  .nav-row { background: #fff; }
  .navbar { padding: .65rem 0; }
  .nav-sep {
    display: inline-block; width:1px; height: 22px;vertical-align: middle;
  }

  /* Optional: mega menu container width */
  .mega-menu {
    min-width: 700px;
  }
.dropdown-menu {
  z-index: 2000 !important;
}

 .topbar .link-item {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
}

  /* Only on lg+ show dropdown on hover */
  @media (min-width: 992px) {
    .topbar .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: .35rem; /* small gap */
    }
  }
     :root {
  --cursor-size: 40px; 
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);

 
  /*background: url("../image/JOPROBAS-Consultant-Icon.png") center/contain no-repeat;*/

  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none !important;
  will-change: transform;
  transition: transform 0.15s ease;
}


.cursor.grow {
  transform: translate(-50%, -50%) scale(1.3);
}
/* Date-time badge */
.datetime{
  display:inline-block;
  padding: 4px 10px;
     margin-left: 20px;
  color:#fff;              
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:1;
  border-radius:2px;
  letter-spacing:.2px;
  white-space:nowrap;     

}

.navbar .main-menu { display: flex; }
.navbar .nav-search-inline {
  display: none;
  align-items: center;
  gap: .5rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  padding: .35rem .5rem;
  min-width: min(520px, 58vw);
}


.navbar.searching .main-menu { display: none !important; }
.navbar.searching .nav-search-inline { display: flex !important; }


@media (max-width: 1199.98px) {
  .nav-search-inline { display: none !important; }
}

    .datetime span {
      margin: 0 4px;
    }
.topbar-color{
  background-color:var(--brand);
}
      /* ==== Topbar & Navbar ==== */
      .topbar {
        font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
         position: relative;
  z-index: 1050;
        font-size: 1rem;
      }
.topbar span {
    font-weight: 600;
    color: #ffffff;
}

        .topbar span a{
  font-weight: 600;
    color: #ffffff;
}
      .navbar {
        background: var(--nav-bg);
        /* box-shadow: var(--shadow); */
      }
      .navbar-brand img {
        height: 40px;
      }

      /* Mega dropdown container */
.navbar .dropdown-menu.mega-menu{
  min-width: min(92vw, 980px);
  border: 1px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(13,64,117,.12);
  margin-top: .75rem;
}

/* Section heads inside mega */
.mm-head{
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .5rem;
}

/* Links inside mega */
.mm-link{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
}
.mm-link i{ color:#1d5a93; }
.mm-link:hover{ background:#f3f6fb; color:#0f172a; }

/* Nested submenu */
.dropdown-submenu{ position: relative; }
.dropdown-submenu > .sub-menu{
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(13,64,117,.10);
  display: none;
}
.dropdown-submenu.show > .sub-menu{ display:block; }
.has-sub{ position: relative; }
.sub-caret{ color:#94a3b8; }

/* Submenu link style */
.mm-sublink{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; color:#334155; text-decoration:none;
}
.mm-sublink i{ color:#1d5a93; }
.mm-sublink:hover{ background:#f5f8fc; color:#0f172a; }

/* Highlight cards (right column) */
.mm-card{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem .85rem; border:1px solid #e9eef5; border-radius:12px;
  text-decoration:none; color:#0f172a; position:relative; background:#fff;
}
.mm-card + .mm-card{ margin-top:.65rem; }
.mm-card:hover{ background:#f7faff; }
.mm-card-icon{
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:#e8f1fb; color:#1d5a93; font-size:18px;
}
.mm-card-title{ font-weight:700; line-height:1.2; }
.mm-card-desc{ font-size:.9rem; color:#6b7280; }
.mm-badge{
  position:absolute; right:10px; top:10px; font-size:.72rem;
  background:#1d5a93; color:#fff; padding:.15rem .4rem; border-radius:6px;
}

/* Departments grid tiles */
.dept-tile{
  display:block; padding:14px; border:1px solid #e9eef5; border-radius:12px;
  text-decoration:none; background:#fff; transition:.25s;
}
.dept-tile:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(13,64,117,.08); }
.dt-icon{
  width:46px; height:46px; border-radius:12px; background:#e8f1fb; color:#1d5a93;
  display:grid; place-items:center; font-size:22px; margin-bottom:.5rem;
}
.dt-title{ font-weight:700; color:#0f172a; }
.dt-desc{ color:#64748b; font-size:.9rem; }

/* Desktop hover open */
@media (min-width: 992px){
  .nav-item.dropdown.mega:hover > .dropdown-menu{ display:block; }
}

/* Ensure mega doesn’t get clipped by navbar overflow */
.navbar{ overflow: visible; }

      .navbar .nav-link {
        font-weight: 600;
        color: #1f2d3d;
        padding: 0.5rem 0.25rem;
      }
      .navbar .nav-link:hover {
        color: var(--brand);
      }
      .nav-sep {
        position: absolute;
        left: 0;
        top: 50%;
        width: 1px;
        height: 22px;
        
        transform: translateY(-50%);
      }
      .navbar .dropdown-menu {
        border-radius: 0px;
        border: 1px solid #eee;
        box-shadow: var(--shadow);
        /*padding: 0.5rem;*/
        /* width: 350px; */
   
      }
      @media (min-width: 992px) {
        .navbar .dropdown:hover > .dropdown-menu {
          display: block;
        }
      }

      /* Submenu (2nd level) */
      .dropdown-submenu {
        position: relative;
      }
      .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left:-2.85rem;

      }

      /* ==== Search overlay ==== */
      .search-overlay {
        position: fixed;
        inset: 0;
        background: rgba(5, 17, 29, 0.96);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1200;
      }
      .search-overlay.active {
        display: flex;
      }
      .search-box {
        width: min(900px, 92%);
        position: relative;
      }
      .search-input {
        width: 100%;
        padding: 18px 56px 18px 20px;
        border-radius: 9999px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: 1.1rem;
        outline: none;
      }
      .search-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }
      .search-close {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 1.4rem;
        background: transparent;
        border: 0;
      }

      /* ==== Hero + videos ==== */
      .hero {
        position: relative;
        height: 86vh;
        min-height: 520px;
        display: grid;
        align-items: center;
        overflow: hidden;
      }
      .hero .bg-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.5s ease;
      }
      .hero .bg-video.active {
        opacity: 1;
      }
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.90);
      }
      .hero .content {
    position: relative;
    z-index: 5;
    color: #fff;
    max-width: min(780px, 92%);
    margin-left: clamp(16px, 6vw, 80px);

    transform: translateY(-20px);
}

/* Tablet */
@media (max-width: 768px) {
    .hero .content {
        transform: translateY(-12px);
        margin-left: 20px;
        max-width: 92%;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .hero .content {
        transform: translateY(-8px);
        margin-left: 16px;
        max-width: 94%;
    }
}
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: #d9efff;
        letter-spacing: 0.06em;
        font-weight: 600;
        margin-bottom: 0.75rem;
      }
      .hero h1 {
        font-size: clamp(2.2rem, 4vw + 1rem, 3.2rem);
        line-height: 1.1;
        margin: 0 0 0.75rem;
        font-weight: 800;
      }
      .hero p {
        font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.4rem);
        color: #eaf6ff;
        opacity: 0.96;
        margin: 0 0 1.25rem;
      }
   .btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 18px;
    border-radius: 9999px;

    background: #fff;
    color: #0d2a44;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;

    vertical-align: middle;
    margin-top: 6px;

    white-space: nowrap;
    max-width: 100%;

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-cta:hover {
    transform: translateY(0); /* upore uthbe na */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    color: #0d2a44;
    text-decoration: none;
}

.btn-cta i {
    color: var(--brand-2);
    font-size: 16px;
    flex-shrink: 0;
}

/* Tablet */
@media (max-width: 768px) {
    .btn-cta {
        padding: 11px 16px;
        font-size: 15px;
        gap: 8px;
        margin-top: 8px;
    }

    .btn-cta i {
        font-size: 15px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .btn-cta {
        padding: 10px 14px;
        font-size: 14px;
        gap: 6px;
        margin-top: 10px;
        width: auto;
        max-width: 100%;
    }

    .btn-cta i {
        font-size: 14px;
    }
}

/* Very small mobile */
@media (max-width: 360px) {
    .btn-cta {
        padding: 9px 12px;
        font-size: 13px;
        gap: 5px;
    }
}
      /* Rotator */
      .fade-wrap {
        position: relative;
        min-height: 1.5rem;
      }
      #rotator {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.45s ease, transform 0.45s ease;
      }
      #rotator.show {
        opacity: 1;
        transform: translateY(0);
      }
      /* remove arrow icon (caret) from dropdowns */
      .navbar .dropdown-toggle::after {
        display: none !important;
        content: none !important;
      }
      /* ===== Overlap slider band under hero ===== */
      .overlap-band {
        position: relative;
        z-index: 6; 
        transform: translateY(-18%); 
      }
      .band-shell {
        background: #fff;
        /*box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);*/
            padding: 0px 20px;
        max-width: 1100px;
        margin-inline: auto;
      }.category-card {
  position: relative;
  height: 140px;
  overflow: hidden;
}

/* ✅ BG (image layer) */
.category-card .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;

  /* normal state: dark + blur */
  filter: blur(1px) brightness(80%) saturate(55%) contrast(121%);
  transform: scale(1.08);

  transition: transform .5s ease, filter .5s ease;
}

/* ✅ ONE overlay only (keep ::after, remove ::before) */
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
  transition: background .5s ease;
}

/* ✅ Hover effect */
.category-card:hover .bg {
  transform: scale(1.18); /* zoom */
  filter: blur(2px) brightness(80%) saturate(55%) contrast(121%);
}

.category-card:hover::after {
  background: rgba(0, 0, 0, 0.15); /* overlay lighten on hover */
}

.category-card h4 {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0 10px;
    text-align: center;
    z-index: 2;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: clamp(1rem, 0.9vw + 0.9rem, 1rem);
}
      */
      @media (max-width: 991.98px) {
        .overlap-band {
          transform: translateY(-36%);
        }
        .category-card {
          height: 140px;
          border-width: 6px;
        }
      }
      @media (max-width: 575.98px) {
        .overlap-band {
          transform: none;
          margin-top: -24px;
        }
        .category-card {
          height: 130px;
        }
        .logo-marquee img {
    height: 100px;
    width: 0px;
    object-fit: contain;
    opacity: .85;
    transition: .2s;
}
.category-card:hover .bg{
  transform: scale(1.18); /* zoom */
  filter: blur(1px) brightness(75%) saturate(55%) contrast(120%);
}

/* ===== Hover: overlay lighter ===== */
.category-card:hover::after{
  background: rgba(0,0,0,.15);
}

        .navbar-brand img

 {
    transition: transform 0.4s 
ease;
    transform: scale(2.35);
    margin-left: 0px;
}
      }
      /* ===== Metrics Banner ===== */
      
      
      .stats-section{
  background:var(--brand-2)  ;              /* gray background */
  padding:60px 20px;
  transform: translateY(-90px);
}

.stats-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:30px;
  text-align:center;
}

.stat-item{
  color:#7fe0e0;                   /* aqua color */
}

.stat-icon{
  width:110px;
  height:110px;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 15px;
}

.stat-icon img{
  width:100px;
  height:auto;
}

.stat-item h3{
  margin:0;
  font-size:28px;
  font-weight:700;
  color: var(--brand);
}

.stat-item h3 span{
  font-size:22px;
}

.stat-item p{
 color: var(--brand);
  font-size:19px;
}

/* ===== Responsive ===== */

@media (max-width: 992px){
  .stats-container{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width: 600px){
  .stats-container{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
  }
}

@media (max-width: 400px){
  .stats-container{
    grid-template-columns:1fr;
  }
}


/* card */
.service-card{
  display:block;
  border-radius:8px;
  overflow:hidden;
  background:#eef2f6;                 /* light gray like screenshot */
  border:1px solid #e6e9ee;
  transition:transform .15s ease, box-shadow .15s ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.09);
}
.service-card .thumb{
  aspect-ratio: 16/9;                 /* uniform thumbs */
  background:#dfe6ee;
  overflow:hidden;
}
.service-card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.service-card .body{
  padding:14px 16px 16px;
  background:#f6f8fb;                 /* slightly lighter body */
}
.service-card .title{
  margin:0;
  color:#204060;
  font-weight:600;
}

/* gutters like screenshot */
@media (min-width: 992px){
  .services-wrap .row.g-md-4{ --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
}

      /* Feature Projects */
      .feature-projects .project-card img {
        border-radius: 8px;
        transition: 0.3s;
      }
      .feature-projects .project-card:hover img {
        transform: scale(1.04);
      }

      /* Blog */
      .eqms-blog {
        background: url("assets/images/blog-bg.jpg") center/cover no-repeat;
      }
      .eqms-blog .overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
      }
      .eqms-blog .blog-card a {
        border-color:5px solid var(--brand);
        color: var(--brand);
            font-weight: 600;
      }
      .eqms-blog .blog-card a:hover {
        background:var(--brand);
        color: #000;
      }

      /* Clients */
      .clients img {
        opacity: 0.8;
        transition: 0.2s;
      }
      .clients img:hover {
        opacity: 1;
        transform: scale(1.05);
      }

      /* Footer */
      .eqms-footer {
        background: #0f3e5c;
      }
      .projects-slider{ background:#fff; }
      .btn-project{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:16px 18px;
  border-radius:10px;

  border:1px solid rgba(30, 77, 146, .25);
  background:var(--brand-2);
  color:#fff;

  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;

  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  box-shadow:0 10px 24px rgba(30, 77, 146, .22);
}
.proj-card{
  display:block; color:#17324a;
  background:#f7f9fc; border:1px solid #e6e9ee; border-radius:6px;
  padding:0 0 18px; transition:transform .15s ease, box-shadow .15s ease;
}
.proj-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.proj-card .thumb{
  height:220px; overflow:hidden; border-bottom:1px solid #e6e9ee; background:#dfe6ee;
}
.proj-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.proj-card .meta{ padding:14px 16px 6px; }
.proj-card .title{ padding:0 16px; margin:0; font-weight:700; color:#24507a; }

/* arrows */
.proj-prev, .proj-next{
  width:36px; height:36px; line-height:1; font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff;
}
.proj-prev:hover, .proj-next:hover{ background:#f1f4f8; }

/* Swiper spacing */
.projSwiper{ padding:6px 2px 6px; }
.projSwiper .swiper-slide{ width:auto; }
.eqms-blog{
  background:url('assets/image/4-20250427124710-MfJhWyZoCT8mnh3OxLmXg1i9QQ5Y4MRVYPYcicvsbA5OahV8Hr-banner.jpg') center/cover no-repeat;
  position:relative;
}
.blog-overlay{
  position:absolute; inset:0;
  background:var(--brand-2)  ; /* semi dark overlay */
  backdrop-filter: blur(3px);   /* subtle blur like your image */
}
.eqms-blog h2{ color:#fff; }

.blog-card img{ height:180px; object-fit:cover; width:100%; }
.blog-card h5{ color:#fff; font-weight:700; line-height:1.3; }
.blog-card p{ color:#d5dee7; font-size:.9rem; margin-bottom:10px; }
.blog-card a{
  /*border:2px solid var(--brand);*/
  color:var(--brand);
  font-weight:500;
  
}
.blog-card a:hover{
  background:var(--brand);
  color:#000;
}
.footer {
 
}

/* Top section */
.footer-top {
  background-color:var(--brand-2);
}
.footer-top p {
    font-family: 'bootstrap-icons';
    font-size: 1.8rem;
        margin-top: -11px;

      }

      @media (max-width: 576px){
  .footer-text + h5 { font-size: 1rem; }   /* ~16px */
  .footer-text + h5 + p { font-size: .875rem; } /* ~14px */
}

.footer-bar {
 
  padding: 10px 20px;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content:end;
}
.footer-top h2{
      font-size: 28px;
}
.footer-top h5{
      font-size: 16px;
}
@media (max-width: 576px){      /* lg+ */
  .footer-bar{
    justify-content: start;
    padding: 0px 0px;  /* desktop: end */
  }
  .footer-top h2{
      font-size: 17px;
}
.footer-top h5{
      font-size: 12px;
}
.footer-top p {
    font-family: 'bootstrap-icons';
    font-size: 1.8rem;
    margin-top: 0px;
}
}
.footer-content {
  display: flex;
  align-items: center;
  gap: 20px; /* small space between text and icons */
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.footer-links a:hover {
  text-decoration: underline;
}
.social-img {
  width: 50px;   /* Bigger icons */
  height: 50px;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-img:hover {
  transform: scale(1.05);
  opacity: 0.85;
}

.footer-icons {
  display: flex;
  gap: 10px;
}

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  color: white;
  font-size: 18px;
  text-decoration: none;
}

.social.linkedin {
  background-color: #0077b5;
}

.social.facebook {
  background-color: #1877f2;
}

.social:hover {
  opacity: 0.85;
}

/* Bottom section */
.footer-bottom {
  background-color: #f8f9fa;
}

.footer-bottom-link {
  color: #000;
  text-decoration: none;
  margin-right: 15px;
}

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

/* Responsive Adjustments */
@media (max-width: 991px) {
  .footer-link {
    display: block;
    margin: 8px 0;
    text-align: center;
  }
  .footer-bottom-link {
    margin: 0 8px;
  }
}

/* Explore more button */
.eqms-blog .btn-outline-light:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:#000;
}
.clients-marquee h2{
  font-weight:700; letter-spacing:.5px;
  color:var(--brand-2);
      font-size: 3rem;
}

.clients-marquee h2 span {
  font-weight:700; letter-spacing:.5px;
  color:var(--brand);
      font-size: 3rem;
}







  :root{
    --blue:#1f5fa8;
    --text:#3a3a3a;
    --muted:#727272;
    --divider:#e6e6e6;
    --bg:#f6f7f9;
  }
  
  .section{

    padding:24px 20px;
    background:#fff;
  }
  /* GRID: left title, center slider, right tall nav */
  .news-grid{
    display:grid;
    grid-template-columns: 240px 1fr 80px;
    gap:28px;
    align-items:stretch;
  }
  /* ফ্রেম: বাইরে কিছুই দেখা যাবে না */
.news-grid .slider-frame{
  position: relative;
  overflow: hidden;    /* ✅ বাইরে ওভারফ্লো ব্লক */
}

/* ট্র্যাক: হরিজন্টাল স্লাইড লেআউট */
.news-grid .slider-frame .track{
  display: flex;
  gap: 16px;           /* থাকলে গ্যাপ */
}

.news-grid .slider-frame .item {
    flex: 0 0 240px;
    /* padding: 14px 16px; */
    /* border: 1px solid #e5e7eb; */
    border-radius: 10px;
    background: #fff;
    height: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* তারিখ এক লাইনে – ওভারফ্লো হলে … */
.news-grid .slider-frame .item .date{
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* শিরোনাম 2 লাইনে ক্ল্যাম্প – ওভারফ্লো হলে … */
.news-grid .slider-frame .item .title{
  margin: 0px 0 -2px;
  font-size: 17px;
    line-height: 1.5;
  /*display: -webkit-box;*/
  -webkit-line-clamp: 2;       /* ✅ সর্বোচ্চ 2 লাইন */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
      letter-spacing: -1px;
    word-spacing: 3px;
}

/* 'more' বোতামটা নিচে স্টিক করতে চাইলে */
.news-grid .slider-frame .item .more{
  margin-top: auto;    /* ✅ বাকি স্পেস ঠেলে নিচে নেয় */
  text-decoration: none;
  font-weight: 600;
}

  /* LEFT */
  .left{
    display:flex;flex-direction:column;justify-content:flex-start;
  }
  .left h2{
    font-size:56px;line-height:1; font-weight:300; color:#555; margin:0 0 22px;
    letter-spacing:-1px;
  }
  .show-all{
    display:inline-block;background:var(--brand);color:#fff;
    padding:12px 18px;border-radius:4px;text-decoration:none;font-weight:600;
  }

  /* CENTER SLIDER FRAME (shows 3) */
  .slider-frame{
    position:relative;overflow:hidden;
    padding:6px 0;
  }
  .track{
    display:flex; align-items:stretch; gap:0; will-change:transform;
  }
  .item{
    width:33.3334%;
    padding:0 32px; box-sizing:border-box;
    position:relative; min-height:140px;
        height: 173px;
  }
  /* vertical divider like screenshot */
  .item:not(:first-child)::before{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--divider);
  }
  .date{
    color:#7c7c7c; font-size:20px; margin-bottom:16px;
  }
  .title{
    color:#616a7d; font-weight:800; font-size:24px; line-height:1.25; margin:0 0 16px;
  }
  .more{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--brand); text-decoration:none; font-weight:600;
  }
  .chev{font-size:20px; line-height:1}
  
  /* RIGHT tall nav */
  .nav-rail{
    background:var(--brand-2); border-radius:2px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  }
  .nav-btn{
    width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; user-select:none;
  }
  .nav-btn + .nav-btn{ border-top:1px solid rgba(255,255,255,.25); }
  .nav-btn span{ font-size:26px; font-weight:800; }

  /* Modal */
  .backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:20;}
  .modal{ width:min(720px,92%); background:#fff; padding:20px 22px; border-radius:8px; position:relative; }
  .modal .close{ position:absolute; right:10px; top:8px; font-size:22px; cursor:pointer;}
  .modal h3{ margin:0 0 8px; }
  .modal p{ color:#555; }

  /* Responsive */
  @media (max-width:1100px){
    .left h2{font-size:44px}
    .item{padding:0 24px}
  }
  @media (max-width:860px){
    .news-grid{grid-template-columns:1fr; gap:16px;}
    .nav-rail{order:3; height:56px; flex-direction:row; border-radius:6px;}
    .nav-btn{width:50%;}
    .slider-frame{order:2}
    .left{order:1}
    .item{width:85vw; padding:0 20px;}
    .item:not(:first-child)::before{display:none}
    .track{gap:0}
  }
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal {
  background: #fff;
  color: #222;
  padding: 24px;
  border-radius: 8px;
  width: min(600px, 90%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2100;
}
.modal .close {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 22px;
  cursor: pointer;
}
.navbar-brand img {
  transition: transform 0.4s ease;
  transform: scale(2.30);
  margin-left: 87px; 
}
@media (min-width: 1200px) {
 .navbar .nav-link, .main-menu .nav-link {
    font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    /* color: #244a6b; */
    color: #878686;
}
}

@media (min-width: 1400px) {
.navbar .nav-link, .main-menu .nav-link {
    font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    /* color: #244a6b; */
    color: #878686;
}
}
@media (max-width: 575.98px){
  .navbar-brand img{
    transform: scale(1.25);
  }
@media (max-width: 575.98px) {
    .navbar-brand img {
        transition: transform 0.4s 
ease;
        transform: scale(2);
        margin-left: 30px;
    }
}
}
@media (max-width: 991.98px){
  /* dropdown menu will push content (not overlap) */
  .navbar .dropdown-menu{
    position: static;
    float: none;
    display: none;
    margin: .25rem 0 0 0;
    border: 0;
    box-shadow: none;
    background: #fff;
  }
  .navbar .dropdown-menu.show{ display: block; }
  /* mega menu প্যাডিং একটু কমিয়ে দিন মোবাইলে */
  .navbar .mega .dropdown-menu.mega-menu{
    padding: .5rem 0 !important;
    min-width: auto;
  }
  /* dropdown caret দেখাতে সুবিধা */
  .navbar .dropdown-toggle::after{
    margin-left: .35rem;
  }
}

/* ===== Desktop behaviors ===== */
@media (min-width: 992px){
  /* hover এও খুলবে */
  .navbar .dropdown:hover > .dropdown-menu{
    display: block;
  }
  /* mega menu container wide */
  .navbar .mega .dropdown-menu.mega-menu{
    left: 0; right: 0; width: 100%;
  }
}
/* ডিফল্টে (desktop/laptop) আইকন লুকানো */
.mobile-caret{ display:none; }

/* Bootstrap-এর default caret সব জায়গায় লুকাই (desktop-এও কোনো caret থাকবে না) */
.navbar .dropdown-toggle::after{ display:none !important; }
/* Mobile bar keeps items in one row; toggler will stick to right */




/* শুধুমাত্র mobile/tablet এ আইকন দেখাও */
@media (max-width: 991.98px){
  .mobile-caret{ display:inline-block; font-size:.9rem; transition: transform .2s; }
  .mobile-caret.rotate{ transform: rotate(180deg); } /* open হলে ঘুরবে */
}

/* desktop/laptop এ নিশ্চিতভাবে লুকানো */
@media (min-width: 992px){
  .mobile-caret{ display:none !important; }
}


/* optional – hover করলে আরও একটু বড় হবে */
.navbar-brand:hover img {
  transform: scale(1.22);
}
/* ---- clock container ---- */
.nav-clock-ring{
  --nc-bg:var(--brand-2);
  --nc-cyan: #27d2ea;
  --nc-cyan2:#11a6c2;
  --nc-track: rgba(255,255,255,.12);
  --nc-text: #e8f0ff;
  --nc-sub:  #9fb2c8;

  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--nc-bg);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(2,12,24,.25);
  color: var(--nc-text);
}

/* left date block */
.nav-clock-ring .nc-date{
  display:flex; flex-direction:column;
  min-width: 120px;
  line-height: 1.05;
}
.nav-clock-ring #ncDay{ font-size: 13px; color: var(--nc-sub); }
.nav-clock-ring #ncMonthDay{ font-size: 18px; font-weight: 700; }

/* right dial */
.nav-clock-ring .nc-dial{
  position: relative;
  width: 120px; height: 120px;
  display: grid; place-items: center;
  cursor: pointer;
  isolation:isolate;
}
.nc-svg{ position:absolute; inset:0; }
.track{
  fill: none; stroke: var(--nc-track); stroke-width: 10;
}
.progress{
  fill: none; stroke: url(#gradCyan);
  stroke: linear-gradient(var(--nc-cyan), var(--nc-cyan2));
  stroke: var(--brand);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-dasharray: 289;          /* ~ 2πr where r=46 */
  stroke-dashoffset: 289;          /* will be updated by JS */
  filter: drop-shadow(0 0 6px rgba(39,210,234,.45));
}
.knob{
  fill: white;
  filter: drop-shadow(0 0 6px rgba(39,210,234,.55));
  transform-origin: 60px 60px;     /* will rotate via JS */
}

/* big time text */
.nc-time{
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: 800;
  letter-spacing:.5px;
  display:flex; align-items: baseline; gap:6px;
}
.nc-time .ampm{
  font-size: 12px; font-weight:700; color: var(--nc-sub);
  margin-top: 6px;
}

/* dotted grid background for vibe */
.nav-clock-ring{
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    var(--nc-bg);
  background-size: 6px 6px, cover;
}

/* responsive: hide on md- screens if চাও */
@media (max-width: 991.98px){
  .nav-clock-ring{ display:none !important; }
}
/* 50px compact mode */
.nav-clock-ring.is-50 {
    padding: 5px 5px;
    gap: 10px;
    border-radius: 10px;
}
.nav-clock-ring.is-50 .nc-date{
  min-width:80px;
}
.nav-clock-ring.is-50 #ncDay{ font-size:11px; }
.nav-clock-ring.is-50 #ncMonthDay{ font-size:14px; }

/* dial size ~50x50 */
.nav-clock-ring.is-50 .nc-dial{
  width:50px; height:50px;
}

/* thinner ring for small size */
.nav-clock-ring.is-50 .track,
.nav-clock-ring.is-50 .progress{
  stroke-width:6;
}

/* time text smaller */
.nav-clock-ring.is-50 .nc-time{
  font-size:14px; /* main time */
  gap:4px;
}
.nav-clock-ring.is-50 .nc-time .ampm{
  font-size:9px;
  margin-top:1px;
}

/* optional: grid dot density a bit tighter */
.nav-clock-ring.is-50{
  background-size: 5px 5px, cover;
}
@media (min-width: 1240px) {
    .jd-framework .container {
        width: 1110px;
    }
}

@media (min-width: 1240px) {
    .jd-framework .container {
        width: 1230px;
    }
}
@media (min-width: 992px) {
    .jd-framework .container {
        width: 970px;
    }
}
@media (min-width: 768px) {
    .jd-framework .container {
        width: 750px;
    }
}
/* ===== iPad Pro portrait / landscape ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-brand img {
    transform: scale(1.65);   /* বা 1.1–1.3 নিজের পছন্দ মতো */
  }
}

/* (ঐচ্ছিক) iPad Pro portrait নির্দিষ্ট টার্গেট */
@media (width: 1024px) and (orientation: portrait) {
  .navbar-brand img {
    transform: scale(1.65);
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .topbar {
    display: none !important;
  }
}

/* (optional) নির্দিষ্ট portrait মোডে লুকাতে চাইলে */
@media (width: 1024px) and (orientation: portrait) {
  .topbar {
    display: none !important;
  }
}/* Common marquee styling */

.logo-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-marquee .track {
  display: flex;
  width: max-content;
}
section.clients-marquee p {
    font-size: 24px;
    font-style: italic;
}
.logo-marquee .slide {
  display: inline-flex;
  gap: 3rem;
  padding-inline: 1rem;
}
.logo-marquee img {
    height: 100px;
    /* max-width: 0px; */
    filter: grayscale(100%);
    opacity: .8;
    transition: filter .2s 
ease, opacity .2s 
ease, transform .2s 
ease
}
.logo-marquee img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

/* Animations */
@keyframes marquee-rtl { /* Right → Left */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-ltr { /* Left → Right */
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* Core marquee */
.logo-marquee{ overflow:hidden; position:relative; }
.logo-marquee .track{ display:flex; width:max-content; }
.logo-marquee .slide{ display:flex; align-items:center; gap:10px; padding-inline:6px; }
.logo-marquee img{
  height:100px; 
  /* width:0px; */
   object-fit:contain;
 opacity:.85; transition:.2s;
}
.logo-marquee img:hover{ filter:none; opacity:1; transform:scale(1.02); }
/* Directions + Speeds */
.marquee-row.top .track {
  animation: marquee-rtl 60s linear infinite;
}
.marquee-row.bottom .track {
  animation: marquee-ltr 30s linear infinite;
}

/* Hover pause */
.marquee-row:hover .track {
  animation-play-state: paused;
}

/* Pause on hover */
.logo-marquee:hover .track{ animation-play-state: paused; }
.footer-text{
  color: var(--brand);
}
/* Keyframes */
@keyframes marquee-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* two slides => move half width */
}
@keyframes marquee-right{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}

/* Responsive */
@media (max-width: 767.98px){
  
  { gap:28px; }
  .logo-marquee img{ height:38px; }
}



/* Responsive tweaks */
@media (max-width: 991.98px){
  .logo-marquee img { height: 36px; }
  .logo-marquee .slide { gap: 2rem; }
  .marquee-row.top .track,
  .marquee-row.bottom .track { animation-duration: 24s; }
}
@media (max-width: 575.98px){
  .logo-marquee img { height: 95px; }
  .logo-marquee .slide { gap: 1.25rem; }
  .marquee-row.top .track,
  .marquee-row.bottom .track { animation-duration: 20s; }
}

/* Accessibility: disable animation for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .marquee-row .track { animation: none; }
}

.navbar-toggler{
  border: none;
  box-shadow: none !important;
}

/* Only show default Bootstrap icon color dark */
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* On open (X icon alternative optional) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 6L24 24M24 6L6 24'/%3E%3C/svg%3E");
}
/* Mobile logo size */
.mobile-logo{ height:38px; width:auto; max-width:60vw; object-fit:contain; }

/* Collapse full-width (container থেকে বের করে পুরো স্ক্রিন) */
@media (max-width: 991.98px){
  #navMain.collapse,
  #navMain.collapsing,
  #navMain.collapse.show{
    width:100vw;
    margin-left:calc(-50vw + 50%);
    background:#fff;
    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:#fff;
    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; }
}
/* ===== Common tweaks ===== */
.min-w-0 { min-width: 0; }
.navbar-nav { flex-wrap: nowrap; }             /* আইটেম যেন লাইনে নেমে না যায় */
.navbar-nav .nav-link { white-space: nowrap; } /* টেক্সট ব্রেক না হয় */
.dropdown-menu li  {
padding: 1px 0px;
}
.dropdown-menu li a {
    border-bottom: 1px solid rgb(221, 220, 220);
    padding-bottom: 4px;
    font-family: 'bootstrap-icons';
    font-size: 17px;
        color: rgb(0 0 0 / 65%);
}

/* Custom toggler style */
.custom-toggler {
    background-color: var(--brand-2);
  border: none;             
  padding: 10px 12px;     
  border-radius: 6px;      
}

/* Toggler icon color change (Bootstrap 5 default icon is SVG background) */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Only apply on small screens (mobile) */
@media (max-width: 991px) {
  .custom-toggler {
    transform: scale(1.3); 
  }
}
:root{
  --btt-size: 48px;
  --btt-bg: #2a6b6b;   /* teal-ish */
  --btt-bg-hover:#245b5b;
  --btt-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: var(--btt-size);
  height: var(--btt-size);
  border-radius: 50%;
  border: 0;
  background: var(--btt-bg);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--btt-shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
  z-index: 1050;
}
.back-to-top:hover{ background: var(--btt-bg-hover); }

.back-to-top.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* submenu item-er default BS caret off */
.dropdown-menu .dropdown-toggle::after {
  display: none !important;
}

/* submenu ache emon item-er right side e chevron/arrow dekhao */
.dropdown-menu .dropdown-submenu > .dropdown-toggle {
  position: relative;
  padding-right: 1.5rem; /* arrow-er jonno jayga */
}

.dropdown-menu .dropdown-submenu > .dropdown-toggle::after {
  content: "›";               /* ba ">" / "»" use korte paren */
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  opacity: .6;
  transition: transform .2s ease, opacity .2s ease;
}

/* hover/open state e halka feedback */
.dropdown-menu .dropdown-submenu:hover > .dropdown-toggle::after,
.dropdown-menu .dropdown-submenu .dropdown-menu.show ~ .dropdown-toggle::after {
  opacity: .9;
  transform: translateY(-50%) translateX(2px);
}

/* ছোট স্ক্রিনে একটু ছোট */
@media (max-width: 576px){
  :root{ --btt-size: 42px; }
}

/* motion reduce সম্মান */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}

#ceoSection .ceo-title{
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 50px);
  line-height: 1.2;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px;
}
#ceoSection .ceo-title > span{
  display:inline-block; width: 36px; height: 4px;
  background: #1E4D92; border-radius: 2px;
}
#ceoSection .ceo-sub{
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
   margin: 0 0 14px;
}
#ceoSection .ceo-sub .semi {
    font-weight: 500;
    /* color: #0f2f5e; */
}

#ceoSection .ceo-body{
  margin: 0 0 14px;
  font-size: clamp(14px, 1.3vw, 50px);
  line-height: 1.7;
  color:#30353b;
  text-align: justify; /* optional; remove if you don't want */
  hyphens: auto;
      letter-spacing: 0px;
}
#ceoSection .ceo-sign{
  margin-top: 18px;
  font-size: clamp(14px, 1.15vw, 22px);
  line-height: 1.6;
  color:#1d2833;
}

/* Image sizing + alignment */
#ceoSection .ceo-photo{
  width: 100%;
  max-width: 400px;         /* control portrait size on large screens */
  border-radius: 10px;      /* optional */
  object-fit: cover;
}
#ceoSection .ceo-left{
  display:flex;
  align-items:center;       /* vertically center image vs text */
}
.stat-item p{
    text-align:center;
}
/* Small devices (stack, center text) */
@media (max-width: 575.98px){
  #ceoSection{ padding: 36px 0; }
  #ceoSection .ceo-right{ text-align: center; }
  #ceoSection .ceo-title{ justify-content:center; }
  #ceoSection .ceo-title > span{ display:none; } /* save space on narrow screens */
  #ceoSection .ceo-sub{ margin-bottom:12px; }
  #ceoSection .ceo-body{ text-align:left; } /* better reading on mobile */
  #ceoSection .ceo-left{ justify-content: center; }
  #ceoSection .ceo-photo{ max-width: 260px; }
}

/* Medium devices (tablet) */
@media (min-width: 576px) and (max-width: 991.98px){
  #ceoSection .ceo-right{ text-align:left; }
  #ceoSection .ceo-left{ justify-content: center; }
  #ceoSection .ceo-photo{ max-width: 300px; }
}

/* Large (≥992): keep side-by-side with comfy spacing */
@media (min-width: 992px){
  #ceoSection .ceo-right{ padding-left: 8px; }
}

/* NAV: always use condensed font */
.navbar .nav-link,
.main-menu .nav-link {
font-family: "Roboto Condensed", "Open Sans Condensed", Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    /* color: #244a6b; */
    color: var(--brand-2);
    letter-spacing: -1px;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--brand-2);
      font-weight: 500; 
}
.nav-link {
  position: relative;
  padding-bottom: 0.5rem;
  transition: color 0.3s;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: var(--brand-2);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ==== BASE ==== */
.social-dock {
    position: fixed;
    right: 24px;          /* desktop: বাম দিকে bubble */
    bottom: 30px;
    z-index: 9999;

    display: flex;
    align-items: center;
}

.social-dock .dock-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #ff6b3c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
    padding: 0;
     animation: dockBlink 1.6s ease-in-out infinite;
}
@keyframes dockBlink {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 1;      /* একটু ফ্যাকাশে হবে */
        transform: scale(1.3);  /* অল্প বড় হবে */
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.social-dock .dock-toggle i {
    font-size: 28px;   /* icon size */
    line-height: 1;
}

/* ==== PANEL (hidden state) ==== */
.social-dock .dock-panel {
    position: absolute;
    right: 66px;         /* bubble থেকে কতটা ডানে */
    bottom: 0;

    background: #0f3a3f;
    padding: 10px 8px;
    border-radius: 28px;
    display: grid;
    gap: 10px;

    transform: translateX(10px) scale(.98);
    opacity: 0;
    pointer-events: none;

    transition: transform .22s ease, opacity .22s ease;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

/* ==== OPEN state – JS wrapper-এ .open দেয় ==== */
.social-dock.open .dock-panel {
    transform: translateX(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* icon গুলো */
.social-dock .dock-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s ease;
}

.social-dock .dock-item img {
    width: 22px;
    height: 22px;
    display: block;
    filter: brightness(1) contrast(1.05);
}

.social-dock .dock-item:hover {
    transform: translateY(-2px);
    background: #15555c;
}

/* WhatsApp */
.dock-item.whatsapp img {
  filter: invert(66%) sepia(95%) saturate(332%) hue-rotate(92deg) brightness(96%) contrast(88%);
}

/* Telegram */
.dock-item.telegram img {
  filter: invert(55%) sepia(84%) saturate(748%) hue-rotate(171deg) brightness(97%) contrast(90%);
}

/* Gmail */
.dock-item.gmail img {
  filter: invert(34%) sepia(93%) saturate(3562%) hue-rotate(346deg) brightness(92%) contrast(101%);
}

/* LinkedIn */
.dock-item.linkedin img {
  filter: invert(41%) sepia(78%) saturate(2486%) hue-rotate(188deg) brightness(94%) contrast(101%);
}

/* Messenger */
.dock-item.messenger img {
  filter: invert(46%) sepia(83%) saturate(1894%) hue-rotate(196deg) brightness(101%) contrast(102%);
}

/* ==== RESPONSIVE – ছোট স্ক্রিনে bubble ডানে নিয়ে যাচ্ছি ==== */
@media (max-width: 991.98px){
  .social-dock{
      left: auto;
      right: 12px;
      bottom: 12vh;
  }
  .social-dock .dock-panel{
      left: auto;
      right: 52px;   /* bubble-এর বাম দিকে দেখাবে */
      bottom: 0;
  }
}

@media (max-width: 575.98px){
  .social-dock{
      left: auto;
      right: 10px;
      bottom: 10vh;
  }
  .social-dock .dock-panel{
      left: auto;
      right: 50px;
  }
}

 /* footer */
   :root{
    --jp-bg:#e9ecef;          /* light grey panel */
    --jp-text:#30353b;        /* body text */
    --jp-muted:#dee2e6;       /* muted */
    --jp-blue:#2d5f99;        /* heading/link blue */
    --jp-blue-h:#194973;      /* hover blue */
    --jp-rule:#d6d9de;        /* divider lines */
  }

  .jp-footer{
    font-family:"Roboto Condensed", Arial, sans-serif;
    background:var(--brand-2);
    color:var(--jp-text);
    padding:48px 24px 0;
    
  }
  .jp-footer .jp-wrap{
    max-width:1200px; margin:0 auto;
    display:grid; 
    grid-template-columns: 1.1fr 1.1fr 1.1fr 1fr 1fr;
    align-items:start;
  }
  /* vertical rules between major columns (hide on small) */
  .jp-footer .col{ position:relative; padding-left:0; }
  .jp-footer .col.has-rule::before{
    content:""; position:absolute; left:-16px; top:0; bottom:0;
    width:1px; background:var(--jp-rule);
  }

  .jp-footer h4{
    font-size:22px; letter-spacing:.5px; margin:0 0 14px;
    color:var(--brand); font-weight:700;
  }
  .jp-footer ul{ list-style:none; padding:0; margin:0; }
  .jp-footer li{ margin:10px 0; }
  .jp-footer a{
    color:white;
    text-decoration:none; line-height:1.35;
    display:inline-block;
  }
  .jp-footer a:hover{ color:var(--brand); text-decoration:underline; }

  /* right slim column links */
  .jp-footer .slim a{
   
    margin:12px 0; display:block;
  }

  /* bottom bar */
  .jp-footer .jp-bottom{
    max-width:1200px; margin:28px auto 0; padding:24px 0;
    display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center;
    border-top:1px solid var(--jp-rule);
  }
  .jp-footer .jp-copy{ color:var(--jp-muted); }
  .jp-footer .jp-legal{ color:var(--jp-muted); font-size:14px; line-height:1.4; }
  .jp-footer .jp-ln{
    width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:10px; background:#ffffff; border:1px solid var(--jp-rule);
  }
  .jp-footer .jp-ln img{ width:32px; height:32px; display:block; }

  /* responsive */
  @media (max-width:1100px){
    .jp-footer .jp-wrap{ grid-template-columns: 1fr 1fr 1fr; }
    .jp-footer .slim{ grid-column:1/-1; display:flex; gap:24px; flex-wrap:wrap; }
    .jp-footer .col.has-rule::before{ display:none; }
  }
  @media (max-width:700px){
    .jp-footer{ padding:36px 16px 0; }
    .jp-footer .jp-wrap{ grid-template-columns:1fr; gap:28px; }
    .jp-footer .jp-bottom{ grid-template-columns:1fr; text-align:left; }
    .jp-footer .jp-legal{ order:3; }
  }
  .scroll-control {
    position: fixed;
    left: 40px;      /* কতটা ডানে */
    bottom: 40px;     /* কতটা নিচে */
    z-index: 9999;

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

    width: 60px;
    height: 60px;
    border-radius: 50%;
    
 
    cursor: pointer;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.scroll-control img {
    width: 70px;      /* ইমেজ সাইজ */
    height: auto;
    display: block;
}

.scroll-control:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* ছোট স্ক্রিনে একটু উপরে/ভিতরে আনতে চাইলে */
@media (max-width: 768px) {
    .scroll-control {
        right: 16px;
        bottom: 24px;
        width: 50px;
        height: 50px;
    }
}
.col.has-rule.slim .contact-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
  font-size: 14px;
  color: white;
}
.col.has-rule.slim .contact-item:hover{
text-decoration:none;
  color: var(--brand);
}
.bab-card{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.bab-card img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain; /* image crop না হয়ে পুরোটা দেখাবে */
}
.submenu-arrow{
  font-size: 16px;
  opacity: .75;
  margin-left: 12px;
  line-height: 1;
}
.dropdown-item:hover .submenu-arrow{
  opacity: 1;
}
.about-hero__chevrons {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.about-hero__chevrons .chevrons-image {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 600px;
    height: auto;
    filter: brightness(.75) contrast(1.5);
}
.section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
}
/*.es-container img {*/
/*    height: auto;*/
/*    width: 100%;*/
/*    max-width: 100px;*/
/*}*/

.section-heading__title {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand);
    line-height: 1;
    white-space: nowrap;
}
/*span.submenu-text {*/
/*    text-up: right;*/
/*    text-transform:lowercase;*/
/*}*/
/*span.submenu-text::first-letter{*/
/*  text-transform: uppercase;*/
/*}*/
.es-left-1 ul { list-style: disc !important; padding-left: 22px !important; }
.es-left-1 li { margin: 6px 0 !important; line-height: 1.7; }
.es-left-1 p  { margin: 0 0 10px; }

/* card */
.project-card{
  width: var(--card-w);
  display: flex !important;              /* ✅ for equal button baseline */
  flex-direction: column !important;     /* ✅ */
  height: 100%;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff;
  border: var(--border);
  box-shadow: var(--shadow);
}

.project-card .thumb{
  height: 210px;
  overflow: hidden;
  background: #f3f6fb;
  flex: 0 0 auto;
}

.project-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .35s ease;
}
.project-card:hover img{ transform: scale(1.06); }

.project-card .info{
  padding: 14px 18px 18px !important;    /* আপনার updated padding */
  text-align: left !important;

  flex: 1 1 auto;
  display: flex !important;              /* ✅ */
  flex-direction: column !important;     /* ✅ */
}

/* ✅ Date left | Engineer right (same line always) */
.project-card .meta-row{
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;

  margin: 10px 0px !important;
  padding: 0 !important;
  line-height: 1 !important;
  align-items: baseline !important;
}

.project-card .meta-row .date,
.project-card .meta-row .engineer{
  white-space: nowrap !important;
  font-size: 14px !important;
 font-weight: 600 !important;
color: var(--brand-2);
  display: inline-flex !important;
  align-items: baseline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ✅ Meta line (under date/engineer) */
.project-card .meta{
  display: block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #6b778c !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.project-card .title{
  margin: 8px 0 0;
  font-weight: 600;
  line-height: 1.25;
  font-size: 22px;
  color: var(--title);
}

/* ✅ Button centered + same position for all cards */
.project-card .btn-wrap{
  margin-top: auto !important;          /* ✅ key: push to bottom */
  padding-top: 14px !important;
  display: flex !important;
  justify-content: center !important;
}

.btn-wrap .btn{
  background-color: var(--brand-2);
  color: var(--brand);
  font-weight: bold;
  border: 1px solid var(--brand-2);
}

/* ✅ remove underline on any state */
a.project-card,
a.project-card:hover,
a.project-card:focus,
a.project-card:active{
  text-decoration: none !important;
  color: inherit !important;
  outline: 0 !important;
}
a.project-card *{ text-decoration: none !important; }

/* responsive */
@media (max-width: 1200px){
  :root{ --card-w: 320px; }
  .project-card .title{ font-size: 20px; }
}
@media (max-width: 768px){
  :root{ --card-w: 280px; --gap: 18px; }
  .project-card .thumb{ height: 180px; }
  .project-card .title{ font-size: 18px; }
}
@media (max-width: 480px){
  :root{ --card-w: 240px; }
  .project-card .thumb{ height: 165px; }
  .project-card .info{ padding: 14px 14px 16px !important; }
}
/* ====== FIX EMPTY GAP ISSUE ====== */

/* marquee container */
.marquee-row{
  overflow: hidden;
}

/* track must be long enough */
.marquee-row .track{
  display: flex;
  width: fit-content;          /* 🔥 max-content বাদ */
  animation-duration: 35s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* slide group */
.slide{
  display: flex;
  gap: var(--gap);
  flex-shrink: 0;              /* 🔥 shrink হতে দিবে না */
}

/* RTL */
.marquee-row[data-direction="rtl"] .track{
  animation-name: marquee-rtl;
}

/* LTR */
.marquee-row[data-direction="ltr"] .track{
  animation-name: marquee-ltr;
}

/* animations */
@keyframes marquee-rtl{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-ltr{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* hover pause */
.marquee-row:hover .track{
  animation-play-state: paused;
}
.slide{
  min-width: calc((var(--card-w) + var(--gap)) * 4);
}
#scrollTopBtn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(10px);
  transition: all .25s ease;
}

#scrollTopBtn.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


#scrollTopBtn img{
  width: 60px;
  height: auto;
  display: block;
}

.about-hero__bg .chevrons-image{
  width: 100%;
  height: 100%;
  display: block;

  /* ✅ পুরো ইমেজটা দেখাবে (crop হবে না) */
  object-fit: cover;
  object-position: center;

  /* ✅ scroll এ jitter/flash কমায় */
  transform: translateZ(0);
}
.about-hero {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.footer-short-text {
    text-align: left !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.6;
    margin: 0;
    font-size: 18px;
}

/* Mobile responsive */
@media (max-width: 575px) {
    .footer-short-text {
        font-size: 15px;
        line-height: 1.5;
    }
}


/* Subscribe box right side bottom */
.jp-subscribe {
    grid-column: 3 / 6;
    
    
    border-radius: 0;
    
    color: #fff;
}

.jp-subscribe h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}

.jp-subscribe p {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.5;
    color: #fff;
}

.subscribe-form {
    display: flex;
    align-items: center;
    gap: 14px;
}

.subscribe-form input {
    flex: 1;
    height: 56px;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 0 20px;
    font-size: 18px;
    color: #222;
    background: #fff;
}

.subscribe-form button {
    height: 56px;
    border: none;
    border-radius: 999px;
    padding: 0 34px;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.subscribe-form button:hover {
    background: #24369a;
}

.jp-bottom {
    width: min(1650px, 92%);
    margin: 48px auto 0;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 35px;
    color: #fff;
}

.jp-copy {
    white-space: nowrap;
    font-size: 20px;
}

.jp-legal {
    max-width: 1250px;
    font-size: 16px;
    line-height: 1.6;
}

.contact-item{
  color: #fff;
}


.joprobas-insight-text {
    color: white;
    font-weight: bold;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    text-align: right;
    line-height: 1.5;
    margin: 0;
}

/* Mobile */
@media (max-width: 767px) {
    .joprobas-insight-text {
        text-align: left;
        font-size: 15px;
        line-height: 1.45;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    flex-wrap: wrap;
    line-height: 1.3;
}

.eyebrow-icon {
    width: clamp(30px, 3.5vw, 50px);
    height: clamp(30px, 3.5vw, 50px);
    object-fit: contain;
    flex-shrink: 0;
}

.eyebrow-bootstrap-icon {
    font-size: clamp(30px, 2.5vw, 50px);
    flex-shrink: 0;
}

.eyebrow-text {
    word-break: break-word;
}

@media (max-width: 576px) {
    .eyebrow {
        gap: 8px;
        justify-content: center;
        text-align: center;
    }

    .eyebrow-icon {
        width: 32px;
        height: 32px;
    }

    .eyebrow-bootstrap-icon {
        font-size: 32px;
    }
}