.border-red-500 {
    border-color: rgb(239 68 68 / 1);
}
.text-red-800 {
    color: rgb(153 27 27 / 1);
}
.border-red-400 {
    border-color: rgb(248 113 113 / 1);
}
.bg-red-50 {
    background-color: rgb(254 242 242 / 1);
}
.text-pink-300 {
    color: rgb(249 168 212 / 1);
}
    body {
      font-family: 'Tiro Bangla', sans-serif;
    }


/* Optional: prevent any AOS transformed elements from breaking viewport */
[data-aos] {
  max-width: 100%;
  box-sizing: border-box;
}

    /* Typography */
    body {
      font-family: 'Noto Serif Bengali', serif;
      font-size: 1rem;
      color: #333;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Noto Serif Bengali', serif;
    }

    /* Notice Marquee */
    @keyframes marquee {
      0% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .animate-marquee {
      animation: marquee 100s linear infinite;
    }

    /* Nav Hover Animation */
    nav a {
      position: relative;
      transition: color 0.3s ease;
    }

    nav a::after {
      content: "";
      position: absolute;
      width: 0%;
      height: 2px;
      left: 0;
      bottom: -4px;
      background: #165d36;
      transition: width 0.3s ease;
    }

    nav a:hover::after {
      width: 100%;
    }

    /* Dropdown animation */
    .dropdown-menu {
      transform: translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .group:hover .dropdown-menu {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }

    /* Mobile menu animation */
    #mobileMenu {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-height: calc(100vh - 72px);
      max-height: calc(100dvh - 72px);
      transition: max-height 0.4s ease;
    }

    /* Prevent page-level horizontal scrolling from wide/transformed content.
       Applied to the root only so body never becomes a second scroller. */
    html {
      overflow-x: hidden;
    }
    @media (max-width: 1024px) {
        .mhide{
            display:none;
        }
        html, body {
          max-width: 100%;
        }
    }
    /* The full menu is ~770px wide, so show it only where it fits and keep
       the hamburger on tablets (same 1024px boundary as .mhide). */
    @media (max-width: 1023.98px) {
      .nav-desktop { display: none !important; }
      .nav-toggle { display: block !important; }
    }
    .top_btn{
        border-radius:3px;
    }
    .top_btn:hover{
        color:rgb(15 118 110 / var(--tw-bg-opacity, 1));
        background:#fff;
        cursor:pointer;
    }
     .head_nav {
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .head_nav.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 8px 22px -12px rgba(15,23,42,.55);
        z-index: 999;
        animation: navDrop 0.32s ease;
      }
      /* Add .stop_sticky_nav on <body> to disable the pinned nav */
      body.stop_sticky_nav .head_nav.sticky {
        position: static;
        animation: none;
        box-shadow: none;
      }
      @keyframes navDrop {
        from { transform: translateY(-100%); }
        to   { transform: translateY(0); }
      }
      nav button{
        background: transparent;
      }
  

/* ============================================================
   Gallery page — all rules scoped with the .gl- prefix
   (grid tiles + lightbox). No Tailwind utilities used.
   ============================================================ */
.gl-section,
.gl-section *,
.gl-lightbox,
.gl-lightbox *{ box-sizing: border-box; }

.gl-section{
    background: #f1f5f9;
    padding: 48px 0 56px;
    font-family: 'Noto Serif Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
}

.gl-wrap{
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- Grid ---- */
.projects-grid-wrap.gl-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.gl-grid > *{ min-width: 0; }

/* ---- Uniform tile ---- */
.gl-tile{
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1),
                box-shadow .35s ease,
                border-color .35s ease;
}

.gl-tile:hover,
.gl-tile:focus-within{
    transform: translateY(-4px);
    border-color: #99f6e4;
    box-shadow: 0 20px 34px -20px rgba(15, 23, 42, .45);
}

.gl-tile-link{
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    line-height: 0;
    background: #e2e8f0;
}

.projects-grid-image{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #e2e8f0;
    transform: scale(1.001);
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.gl-tile:hover .projects-grid-image,
.gl-tile:focus-within .projects-grid-image{ transform: scale(1.08); }

.gl-tile-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(15, 118, 110, .06) 0%, rgba(15, 23, 42, .62) 100%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.gl-tile:hover .gl-tile-overlay,
.gl-tile:focus-within .gl-tile-overlay{ opacity: 1; }

.gl-tile-badge{
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #165d36;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 26px -10px rgba(15, 23, 42, .7),
                0 0 0 1px rgba(22,123,67, .35);
    transform: translateY(8px) scale(.9);
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.gl-tile:hover .gl-tile-badge,
.gl-tile:focus-within .gl-tile-badge{ transform: translateY(0) scale(1); }

.gl-tile-badge svg{ width: 24px; height: 24px; display: block; }

/* ---- Lightbox ---- */
.gl-lightbox{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 68px 16px 60px;
    background: rgba(15, 23, 42, .93);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.gl-lightbox.active{ display: flex; }

.gl-lb-content{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 1080px;
}

.gl-lb-content img{
    display: block;
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #0f172a;
    box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .8);
}

.gl-lightbox .image-counter{
    font-family: 'Noto Serif Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .04em;
    color: #e2e8f0;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.gl-lightbox .close-btn,
.gl-lightbox .nav-btn{
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(15, 23, 42, .58);
    color: #f1f5f9;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease,
                color .25s ease, transform .25s ease;
    -webkit-tap-highlight-color: transparent;
}

.gl-lightbox .close-btn:hover,
.gl-lightbox .nav-btn:hover{
    background: #167b43;
    border-color: #239653;
    color: #ffffff;
}

.gl-lightbox .close-btn:focus-visible,
.gl-lightbox .nav-btn:focus-visible{
    outline: 2px solid #239653;
    outline-offset: 2px;
}

.gl-lightbox .close-btn svg{ width: 20px; height: 20px; display: block; }
.gl-lightbox .nav-btn svg{ width: 22px; height: 22px; display: block; }

.gl-lightbox .close-btn{ top: 18px; right: 18px; }
.gl-lightbox .prev-btn{ left: 18px; top: 50%; transform: translateY(-50%); }
.gl-lightbox .next-btn{ right: 18px; top: 50%; transform: translateY(-50%); }

.gl-lightbox .prev-btn:hover,
.gl-lightbox .next-btn:hover{ transform: translateY(-50%) scale(1.06); }

/* ---- Small screens ---- */
@media (max-width: 560px){
    .gl-section{ padding: 32px 0 40px; }
    .gl-wrap{ padding: 0 14px; }

    .projects-grid-wrap.gl-grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .projects-grid-image{ aspect-ratio: 3 / 2; }

    .gl-tile:hover{ transform: none; }

    /* Touch devices have no hover: keep the affordance visible */
    .gl-tile-overlay{
        opacity: 1;
        background: linear-gradient(180deg, rgba(15, 118, 110, 0) 42%, rgba(15, 23, 42, .58) 100%);
    }
    .gl-tile-badge{
        width: 46px;
        height: 46px;
        transform: none;
    }
    .gl-tile-badge svg{ width: 21px; height: 21px; }
    .gl-tile:hover .projects-grid-image,
    .gl-tile:focus-within .projects-grid-image{ transform: none; }

    .gl-lightbox{ padding: 58px 10px 76px; }
    .gl-lightbox .close-btn{ top: 10px; right: 10px; width: 40px; height: 40px; }
    .gl-lightbox .nav-btn{
        width: 40px;
        height: 40px;
        top: auto;
        bottom: 14px;
        transform: none;
    }
    .gl-lightbox .prev-btn{ left: 10px; }
    .gl-lightbox .next-btn{ right: 10px; }
    .gl-lightbox .prev-btn:hover,
    .gl-lightbox .next-btn:hover{ transform: scale(1.05); }

    .gl-lb-content{ gap: 10px; }
    .gl-lb-content img{ max-height: 60vh; border-radius: 10px; }
    .gl-lightbox .image-counter{ font-size: 13px; padding: 6px 13px; }
}

@media (prefers-reduced-motion: reduce){
    .gl-tile,
    .projects-grid-image,
    .gl-tile-overlay,
    .gl-tile-badge,
    .gl-lightbox .close-btn,
    .gl-lightbox .nav-btn{ transition: none; }
    .gl-tile:hover{ transform: none; }
    .gl-tile:hover .projects-grid-image,
    .gl-tile:focus-within .projects-grid-image{ transform: none; }
}


.site-footer{
  --ft-panel:#122036;--ft-line:rgba(255,255,255,.10);
  --ft-text:#a9b8c9;--ft-head:#ffffff;--ft-teal:#2dd4bf;
  position:relative;
  background:linear-gradient(180deg,#0b1a2b 0%,#0a1420 100%);
  color:var(--ft-text);
  font-family:'Noto Serif Bengali',serif;
}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#165d36,#2dd4bf);}
.site-footer *{box-sizing:border-box;}
.ft-container{width:100%;max-width:1120px;margin-inline:auto;padding-inline:22px;}

/* Logo | links | contact | Facebook (small box), spaced across the row */
.ft-main{display:grid;grid-template-columns:minmax(0,345px) minmax(0,160px) minmax(0,190px) minmax(0,235px);justify-content:space-between;gap:34px;align-items:start;padding:58px 0 44px;}
@media (max-width:980px){
  .ft-main{grid-template-columns:1fr 1fr;justify-content:start;gap:34px;padding:46px 0 36px;}
  .ft-fb-col{grid-column:1 / -1;}
}
@media (max-width:560px){
  .ft-main{grid-template-columns:1fr;gap:30px;padding:40px 0 30px;}
  .ft-fb-col{grid-column:auto;}
}

.ft-brand .ft-logo{height:72px;width:auto;margin-bottom:16px;display:block;}
.ft-about{line-height:1.9;font-size:.9rem;color:var(--ft-text);margin:0;}

.ft-title{font-size:1rem;font-weight:700;color:var(--ft-head);margin:0 0 20px;position:relative;padding-bottom:12px;}
.ft-title::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ft-teal),#165d36);}

.ft-links{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.ft-links a{color:var(--ft-text);text-decoration:none;font-size:.94rem;transition:color .18s,padding-left .18s;}
.ft-links a:hover{color:var(--ft-teal);padding-left:5px;}
.ft-contact{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.ft-contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.6;font-size:.9rem;}
.ft-contact svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--ft-teal);}
.ft-contact a{color:var(--ft-text);text-decoration:none;word-break:break-word;transition:color .18s;}
.ft-contact a:hover{color:var(--ft-teal);}

.ft-fb{border:1px solid var(--ft-line);border-radius:14px;overflow:hidden;background:var(--ft-panel);}
.fb-frame-wrapper{position:relative;height:210px;overflow:hidden;}
.fb-frame-wrapper > *{position:absolute;inset:0;width:100%;height:100%;border:0;}
.fb-placeholder{display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.9rem;}
@media (max-width:560px){.fb-frame-wrapper{height:200px;}}

.ft-bottom{border-top:1px solid var(--ft-line);padding:24px 0;}
.ft-bottom__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.ft-bottom p{margin:0;font-size:.88rem;color:var(--ft-text);}
.ft-bottom__links{display:flex;gap:24px;flex-wrap:wrap;}
.ft-bottom__links a{color:var(--ft-text);text-decoration:none;font-size:.88rem;transition:.18s;}
.ft-bottom__links a:hover{color:var(--ft-teal);}
@media (max-width:560px){.ft-bottom__inner{flex-direction:column;align-items:flex-start;}}