body {
       font-family: "Roboto", sans-serif;
      background-color: #f7f9f7;
    }

    /* Header overlay style */
    .navbar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      background: rgba(255,255,255,0.95);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      border-radius: 10px;
      margin-top:0px;
    }

    .navbar-brand img {
      height: 55px;
    }
    .navbar-nav .nav-link {
      font-weight: 600;
      color: #000;
      padding: 0.9rem 1rem;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: #0EA35C;
    }


    .navbar-box{
        background: #FFFFFFDF;
        border-radius: 10px;
        box-shadow: 0px 2px 10px rgba(0,0,0,0.15);
    }



    .lang-btn {
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      font-weight: 600;
      padding: 0.4rem 0.7rem;
    }
    .btn-donate {
      background: #0EA35C;
      color: #fff;
      font-weight: 600;
      border-radius: 6px;
      padding: 0.5rem 1.2rem;
    }
    .btn-donate:hover {
      background: #0b7d47;
      color: #fff;
    }


.bg-purple { background-color: #7B1FA2; }
  .border-purple { border-color: #7B1FA2 !important; }

  .join-card {
    border: 2px dashed;
    border-radius: 25px;
    padding: 6px;
    transition: all 0.3s ease;
  }

  .join-inner {
    border-radius: 20px;
    padding: 45px 10px;
    transition: all 0.3s ease;
  }

  a .join-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }

  a {
    color: inherit;
  }

  .photo-item {
    overflow: hidden;
    border-radius: 20px;
  }
  .photo-item img {
    transition: all 0.4s ease-in-out;
  }
  .photo-item:hover img {
    transform: scale(1.08);
    filter: brightness(0.7);
  }
  .photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    border-radius: 20px;
  }
  .photo-item:hover .photo-overlay {
    opacity: 1;
  }

   .blog-card {
    transition: all 0.3s ease-in-out;
  }
  .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }
  .card-img-top {
    height: 220px;
    object-fit: cover;
  }

  /* Pattern overlay (use your uploaded background image) */
  .pattern-overlay {
    background-image: url('ab28b5e1-5e9c-4db7-914a-e1a97ebb29a5.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: 1;
  }

  .newsletter-box {
    border-radius: 8px;
    overflow: hidden;
  }

  .newsletter-box input::placeholder {
    color: #666;
  }

  .newsletter-box input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
  }

  footer a:hover {
    color: #FFC107 !important;
  }

  footer i:hover {
    color: #FFC107;
  }


  .account{
    border: 1px solid #FFC107;
    background-color: #F8DE9E;
  }
 .account:hover{
    border: 1px solid #FFC107;
    background-color: #c59e3d;
  }

.lang-switch {
    display: flex;
    padding:0px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lang-btnbn {
    border: none;
    text-decoration: none;
    padding: 6px 18px;
    font-size: 15px;
    background: transparent;
    border-radius: 8px 0px 0px 8px;
    cursor: pointer;
    font-weight: 600;
    color: #000;
    transition: .2s;
}

.lang-btnen {
    border: none;
    padding: 6px 18px;
    font-size: 15px;
    background: transparent;
    border-radius: 0px 8px 8px 0px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    transition: .2s;
}

.lang-btnbn.active {
    background: #C8E8D6; /* আপনার screenshot এর মতো হালকা সবুজ */
    color: #000;
}

.lang-btnbn:hover:not(.active) {
    background: #f2f2f2;
}

.lang-btnen.active {
    background: #C8E8D6; /* আপনার screenshot এর মতো হালকা সবুজ */
    color: #000;
}

.lang-btnen:hover:not(.active) {
    background: #f2f2f2;
}

/* Main navbar box */


.navbar-box {
    max-width: 1500px;   /* 👈 left-right gap control */
    margin: 0 auto;      /* center */
    padding-left: 40px !important;
    padding-right: 40px !important;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
}
@media (max-width: 1200px) {
    .navbar-box {
        max-width: 100%;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}