/* header on top so icons stay clickable */
.top-header{ position:relative; z-index:9999; }
.header-right{ position:relative; }

/* base look */
.social-icons{
  display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0;
}

.social-icons a{
  color:#fff; text-decoration:none; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, opacity .2s ease, background-color .2s ease;
  pointer-events:auto; position:relative; z-index:2;
  font-size:20px; /* icon size */
}

/* hover effect */
.social-icons a:hover{ transform:translateY(-1px); opacity:.92 }

/* 🟢 Twitter = circle with light bg + dark icon */
.social-icons a.circle{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.85); color:#111;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* ⬜ Flickr/YouTube = small rounded white box */
.social-icons a.whitebox{
  height:28px; padding:0 8px;
  background:#fff; color:#0c614b; border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

/* prevent overlap from below */
.vc-wrap, .vc-video, .ratio, .ratio iframe{ position:relative; z-index:1; }

 :root{
      --brand:#0c614b;
      --accent:#d82b4a;
      --text:#222;
      --muted:#555;
      --bg:#f0f2f5;
      --card:#fff;
      --radius:12px;
      --maxw:1200px;
    }
    /* *{box-sizing:border-box}
    body{
      margin:0;background:var(--bg);color:var(--text);
      font-family:'Poppins',sans-serif;
      -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    } */
    img{max-width:100%;height:auto;display:block}

    /* Top Header */
    .top-header{background:var(--brand);color:#fff; margin-top: -19p;}
    .header-content{
      max-width:var(--maxw);margin:0 auto;padding:10px 16px;
      display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
      font-size:clamp(12px,2.4vw,14px);
    }
    .header-left,.header-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
    .header-left a{color:#fff;text-decoration:none;font-weight:700}
    .social-icons{display:flex;gap:10px;list-style:none;margin:0;padding:0}
    .social-icons a{color:#fff;opacity:.95}
    .social-icons a:hover{opacity:.8}

    /* Main layout */
    .main{
      max-width:var(--maxw);margin:24px auto;padding:16px;
      display:grid;grid-template-columns:1.1fr .9fr;gap:28px;
    }
    .logo{font-family:'Oswald',sans-serif;color:#5d3599;font-weight:700;font-size:clamp(24px,4vw,32px);margin:10px 0 8px}
    .heading{font-family:'Oswald',sans-serif;font-size:clamp(22px,5vw,36px);line-height:1.2;margin:8px 0 12px; margin-left: 42px;}
    .text{color:var(--muted);line-height:1.7;font-size:clamp(14px,2.8vw,16px)}
    .ebook{margin-top:16px}
    .ebook img{border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.08)}

    .card{
      background:var(--card);border-radius:var(--radius);overflow:hidden;
      box-shadow:0 10px 24px rgba(0,0,0,.08);
    }
    
    .card-head{
      background:rgb(232, 70, 12);color:#fff;text-align:center;
      font-family:'Oswald',sans-serif;font-weight:700;
      font-size:clamp(16px,4.5vw,24px);padding:16px 12px;
    }
    .form-area{padding:18px 16px 22px}
    .form-note{font-size:12px;color:var(--muted);margin:0 0 10px}
    .group{margin:12px 0 16px;position:relative}
    /* Labels must start from the very left */
.group label{
  display:block;
  margin: 0 0 6px 0 !important;   /* no left gap */
  padding: 0 !important;
  font-weight:600;
  color:#111;
  font-size:clamp(13px,3.2vw,15px);
  text-align:left !important;      /* cancel any centered parent */
  text-indent:0 !important;        /* remove any indent */
  align-self:flex-start !important;/* if parent is flex */
}

/* If the .group wrapper is flex/grid and centering children, force left/start */
.group{
  text-align:left !important;
  justify-items:start !important;   /* for CSS Grid parents */
  align-items:flex-start !important;/* for Flex parents */
}

    .group label span{color:var(--accent)}
    .group input{
      width:100%;padding:12px 14px;border:1px solid #d7d7d7;border-radius:8px;
      font-size:clamp(14px,3.2vw,16px);transition:border-color .2s, box-shadow .2s;outline:none;background:#fff;
    }
    .group input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(12,97,75,.12)}
    .group input.invalid{border-color:var(--accent)}
    .group input.valid{
      border:2px solid #28a745;
      background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%2328a745"/><path d="M9.3 12.9l-1.9-1.9-1.4 1.4 3.3 3.3 7-7-1.4-1.4-5.6 5.6z" fill="white"/></svg>');
      background-repeat:no-repeat;background-position:right 10px center;background-size:20px;padding-right:42px;
    }
    .error{display:none;color:var(--accent);font-size:12px;margin-top:6px}

    .btn{
      display:block;width:100%;background:#000;color:#fff;padding:12px 18px;border:0;border-radius:8px;
      font-weight:700;font-size:clamp(14px,3.6vw,17px);letter-spacing:2px;cursor:pointer;transition:opacity .2s, transform .05s;margin-top:6px;
    }
    .btn:hover{opacity:.92}
    .btn:active{transform:translateY(1px)}
    .btn:disabled{opacity:.6;cursor:not-allowed}
    .btn.loading{position:relative}
    .btn.loading::after{
      content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);
      width:14px;height:14px;border-radius:50%;border:2px solid #fff;border-top-color:transparent;animation:spin .9s linear infinite;
    }
    @keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

    /* Bottom bar – perfectly centered */
    .bottom-bar{
      background:#0b4f1f;color:#fff;margin:28px 0 0;
      display:flex;align-items:center;justify-content:center; /* center both ways */
      text-align:center;min-height:56px; /* height নিশ্চিত */
      padding:0 12px;font-weight:700;font-size:clamp(14px,3.6vw,18px);
      box-shadow:0 -2px 0 rgba(0,0,0,.02) inset;
    }

    .section{
      max-width:var(--maxw);margin:0 auto 28px;padding:0 16px;color:#000;
      font-size:clamp(14px,2.8vw,15px);line-height:1.8;text-align:justify;
      margin-top: 43px;
   
    }
    .subscribe{text-align:center;margin-top:16px}
    .subscribe img{display:inline-block;border-radius:8px; margin-top: -50px;}

    /* Responsive */
    @media (max-width: 992px){
      .main{grid-template-columns:1fr;gap:18px;margin:18px auto}
      .card{order:-1} /* মোবাইলে ফর্ম আগে */
    }
    @media (max-width: 600px){
      .form-area{padding:14px}
      .header-content{gap:8px}
      .header-left span{flex:1 1 100%}
    }    .e-font-icon-svg {
  width: 40px;
  height: 40px;
}
  .container {
  display: flex;
  justify-content: center; /* จัดกึ่งกลางในแนวนอน */
}

/* ถ้าคุณต้องการจัดกึ่งกลาง div ตัวมันเองโดยไม่ต้องมี div แม่ */
.logo {
  display: flex;
  justify-content: center;
}
.services-section {
  background: #ffffff;   /* ব্যাকগ্রাউন্ড */
         /* সবসময় ফুল width */
  padding: 0;
  margin: 0;
  overflow-x: hidden;    /* ✅ হরিজন্টাল স্ক্রল আটকাবে */

}

.services-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ডেস্কটপে ৩ কলাম */
  gap: 16px;
  background: #fff;
  max-width: 100%;       /* ✅ grid বাইরে যাবে না */
  box-sizing: border-box;
}



/* ইমেজ হলে */
.services-container img {
  max-width: 100%;       /* ✅ ছবিগুলো responsive */
  height: auto;
  display: block;
}

/* ট্যাবলেট (<=1024px): ২ কলাম */
.services-section {
  background: #ffffff;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;  /* ✅ scroll বন্ধ */
}

.services-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ডেস্কটপে 3 কলাম */
  gap: 16px;
  background: #fff;
  max-width: 100%;        /* ✅ বাইরে যাবে না */
  box-sizing: border-box;
}

.services-container > * {
  width: 100%;            /* ✅ প্রতিটা card full কলামে fit হবে */
  max-width: 100%;
  box-sizing: border-box;
}

/* ট্যাবলেট (<=1024px): ২ কলাম */
@media (max-width: 1024px) {
  .services-container {
    grid-template-columns: repeat(2, 1fr);
    overflow-x: hidden;   /* ✅ horizontal scroll বন্ধ */
  }
}

/* মোবাইল (<=768px): ১ কলাম */
@media (max-width: 768px) {
  .services-container {
    grid-template-columns: 1fr;
    overflow-x: hidden;   /* ✅ horizontal scroll বন্ধ */
  }
}


/* মোবাইল (<=768px): ১ কলাম */
@media (max-width: 768px) {
  .services-container {
    grid-template-columns: 1fr;
  }
}



.service-box {
  padding: 30px 15px;
  text-align: center;
  border: 1px solid #ddd; /* আইটেমের মাঝে বর্ডার দিলে স্পষ্ট হবে */
}

.service-box h3 {
  color: #155c3b;
  margin: 10px 0;
  font-weight: 700;
}

.service-box p {
  margin: 0;
}
@media (max-width: 768px) {
  .services-container {
    grid-template-columns: 1fr 1fr; /* ছোট স্ক্রিনে ২ কলাম */
  }
}
@media (max-width: 480px) {
  .services-container {
    grid-template-columns: 1fr; /* মোবাইলে ১ কলাম */
  }
}
.vc-wrap{
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
  }
  .vc-video{
    background:#111;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0px 0px rgba(0,0,0,.15);
    padding: 0px;
  }
  .ratio{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background:#000;
    border-radius: 6px;
    overflow: hidden;
  }
  .ratio iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
  }
  .vc-widget{
    background:#2f69b2;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    overflow: hidden;
    min-height: 420px;
  }
  .vc-widget iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
  }
  @media (max-width: 992px){
    .vc-wrap{
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .vc-widget{ min-height: 480px; }
    .vc-widget iframe{ min-height: 480px; }
  }
  :root{
    --brand:#155c3b;
    --ink:#121212;
    --muted:#2b2b2b;
    --page:#f3f5f4;
    --radius:4px;
  }

  /* *,*::before,*::after{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height:1.8;
    background:var(--page);
    color:var(--ink);
  } */

  .hero-wrap{
    max-width:1360px;
    margin:0 auto;
    padding:24px 18px 0; /* less top padding */
  }
  .hero{
    background:var(--brand);
    color:#fff;
    text-align:center;
    padding:7px 7px; /* reduced height */
    border-radius:var(--radius);
  }
  .hero h1{
    margin:0;
    font-weight:800;
    font-size:clamp(18px, 2.2vw, 28px); /* smaller font size */
    letter-spacing:.3px;
  }

  .content{
    max-width:1220px;
    margin:20px auto 70px;
    padding:0 18px;
  }
  p{
    margin:0 0 20px;
    font-size:clamp(15px, 1.35vw, 19px);
    color:var(--muted);
    margin-left: 31px;
  }
  strong{ color:#000; font-weight:800; }
  :root{
    --green:#155c3b;     /* ribbon + accents */
    --ink:#0f172a;       /* main text */
    --muted:#334155;     /* paragraph text */
    --red:#df1e1e;       /* BENEFITS OF */
    --badge:#0e6247;     /* green badge under image */
    --border:#e5e7eb;
    --maxw:1240px;
  }
  /* *{box-sizing:border-box}
  body{margin:0;background:#fff;color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} */

  /* Top green ribbon */
  .ribbon{
    background:var(--green); color:#fff; margin:24px auto 18px;
    max-width:190px; border-radius:4px; padding:10px 14px; 
  
  }
  .ribbon h1{
    margin:0; text-align:center; letter-spacing:.3px;
    font-family:Oswald,sans-serif; font-weight:800;
    font-size:clamp(18px,2.2vw,28px); line-height:1.2;
  
  }

  /* Two-column area */
  .benefits-wrap{
    max-width:var(--maxw); margin:0 auto 26px; padding:0 16px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start;
  }

  /* Left list */
  .benefits{
    border:1px solid var(--border); border-radius:6px; padding:18px 18px;
  }
  .benefits ul{ list-style:none; margin:0; padding:0 }
  .benefits li{
    position:relative; margin:16px 0; line-height:1.8; color:var(--muted); font-size:16px;
  }
  .benefits li:first-child{ margin-top:0 }
  .benefits li::before{
    content:""; width:7px; height:7px; border-radius:50%; background:var(--green);
    position:absolute; left:-14px; top:.8em;
  }
  .benefits b{ color:#000; font-weight:800 }

  /* Right image + callout */
  .visual figure{ margin:0; border:1px solid var(--border); border-radius:6px; overflow:hidden }
  .visual img{ display:block; width:100%; height:auto }
  .callout{
    margin-top:14px; border:1px solid var(--border); border-radius:6px; overflow:hidden;
  }
  .callout .title{
    background:#fff; text-align:center; padding:12px 10px;
    color:var(--red); font-weight:900; letter-spacing:.5px; font-size:22px;
  }
  .badge{
    background:var(--badge); text-align:center; padding:16px 12px;
  }
  .badge span{
    display:inline-block; color:#fff; font-weight:800; letter-spacing:.6px;
    border-radius:6px; padding:10px 16px; font-size:22px;
    font-family:Oswald,sans-serif;
  }

  /* Responsive */
  @media (max-width: 980px){
    .benefits-wrap{ grid-template-columns:1fr; gap:18px }
  }
  :root{
    --green:#155c3b;    /* header ribbon + accents */
    --ink:#0f172a;      /* main text */
    --muted:#334155;    /* paragraph text */
    --red:#df1e1e;      /* red "ELIGIBILITY" */
    --badge:#0e6247;    /* green badge under red title */
    --border:#e5e7eb;
    --maxw:1240px;
  }
  /* *{box-sizing:border-box}
  body{margin:0;background:#fff;color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} */

  /* Top green ribbon */
  
  .elig-ribbon h1{
    margin:0; text-align:center; letter-spacing:.3px;
    font-family:Oswald,sans-serif; font-weight:800;
    font-size:clamp(18px,2.2vw,28px); line-height:1.2;
  }


  



  .elig-ribbon {
  background: var(--green);
  color: #fff;
 
  width: 190%;
             /* ✅ poora width le lega */
/*
  This combines and optimizes the styles for .ribbon, .elig-ribbon,
  and .header-bar to ensure they take up the full viewport width
  without any gaps, regardless of the screen size.
*/
.header-bar,
.ribbon,
.elig-ribbon {
  /* Take up the full width of the viewport */
  width: 100vw;
  position: relative; /* ছদ্ম-উপাদানকে সঠিকভাবে অবস্থান করতে সাহায্য করবে */
  left: 0; /* নিশ্চিত করবে যে এটি বাম প্রান্ত থেকে শুরু হবে */
}

.header-bar::after,
.ribbon::after,
.elig-ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 90vw; /* আপনি যতখানি প্রস্থ বাড়াতে চান, তার মান এখানে নির্ধারণ করুন */
  height: 100%;
  background: var(--green); /* আপনার পছন্দসই রং ব্যবহার করুন */
  z-index: -1;


  /* Use a negative left margin to pull the element to the edge.
     This counteracts any default padding on the body or parent container. */
  margin-left: calc(50% -90vw);
  margin-right: calc(50% - 50vw);

  /* Set padding to 0 on the sides to remove internal gaps.
     You can adjust the top/bottom padding as needed. */
  padding-left: 0;
  padding-right: 0;

  /* Remove border-radius to ensure sharp corners that touch the screen edges */
  border-radius: 0;

  /* Ensure the body has no default margin or padding */
  box-sizing: border-box;
}

/* Ensure body has no margin or padding to start with */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrollbar from the negative margin */
}
.full-width {

}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* ✅ scroll bar chara fit hobe */
}
.container, .wrap, .elig-wrap {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Style for the text inside the headings */
.header-bar,
.ribbon h1,
.elig-ribbon h1 {
  /* Ensure the text itself is centered and has some internal padding
     to look good, while the background is full-width. */
  padding: 20px; /* Adjust as needed */
  text-align: center;
}  border-radius: 0;      /* ✅ white corner gap avoid */
  padding: 10px 10px;
  text-align: center;    /* text center aligned rahega */
}


  /* Two-column area */
  /* .elig-wrap{
    max-width:var(--maxw); margin:0 auto 26px; padding:0 16px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start;
  } */

  /* Left heading + list */
  .elig-left h2{
    margin:0 0 8px 0; font-size:18px; font-weight:800; color:#000;
  }
  .elig-list{
    border:1px solid var(--border); border-radius:6px; padding:18px 18px;
  }
  .elig-list ul{ list-style:none; margin:0; padding:0 }
  .elig-list li{
    position:relative; margin:16px 0; line-height:1.8; color:var(--muted); font-size:16px;
  }
  .elig-list li:first-child{ margin-top:0 }
  .elig-list li::before{
    content:""; width:7px; height:7px; border-radius:50%; background:var(--green);
    position:absolute; left:-14px; top:.8em;
  }
  .elig-list b{ color:#000; font-weight:800 }

  /* Right image + red/green callout */
  .elig-visual figure{ margin:0; border:1px solid var(--border); border-radius:6px; overflow:hidden }
  .elig-visual img{ display:block; width:100%; height:auto }
  .elig-callout{
    margin-top:14px; border:1px solid var(--border); border-radius:6px; overflow:hidden;
  }
  .elig-callout .title{
    background:#fff; text-align:center; padding:12px 10px;
    color:var(--red); font-weight:900; letter-spacing:.5px; font-size:22px;
  }
  .elig-badge{
    background:var(--badge); text-align:center; padding:16px 12px;
  }
  .elig-badge span{
    display:inline-block; color:#fff; font-weight:800; letter-spacing:.6px;
    border-radius:6px; padding:10px 16px; font-size:22px;
    font-family:Oswald,sans-serif;
  }

  /* Responsive */
  @media (max-width: 980px){
    .elig-wrap{ grid-template-columns:1fr; gap:18px }
  }
  :root{
    --green:#155c3b;   /* header ribbon + accents */
    --ink:#0f172a;     /* main text */
    --muted:#334155;   /* paragraph text */
    --red:#df1e1e;     /* red callout title */
    --badge:#0e6247;   /* green badge */
    --border:#e5e7eb;
    --maxw:1240px;
  }
  /* *{box-sizing:border-box}
  body{margin:0;background:#fff;color:var(--ink);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} */

  /* Top green ribbon */
  .ribbon{
    background:var(--green); color:#fff; margin:24px auto 18px;
    max-width:var(--maxw); border-radius:4px; padding:10px 14px;
    margin-left: 20px;
  }
  .ribbon {
  text-align: center;
}

  .ribbon h1{
    margin:0; text-align:center; letter-spacing:.3px;
    font-family:Oswald,sans-serif; font-weight:800;
    font-size:clamp(18px,2.2vw,28px); line-height:1.2;
   
  }

  /* Two-column area */
  .wrap{
    max-width:var(--maxw); margin:0 auto 26px; padding:0 16px;
    display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start;
  }

  /* Left: heading + steps */

 
/* ==== Mobile-friendly Steps box ==== */
.steps{
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  /* fluid padding + full width */
  padding: clamp(12px, 3.5vw, 18px);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* inside text */
.steps p{
  margin:0 0 12px;
  font-size: clamp(14px, 3.8vw, 16px);
  line-height:1.65;
  text-align:left;                 /* মোবাইলে পড়তে সহজ */
  color:#111;
  word-break: break-word;          /* খুব লম্বা শব্দ/URL ভাঙবে */
  overflow-wrap:anywhere;
}
.steps p:last-child{ margin-bottom:0; }

/* “Step 1:” অংশটা জোড়া ধরে থাকবে */
.steps b, .steps strong{
  color:#000;
  font-weight:800;
  white-space:nowrap;              /* Step + নম্বর এক লাইনে */
  display:inline-block;
  margin-right:4px;
}

/* যদি তালিকা <ol>/<ul> হয়, বামের প্যাডিং কমাও */
.steps ol, .steps ul{ margin:0; padding-left:18px; }
@media (max-width:600px){
  .steps{ padding:12px; }
  .steps ol, .steps ul{ padding-left:16px; }
}

/* parent দুই-কলাম হলে মোবাইলে এক কলাম করে দাও */
@media (max-width:980px){
  .wrap, .benefits-wrap, .elig-wrap{ grid-template-columns:1fr !important; gap:16px; }
}
/* ==== Steps section: make it full width on mobile ==== */
@media (max-width: 980px){
  /* your two-column wrapper forces a blank right column — kill it on mobile */
  .wrap{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* make the left block (steps) span the full grid */
  .steps-left{ 
    grid-column: 1 / -1 !important;
  }

  /* (optional) যদি ডান পাশের ছবি/visual থাকে, মোবাইলে লুকাও */
  .visual{
    display: none !important;
  }

  /* ensure the card itself really fills the width */
  .steps{
    width: 100% !important;
    max-width: 100% !important;
  }
}


  /* Right: image + red/green callout */
  .visual figure{ margin:0; border:1px solid var(--border); border-radius:6px; overflow:hidden }
  .visual img{ display:block; width:100%; height:auto }
  .callout{ margin-top:14px; border:1px solid var(--border); border-radius:6px; overflow:hidden }
  .callout .title{
    background:#fff; text-align:center; padding:12px 10px;
    color:var(--red); font-weight:900; letter-spacing:.5px; font-size:22px;
  }
  .badge{ background:var(--badge); text-align:center; padding:16px 12px }
  .badge span{
    display:inline-block; color:#fff; font-weight:800; letter-spacing:.6px;
    border-radius:6px; padding:10px 16px; font-size:22px;
    font-family:Oswald,sans-serif;
  }

  /* Responsive */
  @media (max-width:980px){ .wrap{ grid-template-columns:1fr; gap:18px } }
      :root{
    --g1:#1fb25a;  /* light green */
    --g2:#0e5a37;  /* dark green */
    --bar:#155c3b; /* section bar */
  }
  /* *{box-sizing:border-box}
  body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#fff} */

  /* ===== Download Button (same-to-same) ===== */
  .cta{display:flex; justify-content:center; padding:22px 0}
  .dl-btn{
    position:relative;
    display:inline-flex; align-items:center; gap:16px;
    text-decoration:none; color:#fff; font-weight:800; letter-spacing:.6px;
    padding:16px 42px 16px 70px;              /* space for the circle on left */
    border-radius:999px;
    background:linear-gradient(180deg, var(--g1), var(--g2) 72%);
    box-shadow:0 4px 12px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
    font-family:Oswald, sans-serif;
    font-size:22px;
    transform:translateZ(0); /* crisp text */
  }
  .dl-btn:hover{ filter:brightness(1.05) }
  .dl-btn:active{ transform:translateY(1px) }

  /* Left glossy circle */
  .dl-icon{
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:54px; height:54px; border-radius:50%;
    background:
      radial-gradient(120% 120% at 30% 20%, #ffffffa8 0%, #ffffff33 38%, transparent 41%),
      radial-gradient(120% 120% at 70% 80%, #00000014 0%, #00000030 45%, transparent 60%),
      linear-gradient(180deg, #2bd06b, #0b5a36 75%);
    box-shadow:
      inset 0 0 0 2px #2c9d5a,
      0 4px 10px rgba(0,0,0,.25);
    display:grid; place-items:center;
  }
  /* White download/book icon (pure SVG) */
  .dl-icon svg{ width:26px; height:26px; display:block; }

  /* ===== Section Bar Heading ===== */
  .section-bar{
    max-width:1200px; margin:14px auto 0; padding:10px 12px;
    background:var(--bar); color:#fff; text-align:center;
    border-radius:4px; font-weight:800; font-family:Oswald, sans-serif;
    font-size:20px; letter-spacing:.3px;
  }

  /* Optional wrapper demo spacing */
  .wrap{max-width:1200px; margin:0 auto; padding:0 16px}
    :root{
    --green:
     #155c3b;   /* title + caret */
    --line:#e9ecef;    /* thin border */
  }
  /* *{box-sizing:border-box}
  body{margin:0; font-family:Arial,Helvetica,sans-serif; background:#fff} */

  /* grid */
  .college-list{
    max-width:1200px; margin:16px auto; padding:0 16px;
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
  }

  /* header row (matches screenshot) */
  .item{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; background:#fff;
    border:1px solid var(--line); border-radius:3px;
    color:var(--green); font-weight:600; font-size:14px;
    cursor:pointer; transition:background .15s ease;
  }
  .item:hover{ background:#f9fafb; }
  .item.open{ background:#f6fffa; } /* light green hint like screenshot */

  /* tiny green caret */
  .arrow{
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:7px solid var(--green);   /* ▼ */
    transition:transform .2s ease;
  }
  /* when open, point up */
  .item.open .arrow{ transform:rotate(180deg); }

  /* collapsible body */
  .panel{
    display:none;
    border:1px solid var(--line);
    border-top:none; background:#fff;
    padding:12px; font-size:14px; line-height:1.6; color:#222;
  }

  /* mobile */
  @media (max-width:700px){
    .college-list{ grid-template-columns:1fr; }
  }
   :root{
    --green:#0c614b;     /* title text + caret */
    --line:#e9ecef;      /* thin border */
    --body:#333;         /* paragraph text */
    --bg:#fff;
    --maxw:1200px;
  }
  /* *{box-sizing:border-box}
  body{margin:0; font-family:Arial, Helvetica, sans-serif; background:#fff; color:#111} */

  /* grid wrapper */
  .mc-list{
    max-width:var(--maxw); margin:18px auto; padding:0 16px;
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  @media (max-width: 820px){
    .mc-list{ grid-template-columns:1fr; }
  }

  /* header row (clickable) */
  .mc-head{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; background:#fff;
    border:1px solid var(--line); border-radius:3px;
    color:var(--green); font-weight:600; font-size:14px;
    cursor:pointer; user-select:none;
  }
  .mc-head:hover{ background:#f9fafb }
  .mc-head.mc-open{ background:#f6fffa} /* light green tint when open */

  /* tiny caret */
  .mc-arrow{
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:7px solid var(--green);   /* ▼ */
    transition:transform .2s ease;
  }
  .mc-head.mc-open .mc-arrow{ transform:rotate(180deg); } /* ▲ */

  /* the image shown/hidden with the panel */
  .mc-img{
    display:none; /* hidden by default, JS will show with panel */
    width:100%; height:auto; margin:10px 0 0 0;
    border:1px solid var(--line);
    border-radius:4px;
  }

  /* collapsible body */
  .mc-panel{
    display:none; /* hidden until opened */
    border:1px solid var(--line);
    border-top:none;
    background:var(--bg);
    padding:12px 12px 14px;
    font-size:14px; line-height:1.72; color:var(--body);
    text-align:justify;
    
  }
  .mc-panel p{ margin:0 0 12px ; font-size: 14px; }
  .mc-panel p:last-child{ margin-bottom:0 }
  .mc-panel b{ color:#000 }
  .mc-meta{ margin-top:8px }
    .services-section{background:#fff}
    .services-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
    .service-box{border:1px solid #ddd;padding:30px 15px;text-align:center}
    .service-box h3{color:#155c3b;margin:10px 0;font-weight:700}
    @media (max-width:768px){.services-container{grid-template-columns:1fr 1fr}}
    @media (max-width:480px){.services-container{grid-template-columns:1fr}}
    /* .vc-wrap{max-width:1200px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px} */
    /* .vc-video .ratio{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:6px;overflow:hidden} */
.vc-video .ratio {
  /* position: relative; */
  /* display: inline-block; */
  width: 100%;
  padding-top: 56.25%;   /* 16:9 aspect ratio */
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}

.vc-video .ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
   @media (max-width: 992px) {
  .vc-wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ribbon,
  .elig-ribbon {
    background: #155c3b;
    color: #fff;
    margin: 0;              /* remove all gap */
    max-width: 100%;        /* full width */
    border-radius: 0;       /* optional, remove rounded corners for edge-to-edge look */
    text-align: center;
  
  
  }
}

    .ribbon h1,.elig-ribbon h1{margin:0;padding:10px 12px;font-weight:800}
    .benefits-wrap,.elig-wrap,.wrap{max-width:1240px;margin:10px auto 40px;padding:0 16px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
    @media (max-width:980px){.benefits-wrap,.elig-wrap,.wrap{grid-template-columns:1fr}}
    /* Accordion (mc-*) — same classes you used earlier */
    .mc-list{max-width:1200px;margin:18px auto;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
    @media (max-width:820px){.mc-list{grid-template-columns:1fr}}
    .mc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #e9ecef;border-radius:3px;color:#28a745;font-weight:600;font-size:14px;cursor:pointer;background:#fff}
    .mc-head.mc-open{background:#f6fffa}
    .mc-arrow{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #28a745;transition:transform .2s}
    .mc-head.mc-open .mc-arrow{transform:rotate(180deg)}
    .mc-img{display:none;width:100%;height:auto;margin:10px 0 0;border:1px solid #e9ecef;border-radius:4px}
    .mc-panel{display:none;border:1px solid #e9ecef;border-top:none;background:#fff;padding:12px 12px 14px;font-size:14px;line-height:1.72;text-align:justify}
   .mc-img{
  /* ডিফল্টে লুকানো থাকবে; JS খোলার সময় block করে দেবে */
  display: none;

  width: 100%;
  height: auto;
  margin: 10px 0 0;

  border: 1px solid #e9ecef;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  object-fit: contain; /* ছবি কাটা যাবে না */
}


/* Shift the entire card that has mc-head1 */
.mc-card {
  margin-left: 20px; /* adjust px value as needed */
}

/* === Clone of mc-* styles for the Ad-Din block (mc-*1) === */

/* Card wrapper look (since it's outside .mc-list grid) */
.mc-card1{
  max-width: var(--maxw);
  margin: 16px auto;
  padding: 0 16px;
}

/* Head: exactly like .mc-head */
.mc-head1{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; background:#fff;
  border:1px solid #e9ecef; border-radius:3px;
  color:#28a745; font-weight:600; font-size:14px;
  cursor:pointer; user-select:none;
}
.mc-head1:hover{ background:#f9fafb }
.mc-head1.mc-open{ background:#f6fffa }

/* Arrow: exactly like .mc-arrow */
.mc-head1 .mc-arrow{
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid #28a745;   /* ▼ */
  transition:transform .2s;

}
.mc-head1.mc-open .mc-arrow{ transform:rotate(180deg) } /* ▲ */

/* Optional image (use if you add one later) */
.mc-img1{
  display:none; width:100%; height:auto; margin:10px 0 0;
  border:1px solid #e9ecef; border-radius:4px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04); object-fit:contain;
}

/* Panel body: exactly like .mc-panel */
.mc-panel1{
   display:none; /* hidden until opened */
    border:1px solid var(--line);
    border-top:none;
    background:var(--bg);
    padding:12px 12px 14px;
    font-size:14px; line-height:1.72; color:var(--body);
    text-align:justify;
}
.mc-panel1 p{ margin:0 0 12px; font-size:14px }
.mc-panel1 p:last-child{ margin-bottom:0 }
.mc-panel1 b{ color:#000 }
.mc-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 20px;
}

@media (max-width: 768px) {
  .mc-list {
    grid-template-columns: 1fr; /* mobile view: single column */
  }
}
 .apply-btn {
  background-color: #0c3b14;   /* Dark green */
  color: #fff;                /* White text */
  font-size: 18px;
  font-weight: bold;
  padding: 12px 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: 0.2s ease;
}

.apply-btn a {
  color: #fff !important;        /* ✅ Force white text */
  text-decoration: none !important; /* ✅ Remove underline */
  display: inline-block;
}


 

    .apply-btn:hover {
      background-color: #145a20;  /* Lighter green on hover */
      transform: translateY(-2px); /* Slight lift on hover */
    }
  .apply-btn{
    background:#0c3b14;
    color:#fff;
    font-weight:700;
    font-size:18px;
    padding:12px 28px;
    border:0;
    border-radius:4px;
    cursor:pointer;
    box-shadow:0 3px 6px rgba(0,0,0,.3);
    transition:.2s ease;
    letter-spacing:0;     /* অক্ষরের মাঝে বাড়তি গ্যাপ নয় */
    word-spacing:2px;     /* APPLY আর NOW এর মাঝে হালকা গ্যাপ */
    margin-top: 37px;
  }
  .apply-btn:hover{ background:#145a20; transform:translateY(-2px); }
  /* Two-column wrapper for Ad-Din (left) + 10 colleges (right) */
.mc-two-col {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* ✅ 2 columns by default */
  gap: 0; /* ✅ no gap between columns */
}

/* 🔽 Mobile Responsive */
@media (max-width: 768px) {
  .mc-two-col {
    grid-template-columns: 1fr; /* ✅ mobile = single column */
  }
}


body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;        /* ✅ scrollbar er jonno je extra white gap ashe, seta remove */
}
 body, html {
      margin: 0;
      padding: 0;
    }

    .ribbon-box {
      background: #155c3b;        /* ✅ green background */
      border: 2px solid #155c3b;  /* ✅ green border */
      color: #fff;                /* ✅ white text */
      padding: 14px 0;
      text-align: center;
      width: 100%;                /* ✅ full width */
    }

    .ribbon-box h1 {
      margin: 0;
      font-weight: 700;
      font-size: 20px;
    }
    .mc-col{ display:flex; flex-direction:column; gap:16px; }
    @media (max-width:820px){ .mc-two-col{ grid-template-columns:1fr; } }

    /* Safe base (kept minimal in case Tonu3.css already has them) */
    .mc-card{ background:#fff; border:1px solid #e9ecef; border-radius:3px; }
    .mc-head{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px; color:#28a745; font-weight:600; font-size:14px;
      cursor:pointer; user-select:none; background:#fff;
    }
    .mc-head:hover{ background:#f9fafb; }
    .mc-head.mc-open{ background:#f6fffa; }
    .mc-arrow{
      width:0; height:0;
      border-left:6px solid transparent; border-right:6px solid transparent;
      border-top:7px solid #28a745; transition:transform .2s;
    }
    .mc-head.mc-open .mc-arrow{ transform:rotate(180deg); }
    .mc-img{ display:none; width:100%; height:auto; border-top:1px solid #e9ecef; }
    .mc-panel{ display:none; border-top:1px solid #e9ecef; background:#fff; padding:12px; font-size:14px; line-height:1.72; text-align:justify; }
    .mc-panel p{ margin:0 0 12px; }
    .mc-panel p:last-child{ margin-bottom:0; }
    .mc-meta{ margin-top:8px; }


    /* APPLY NOW button: same look everywhere + শব্দের মাঝে হালকা গ্যাপ */
 .apply-btn {
  background-color: hsl(131, 83%, 46%);   /* Dark green button */
  color: #fff !important;      /* White text */
  font-weight: bold;
  text-decoration: none !important;
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  transition: 0.3s ease;
}

/* Ensure ALL states stay white */
.apply-btn:link,
.apply-btn:visited,
.apply-btn:hover,
.apply-btn:active {
  color: #fff !important;
  text-decoration: none !important;
}

    .apply-btn:hover{ background:#145a20; transform:translateY(-2px); }

    /* ফর্ম বাটনের ভেতরের <a> – দেখতে/ক্লিকেবল ঠিক রাখতে */
    .btn a{ display:block; width:100%; height:100%; color:inherit; text-decoration:none; }
 
 
    /* global safe guards */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }

:root{
  --green-dark:#0e5a38;    /* bar color */
  --green-dark-2:#0a4a2e;  /* subtle gradient */
  --container:1160px;
}




/* Body copy */
.fees-copy{
  max-width: 950px;
  margin: 18px auto 0;
  color:#222;
  line-height: 1.8;
  text-align: center;   /* <-- majhkhane korar jonno */
  font-family: "Roboto", Arial, sans-serif;
  font-size: clamp(14px, 3.8vw, 18px);
  hyphens: auto;
  word-break: normal;


}
.fees-copy strong{
  color:#0e5a38;
  font-weight: 700;
  
}

/* Small screens */
@media (max-width: 768px){
  .wrap{ padding: 0 14px; }
  .fees-copy{ line-height: 1.7; text-align: center;  } /* keep center */
}
@media (max-width: 480px){
  .wrap{ padding: 0 12px; }
  .fees-copy{ text-align: center; margin-top: 29px; } /* center even on very small screens */
}

 .vc-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7;              /* no flex gap */
}

.vc-video1 iframe,
.vc-image1 img {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  display: block;
  border: none;        /* removes default iframe border */
  border-radius: 0;    /* 👈 make edges touch cleanly */
  margin: 0;           /* just in case */
}

.vc-video1, .vc-image1 {
  flex: 1;
  max-width: 50%;
}
.center-img {
  display: block;
  margin: 0 auto;   /* majhkhane ana */
  max-width: 100%;  /* responsive rakhar jonno */
  height: auto;     /* image ratio safe */
}

/* Center the whole table block on the page */
.wrap{
  max-width: 100%;
  padding: 0 12px;
  display: flex;
  justify-content: center;   /* horizontally center */
}

.table-card{
  width: min(1100px, 98vw);  /* nice width + responsive */
  margin: 0 auto;            /* double-ensure center */
}

/* keep cell text left-aligned */
.fees-table th,
.fees-table td{
  text-align: left;
}
/* Header: single line + centered */
.fees-table thead th{
  text-align: center;        /* horizontal center */
  vertical-align: middle;    /* vertical center */
  white-space: wrap;       /* এক লাইনে রাখে */
  word-break: keep-all;      /* শব্দ না ভাঙ্গা */
  overflow: hidden;          /* extra লুকায় */
  text-overflow: ellipsis;   /* খুব লম্বা হলে ... দেখাবে */
  font-size: 13px;           /* একটু ছোট করলে সহজে এক লাইনে থাকে */
  padding: 10px 8px;         /* কম padding = বেশি জায়গা */
}
.group {
  color: #0b4f1f;
}
 /* Two-column wrapper for Ad-Din (left) + 10 colleges (right) */
    .mc-two-col{
      max-width:1200px; margin:18px auto; padding:0 16px;
      display:grid; grid-template-columns:1fr 1fr; gap:16px;
    }
    .mc-col{ display:flex; flex-direction:column; gap:16px; }
    @media (max-width:820px){ .mc-two-col{ grid-template-columns:1fr; } }

    /* Safe base (kept minimal in case Tonu3.css already has them) */
    .mc-card{ background:#fff; border:1px solid #e9ecef; border-radius:3px; }
    .mc-head{
      display:flex; align-items:center; gap:8px;
      padding:10px 12px; color:#28a745; font-weight:600; font-size:14px;
      cursor:pointer; user-select:none; background:#fff;
    }
    .mc-head:hover{ background:#f9fafb; }
    .mc-head.mc-open{ background:#f6fffa; }
    .mc-arrow{
      width:0; height:0;
      border-left:6px solid transparent; border-right:6px solid transparent;
      border-top:7px solid #28a745; transition:transform .2s;
    }
    .mc-head.mc-open .mc-arrow{ transform:rotate(180deg); }
    .mc-img{ display:none; width:100%; height:auto; border-top:1px solid #e9ecef; }
    .mc-panel{ display:none; border-top:1px solid #e9ecef; background:#fff; padding:12px; font-size:14px; line-height:1.72; text-align:justify; }
    .mc-panel p{ margin:0 0 12px; }
    .mc-panel p:last-child{ margin-bottom:0; }
    .mc-meta{ margin-top:8px; }

    /* APPLY NOW button: same look everywhere + শব্দের মাঝে হালকা গ্যাপ */
    .apply-btn{
      background:#1f7b2e;
      color:#fff;
      font-weight:800;
      font-size:18px;
      padding:12px 28px;
      border:0;
      border-radius:4px;
      cursor:pointer;
      box-shadow:0 3px 6px rgba(0,0,0,.3);
      transition:.2s ease;
      letter-spacing:0;     /* অক্ষরের মাঝে নয় */
      word-spacing:2px;     /* APPLY ও NOW এর মাঝে হালকা ফাঁক */
    }
    .apply-btn:hover{ background:#145a20; transform:translateY(-2px); }

    /* ফর্ম বাটনের ভেতরের <a> – দেখতে/ক্লিকেবল ঠিক রাখতে */
    .btn a{ display:block; width:100%; height:100%; color:inherit; text-decoration:none; }
 .caption {
bottom: 11px;
}
    html,body{min-height:100%;height:auto !important;overflow-y:auto !important;overflow-x:hidden;}
    .share-fb{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:#1877F2; font-weight:600;
}
.share-ico{
  width:20px; height:20px; display:inline-block; flex:0 0 20px;
  background: no-repeat center/contain;
  margin-right:2px;
  /* exact fb icon (inline, no extra file needed) */
 
}

        /* Pinterest Link Container */
        .share-pin {
            display: flex;
            align-items: center;
            text-decoration: none;
            font-family: sans-serif;
            font-size: 16px;
            color: #333; /* Color of the text */
        }

        /* The red circular background */
        .icon-bg {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25px; 
            height: 25px;
            background-color: #E60023; /* Pinterest's brand red */
            border-radius: 50%;
            margin-right: 8px;
        }

        /* The Pinterest icon itself */
        .icon-bg .fab.fa-pinterest-p {
            color: #fff; /* White icon color for contrast */
            font-size: 14px;
        }

        /* The "Pin it" text */
        .share-pin span {
            color: #333; /* Text color */
        }
  
   :root{
            --bg: #f7f7fb;
            --card: #ffffff;
            --border: #e6e8ee;
            --shadow: 0 6px 24px rgba(0,0,0,.06);
            --radius: 16px;
            --accent: #00a884;
            --gap: clamp(14px, 2vw, 24px);
        }
        
        /* Global styles for body and typography
        *{box-sizing:border-box}
        html,body{height:100%}
        body{margin:0;background:var(--bg);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a} */

        /* Main container to center content */
        .wrap{max-width:1200px;margin:0 auto;padding:clamp(16px,3vw,32px)}
        
        /* The main responsive grid for the documents */
        .doc-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:var(--gap)
        }
        
        /* Media query to switch to a single column on smaller screens */
        @media (max-width: 860px){
            .doc-grid{grid-template-columns:1fr}
        }

        /* Styling for each document card */
        .doc-card{
            background:var(--card);
            border:1px solid var(--border);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            padding:clamp(10px,1.6vw,16px)
        }
        .doc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
        .doc-link{display:block;text-decoration:none}

        /* Container for the document image to maintain aspect ratio */
        .doc-frame{
            position:relative;
            aspect-ratio:1/1.414;
            border-radius:12px;
            overflow:hidden;
            background:#fff;
            border:1px solid #e5e7eb
        }
 

        .doc-frame img{width:100%;height:100%;object-fit:contain;background:#fff;display:block}
        
        /* Watermark styling using a pseudo-element and data attribute */
        .doc-frame.watermark::before{
            content: attr(data-watermark);
            position:absolute;
            inset:-35%;
            transform:rotate(-28deg);
            font-size:8rem;
            letter-spacing:.06em;
            line-height:1;
            color:rgba(0,0,0,.035);
            text-align:center;
            pointer-events:none;
            display:grid;
            place-items:center;
            font-weight:700
        }

        /* --- LIGHTBOX STYLES (PURE CSS) --- */
        /* Lightbox is hidden by default */
        .lightbox{
            display:none;
            position:fixed;
            inset:0;
            z-index:9999;
            background:rgba(0,0,0,.90);
            justify-content:center;
            align-items:flex-start;
            padding:24px;
            overflow:auto;
        }
        
        /* The :target pseudo-class makes the lightbox visible when its ID matches the URL hash */
      .lightbox:target {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* মোবাইল ভিউ এর জন্য */
@media (max-width: 768px) {
  .lightbox:target {
    flex-direction: column;   /* mobile এ কলামে সাজাবে */
    padding: 10px;
  }

  .lightbox img {
    max-width: 90%;  /* image mobile এ ছোট হয়ে যাবে */
    height: auto;

  }
}
/* Default lightbox image */
.lightbox img{
  max-width:100%;
  max-height:72vh;
  height:auto;
  object-fit:contain;
}

/* Mobile tweak: image smaller + a bit lower */
@media (max-width: 768px){
  .lightbox{
    /* center horizontally, but start from top with some gap */
    align-items: flex-start;
    padding-top: 72px;   /* << yeh gap image ko thoda niche dikhayega */
    padding-left: 12px;
    padding-right: 12px;
  }
  
}

/* Very small phones */
@media (max-width: 420px){
  .lightbox{
    padding-top: 90px;
  }
  .lightbox img{
    max-width: 88%;
    max-height: 64vh;
  }
}



     /* Default for desktop */
.lightbox img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    object-fit:contain;
    margin:60px auto 80px;
    border:none;
    background:transparent;
    box-shadow:none;
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
    cursor: zoom-in;
}

/* Zoomed state */
.lightbox img.zoomed {
    transform: scale(1.5);
    cursor: zoom-out;
}

/* ✅ Mobile responsive fix */
@media (max-width: 768px){
    .lightbox img{
        max-width:90%;        /* image chhota hoga */
        max-height:70vh;      /* screen se bahar nahi niklega */
        margin:80px auto 40px; /* thoda niche gap rahega */
    }
}

@media (max-width: 420px){
    .lightbox img{
        max-width:88%;
        max-height:65vh;
        margin:90px auto 30px; /* aur niche space chhote phones ke liye */
    }
}

/* Minimal next/prev arrows */
.lightbox .nav{
  position: fixed;        /* JS pos set করবে */
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  text-decoration: none;

  /* Simple text arrow */
  color: hsl(125, 59%, 15%);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;

  /* Tap area but invisible */
  padding: 12px 10px;
  z-index: 1011;

  /* subtle visibility, no fancy effects */
  opacity: 0.9;
  margin-left: 20px;
  margin-right: 20px;

}

.lightbox .nav:hover{ opacity: 1; }
.lightbox .nav:active{ opacity: 0.85; }

/* Mobile: a little bigger for tap */
@media (max-width: 768px){
  .lightbox .nav{
    font-size: 38px;
    padding: 25px 25px;
    
  }
}

  

        /* Counter and caption styling */
        .lightbox .counter{
            position:fixed; top:18px; left:18px;
            color:#fff; font-weight:600; font-size:16px;
        }
        .lightbox .caption{
            position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
            color:#fff; text-align:center; font-weight:700;
        }
        .lightbox .caption small{ display:block; font-weight:400; opacity:.9; }

        /* Prevents body scrolling when a lightbox is open */
        body:has(.lightbox:target){ overflow:hidden; }
        
        /* Additional styles for the new toolbar buttons */
        .lightbox {
            align-items: center;
            padding: 16px;
        }
        .lightbox img {
            margin: 0 auto;
            max-width: calc(100vw - 48px);
            max-height: calc(100vh - 120px);
            width: auto;
            height: auto;
            object-fit: contain;
            box-shadow: none;
            border: none;
            background: transparent;
            margin-top: 59px;
        }
        /* Lightbox overlay + stacking */
.lightbox{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.92);
  z-index: 1000;
}
.lightbox:target{ display: flex; }

/* Image below toolbar/nav so clicks go to arrows */
.lightbox img{ z-index: 1001; }

/* Toolbar sabse upar */
.lightbox .toolbar{ position: fixed; top:0; left:0; right:0; z-index: 1010; }

/* Prev/Next arrows — full height edge zones, easy to tap */



/* Thoda niche dikhane ke liye default top gap */
@media (max-width: 768px){
  .lightbox{ align-items: flex-start; padding-top: 72px; }
  .lightbox img{ max-width: 90%; max-height: 68vh; height:auto; }
}
@media (max-width: 420px){
  .lightbox{ padding-top: 84px; }
  .lightbox img{ max-width: 88%; max-height: 64vh; }
}

/* Zoom state (jo tum use korcho) as-is */
.lightbox img{ transform: scale(1); transition: transform .3s ease; cursor: zoom-in; }
.lightbox img.zoomed{ transform: scale(1.5); cursor: zoom-out; }

        .lightbox .toolbar {
            position: fixed;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .lightbox .tb-btn,
        .lightbox .close {
            color: #fff;
            font-size: 18px;
            text-decoration: none;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.6);
            padding: 6px 8px;
            border-radius: 50%;
            line-height: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .lightbox .tb-btn:hover,
        .lightbox .close:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .fees-heading {
  text-align: center;               /* majhkhane text */
  font-family: "Roboto", Arial, sans-serif;
  font-size: clamp(16px, 2.8vw, 22px);  
  font-weight: 700;
  color: #222;
  text-decoration: underline;  
  margin: 20px auto;                /* upar niche gap + center */
  display: block;
}


  :root{
    --green:#145c39;          /* header green */
    --green-2:#0f4a2e;
    --line:#dfe3e6;
    --head:#ffffff;
    --txt:#1b1f23;
  }
/* 
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--txt);
    background:#fff;
  } */

  .wrap{
    max-width:1100px;
    margin:26px auto;
    padding:0 12px;
  }

  .table-card{
    border:1px solid #e6e9ec;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    background:#fff;
  }

  .fees-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;          /* equal columns like screenshot */
  }

  /* Header */
  .fees-table thead th{
    position:sticky; top:0;      /* sticky on mobile scroll */
    z-index:2;
    background:linear-gradient(180deg,var(--green),var(--green-2));
    color:var(--head);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    font-size:14px;
    padding:14px 12px;
    border-right:1px solid rgba(255,255,255,.18);
  }
  .fees-table thead th:last-child{border-right:0}

  /* Cells */
  .fees-table tbody td{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:12px;
    vertical-align:top;
    font-size:14px;
    line-height:1.55;
    background:#fafbfc;
  }
  .fees-table tbody tr:nth-child(odd) td{ background:#ffffff; }
  .fees-table tbody td:last-child{border-right:0}

  /* First col looks like screenshot (uppercase-ish) */
  .u-name{ font-weight:700; text-transform:uppercase; }

  /* Small badges if needed */
  .badge{
    display:inline-block; padding:2px 8px; border-radius:999px;
    font-size:12px; font-weight:600; background:#ecfdf5; color:#065f46;
  }

  /* Responsive: horizontal scroll on small screens */
  .table-scroll{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .hint{
    font-size:12px; color:#6b7280; margin:8px 4px 0;
  }

  @media (max-width:720px){
    .fees-table thead th,
    .fees-table tbody td{ padding:10px 10px; font-size:13px; }
    .u-name{ font-size:13px; }
  }
.share-fb {
display: inline-flex; /* Allows icon and text to sit inline /
align-items: center; / Vertically aligns icon and text /
text-decoration: none;
color: #333; / Default text color */
}
.share-fb .fab.fa-facebook {
color: #1877f2;
font-size: inherit;
margin-right: 0.5em;
}

        .share-twitter {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            font-family: sans-serif;
            font-size: 16px;
            
            /* CSS to make everything sky blue */
            color: #12acea; 
        }

        .share-twitter .fab.fa-twitter {
            font-size: 20px;
            margin-right: 8px;
            
            /* Specific icon color, though inherited from parent in this case */
            color: #87CEEB; 
        }
    .share-fb {
display: inline-flex; /* Allows icon and text to sit inline /
align-items: center; / Vertically aligns icon and text /
text-decoration: none;
color: #333; / Default text color */
}
.share-fb .fab.fa-facebook {
color: #1877f2;
font-size: inherit;
margin-right: 0.5em;
}

        .share-twitter {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            font-family: sans-serif;
            font-size: 16px;
            
            /* CSS to make everything sky blue */
            color: #12acea; 
        }

        .share-twitter .fab.fa-twitter {
            font-size: 20px;
            margin-right: 8px;
            
            /* Specific icon color, though inherited from parent in this case */
            color: #87CEEB; 
        }
        /* bullet 'o' গায়েব — HTML না পাল্টিয়েই */
.top-header .header-right ul,
.top-header .header-right ul ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* চাইলে একই লাইনে আইকনগুলো রাখা */
.top-header .header-right ul{
  display: flex;
  gap: 10px;
  align-items: center;

}

/* Twitter share link sky/brand নীল */
.share-twitter,
.share-twitter i.fa-twitter,
.share-twitter span{
  color: #1DA1F2; /* Twitter brand blue; চাইলে #87CEEB (skyblue) দাও */
}

/* hover এ হালকা ব্যাকগ্রাউন্ড (ঐচ্ছিক) */
.share-twitter{
  text-decoration: none;
}
.share-twitter:hover{
  background: #E8F5FD;
  border-radius: 4px;
}
 /* Add to your existing CSS */

.modal-content {
  transform: scale(1);
  transition: transform 0.3s ease;
}
.modal-content.zoomed { cursor: grab; }
.modal-content.zoomed:active { cursor: grabbing; }

/* (Your earlier selectors using .lightbox kept as-is) */
/* Header row */
.lightbox .modal-ui{
  position:fixed; top:0; left:0; right:0; height:56px;
  display:flex; align-items:center; padding:0 18px; color:#fff;
}

/* Counter left; tools push to right */
.lightbox .count{ margin-right:auto; font-weight:700; }

/* Icons & X (no circle bg; no underline) */
.lightbox .tb-btn, .btnClose{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; outline:0;
  color:#fff; text-decoration:none;
  margin-left:14px; cursor:pointer; user-select:none;
  border-radius:6px; transition:background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lightbox .tb-btn:hover, .btnClose:hover{ background:rgba(255,255,255,.08); }
.btnClose{ font-size:24px; line-height:1; }

/* Put icons BEFORE the X in this order */
.lightbox .tb-btn[data-action="fullscreen"]{ order:1; }
.lightbox .tb-btn[data-action="zoom"]{       order:2; }
.lightbox .tb-btn[data-action="share"]{      order:3; }
.btnClose{                                    order:4; }

/* SVG style (when JS swaps them in) */
.lightbox .tb-btn svg{
  width:22px; height:22px; display:block;
  stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}


/* --- Page basics --- */
/* body{ margin:0; font-family:Arial, sans-serif; background:#f0f2f5; padding:20px; }
h2{ margin:0 0 18px; text-align:center; color:#155c3b; font-size:clamp(20px,2.5vw,28px); } */

/* --- Grid --- */
.certificate-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px; max-width:1200px; margin:0 auto;
}
.certificate-item{
  border:2px solid #1b8d5f; border-radius:10px; overflow:hidden; background:#fff;
  padding:10px; box-shadow:0 4px 8px rgba(0,0,0,.08); cursor:pointer;
}
.certificate-item img{ width:100%; height:auto; display:block; border-radius:8px; }

/* --- Fullscreen Modal (horizontal page-wise) --- */
.modal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); }
.modal.open{ display:block; }
body.modal-open{ overflow:hidden; }

/* Header */
.modal-ui{
  position:fixed; top:0; left:0; right:0; height:56px; display:flex; align-items:center;
  padding:0 18px; color:#fff; pointer-events:none;
}
.count{ font-weight:700; font-size:16px; pointer-events:auto; }
.close{ margin-left:auto; font-size:32px; line-height:1; cursor:pointer; pointer-events:auto; user-select:none; }

/* Slides: horizontal snapping */
.slides{
  position:fixed; inset:0; top:56px; height:calc(100vh - 56px);
  overflow-x:auto; overflow-y:hidden; display:flex; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.slide{
  min-width:100vw; height:100%; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  padding:24px; box-sizing:border-box;
}
.slide img{
  max-width:min(900px, 90vw);
  max-height:calc(100vh - 56px - 48px);
  width:auto; height:auto; display:block; border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); background:#111;
}

/* Prev/Next buttons */
.nav{
  position:fixed; top:50%; transform:translateY(-50%);
  padding:14px 16px; color:#fff; font-weight:700; font-size:22px; cursor:pointer;
  user-select:none; background:rgba(0,0,0,.35); border-radius:8px;
}
.nav:hover{ background:rgba(0,0,0,.55); }
.prev{ left:10px; }
.next{ right:10px; }

@media (max-width:560px){
  .slide{ padding:12px; }
  .slide img{ max-width:94vw; max-height:calc(100vh - 56px - 24px); }
}

/* ========= OVERRIDES (do not change your HTML) ========= */
#lightbox .modal-ui{ pointer-events:none; }
#lightbox .count{ margin-right:auto; pointer-events:auto; }
#lightbox .tb-btn, #lightbox #btnClose{
  pointer-events:auto;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; outline:0; color:#fff; text-decoration:none;
  margin-left:14px; cursor:pointer; user-select:none; border-radius:6px; transition:background .15s ease;
}
#lightbox .tb-btn:hover, #lightbox #btnClose:hover{ background:rgba(255,255,255,.08); }
/* EXACT ORDER: Fullscreen, Zoom, Share, then X */
#lightbox .tb-btn[data-action="fullscreen"]{ order:1; }
#lightbox .tb-btn[data-action="zoom"]{       order:2; }
#lightbox .tb-btn[data-action="share"]{      order:3; }
#lightbox #btnClose{                          order:4; font-size:24px; line-height:1; }
/* SVG look */
#lightbox .tb-btn svg{
  width:22px; height:22px; display:block;
  stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Keep toolbar visible in fullscreen too */
#lightbox:fullscreen .modal-ui,
#lightbox:-webkit-full-screen .modal-ui{
  display:flex !important;
  opacity:1; visibility:visible;
  pointer-events:none;
  z-index:100000;
}
#lightbox:fullscreen .tb-btn,
#lightbox:fullscreen #btnClose,
#lightbox:-webkit-full-screen .tb-btn,
#lightbox:-webkit-full-screen #btnClose{
  pointer-events:auto;
}
#lightbox:fullscreen .slides,
#lightbox:-webkit-full-screen .slides{
  top:56px; height:calc(100vh - 56px);
}
#lightbox:fullscreen,
#lightbox:-webkit-full-screen{
  background:rgba(0,0,0,.92);
}

/* ===== Minimal zoom mode (used by the 🔍 button) ===== */
#lightbox .slide.zoomed{ overflow:auto; }
#lightbox .slide.zoomed img{
  max-width:none; max-height:none; width:140%; height:auto; cursor:grab; background:#111;
}
#lightbox .slide.zoomed img:active{ cursor:grabbing; }
/* ===== Share popup ===== */
#lightbox .share-menu{
  position:fixed;
  top:64px;               /* JS exact position set করবে */
  right:20px;
  width:240px;
  background:#fff;
  color:#111;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  padding:8px 6px;
  display:none;
  z-index:100002;
}
#lightbox .share-menu.show{ display:block; }

/* ছোট ত্রিভুজ */
#lightbox .share-menu::after{
  content:"";
  position:absolute;
  top:-8px;
  right:24px;
  border-width:8px;
  border-style:solid;
  border-color:transparent transparent #fff transparent;
}

/* items */
#lightbox .share-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  color:#111; text-decoration:none; cursor:pointer;
}
#lightbox .share-item:hover{ background:#f4f5f7; }
#lightbox .share-item svg{ width:20px; height:20px; display:block; }
.share-twitter span {
  color: #000; /* Sets the text color to black */
}
/* Close/X ডান পাশে আনার জন্য */
.top-header { position: relative; }

.top-header .close,
.top-header .btn-close,
.top-header .fa-times,
.top-header .fa-xmark {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}
.lightbox .caption {
  bottom: 29px;
}

:root{
    --gap: clamp(14px, 2vw, 24px);
    --radius: 10px;
    --shadow: 0 8px 24px rgba(0,0,0,.08);
    --card-bg: #ffffff;
  }
  body{
    margin:0; padding:24px;
    background:#f5f6f8;
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  /* Two-column layout */
  .two-col{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
  }
  @media (max-width: 900px){
    .two-col{ grid-template-columns: 1fr; }
  }



  /* ---- Stable 16:9 frame (works everywhere) ---- */
  .frame{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;          /* 16:9 ratio */
    border-radius: var(--radius);
    overflow: hidden;
    background:#000;
  }
  /* Children fill the frame area */
  .frame > *{
    position: absolute;
    inset: 0;
    width:100%;
    height:100%;
    display:block;
    border:0;
    pointer-events: auto;         /* ensure taps go to iframe */
  }

  /* Certificate image shows full, no crop */
  .frame img{
    object-fit: contain;
    background:#000;
  }

  /* (Optional) If any parent somewhere has pointer-events:none, force enable here */
  iframe{ pointer-events:auto; }
.two-col {
  margin-top: 30px;
}
.certificate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 10px;
}

.certificate-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.certificate-item img {
  width: 100%;
  height: auto;
  display: block;
}

.certificate-item p {
  margin: 8px 0;
  font-size: 14px;
  font-weight: 600;
}
 /* Container */
    .loan-section {
      max-width: 1100px;
      margin: 20px auto;
      padding: 0 15px;
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    /* Green header bar */
    .loan-section h2 {
      background: #0b5831; /* dark green */
      color: #fff;
      text-align: center;
      padding: 12px 10px;
      border-radius: 2px;
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 20px;
    }

    /* Paragraph */
    .loan-section p {
      font-size: 16px;
      color: #111;
      text-align: justify;
    }

    /* Bold keywords */
    .loan-section b {
      color: #000;
    }
      :root {
    --green: #0aa06e;
    --dot: #bdd9cc;
    --shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --gap: 28px;
    --img-max-h: 560px;
  }
    .card img {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    object-fit: contain;
  }
  :root {
    --green: #0aa06e;
    --dot: #bdd9cc;
    --shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --gap: 28px;
    --img-max-h: 560px;
  }
  /* Overrides to make images responsive within the cards */
  .card img {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    object-fit: contain;
  }
   .viewport {
    overflow-x: hidden;
    overflow-y: auto;
  }
    .page { padding: 16px 10px; }
  /* Base slider styles */
  .slider {
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 16px;
    position: relative;
    font-family: system-ui, Arial, sans-serif;
  }

 
  :root {
    --green: #0aa06e;
    --dot: #bdd9cc;
    --shadow: 0 10px 30px rgba(0, 0, 0, .10);
    --gap: 28px;
    --img-max-h: 560px;
  }

  /* renamed classes */
  .card-box img {
    height: auto !important;
    max-height: none !important;
    width: 100%;
    object-fit: contain;
  }

  .vp-box { overflow-x: hidden; overflow-y: auto; }
  .pg-box { padding: 16px 10px; }

  .slider-wrap {
    max-width: 1280px;
    margin: 24px auto;
    padding: 0 16px;
    position: relative;
    font-family: system-ui, Arial, sans-serif;
  }

  .nav-radio{ display:none; }
  .vp-box{ overflow:hidden; background:#fff; border-radius:6px; box-shadow:var(--shadow); }
  .trk-box{ display:flex; transition:transform .45s ease; will-change:transform; }
  .pg-box{ flex:0 0 100%; padding:24px 10px; }
  .row-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:center; }
  .card-box{ display:flex; align-items:center; justify-content:center; background:#fff; }
  .card-box img{ width:100%; height:82vh; max-height:var(--img-max-h); object-fit:contain; background:#fff; }

  #p1:checked ~ .vp-box .trk-box{ transform:translateX(0%); }
  #p2:checked ~ .vp-box .trk-box{ transform:translateX(-100%); }
  #p3:checked ~ .vp-box .trk-box{ transform:translateX(-200%); }
  #p4:checked ~ .vp-box .trk-box{ transform:translateX(-300%); }

  .dot-wrap{ display:flex; gap:10px; justify-content:center; margin:10px 0 0; }
  .dot-btn{ width:9px; height:9px; border-radius:50%; background:var(--dot); cursor:pointer; transition:transform .2s ease, background .2s ease; }
  #p1:checked ~ .dot-wrap label[for="p1"],
  #p2:checked ~ .dot-wrap label[for="p2"],
  #p3:checked ~ .dot-wrap label[for="p3"],
  #p4:checked ~ .dot-wrap label[for="p4"]{ background:var(--green); transform:scale(1.15); }

  .arrow-btn{
    position:absolute; top:44%; transform:translateY(-50%); z-index:3; display:none;
    align-items:center; justify-content:center; width:42px; height:42px;
    color:var(--green);
   cursor:pointer; font-size:90px; line-height:1; 
  }
  .arrow-btn:hover{ filter:brightness(1.05); }
  .prev-btn{ left:20px; } .next-btn{ right:20px; }
  .prev-btn::after{ content:"‹"; } .next-btn::after{ content:"›"; }

  #p1:checked ~ label.prev-btn[for="p4"], #p1:checked ~ label.next-btn[for="p2"]{ display:flex; }
  #p2:checked ~ label.prev-btn[for="p1"], #p2:checked ~ label.next-btn[for="p3"]{ display:flex; }
  #p3:checked ~ label.prev-btn[for="p2"], #p3:checked ~ label.next-btn[for="p4"]{ display:flex; }
  #p4:checked ~ label.prev-btn[for="p3"], #p4:checked ~ label.next-btn[for="p1"]{ display:flex; }

  @media (max-width:900px){
    .row-grid{ grid-template-columns:1fr; gap:18px; }
    .card-box img{ height:64vh; max-height:460px; }
    .arrow-btn{ width:36px; height:36px; font-size:20px; }
  }

  /* Lightbox */
  .lb-box{
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.85); justify-content:center; align-items:center; padding:20px;
  }
  .lb-box img{
    max-width:60vw; max-height:60vh; border:4px solid #fff; border-radius:6px; background:#fff;
  }
  .lb-box:target{ display:flex; }

  .lb-box .lb-prev, .lb-box .lb-next{
    position:absolute; top:47%; transform:translateY(-50%);
    width:46px; height:46px; display:flex; align-items:center; justify-content:center;
    font-size:90px; line-height:1; text-decoration:none;
    color:#08c01b;
  }
  .lb-box .lb-prev{ left:24px; } .lb-box .lb-next{ right:24px; }
  .lb-box .lb-prev:hover, .lb-box .lb-next:hover{ filter:brightness(1.05); }

  .pg-count{ display:none; }

  .slider-wrap::before{
    content: var(--ctr, "1 / 4");
    position:absolute; top:10px; right:20px; z-index:6;
    font:700 18px/1.1 system-ui, Arial, sans-serif; color:#fff;
    background:rgba(0,0,0,.85); padding:6px 12px; border-radius:6px; letter-spacing:.3px; pointer-events:none;
  }

  .lb-box::before{
    position:fixed; top:14px; left:14px; z-index:10000;
    font:700 18px/1.1 system-ui, Arial, sans-serif; color:#fff;
    background:rgba(0,0,0,.85); padding:6px 12px; border-radius:6px; letter-spacing:.3px;
    content:"";
    pointer-events:none;
  }
  #img1:target::before{ content:"1 / 12"; }
  #img2:target::before{ content:"2 / 12"; }
  #img3:target::before{ content:"3 / 12"; }
  #img4:target::before{ content:"4 / 12"; }
  #img5:target::before{ content:"5 / 12"; }
  #img6:target::before{ content:"6 / 12"; }
  #img7:target::before{ content:"7 / 12"; }
  #img8:target::before{ content:"8 / 12"; }
  #img9:target::before{ content:"9 / 12"; }
  #img10:target::before{ content:"10 / 12"; }
  #img11:target::before{ content:"11 / 12"; }
  #img12:target::before{ content:"12 / 12"; }
 :root{
    --green: #165f40;       /* header bar color */
    --text:  #0b0b0b;       /* body text */
    --maxw:  1160px;        /* content width */
  }

  body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); }

  /* Section wrapper */
  .study-section{ padding:22px 16px 42px; }

  /* Heading bar */
  .heading-bar{
    max-width:var(--maxw);
    margin:0 auto 22px;
    background:var(--green);
    border-radius:3px;
  }
  .heading-bar h2{
    margin:0;
    padding:7px 20px;
    text-align:center;
    color:#fff;
    font-weight:800;
    letter-spacing:.3px;
    font-size:clamp(22px, 3vw, 38px);
  }

  /* Content */
  .study-content{
    max-width:var(--maxw);
    margin:0 auto;
    /* text-align:center; */
    line-height:1.8;
    font-size:clamp(14px, 1.35vw, 18px);
   
  }
 

  /* Underlined bold link-style lines */
  .uline{
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
    font-size: 22px;
    margin-bottom: -4px;

  }

  /* Strong text emphasis */
  .study-content strong{ font-weight:800; }


  :root{
    --green:#165f40;
    --border:#d8dadd;
    --stripe:#f6f6f6;
    --maxw:1160px;
  }
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0b0b0b}
  .wrap{max-width:var(--maxw);margin:24px auto;padding:0 12px}
  .table-scroll{overflow:auto;border:1px solid var(--border);border-radius:4px}
  table{width:100%;border-collapse:collapse;min-width:940px}
  thead th{
    background:var(--green); color:#fff; font-weight:700;
    text-align:left; padding:12px 14px; font-size:15px;
    border-right:1px solid rgba(255,255,255,.25);
  }
  thead th:last-child{border-right:0}
  tbody td{
    padding:14px; border-top:1px solid var(--border);
    border-right:1px solid var(--border); vertical-align:top; font-size:15px;
  }
  tbody td:last-child{border-right:0}
  tbody tr:nth-child(even) td{ background:var(--stripe); }
  /* first column (phase) style */
  .phase{font-weight:600; width:18ch;}
  /* subject emphasis like screenshot */
  .subject{font-weight:700; color:#1e5c7a;}
  /* marks + total alignment */
  .marks{white-space:nowrap;}
  .total{font-weight:800; text-align:right; width:8ch;}
  /* Small screens */
  @media (max-width:600px){
    thead th{font-size:14px}
    tbody td{font-size:14px}
  }
    :root{
    --maxw: 1260px;
    --gap: 28px;
    --card-radius: 8px;
    --shadow: 0 8px 30px rgba(0,0,0,.10);
  }

  /* Base */
  /* *{ box-sizing:border-box; }
  html,body{
    margin:0; overflow-x:hidden;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:#0b0b0b;
  } */

.sectionyt{ padding:28px 14px; }
  .wrap1{ max-width:var(--maxw); margin:0 auto; }

  /* ===== YouTube grid ===== */
  .yt-grid{
    display:grid;
    grid-template-columns: 1fr; /* phones */
    gap: clamp(14px, 3vw, var(--gap));
  }
  @media (min-width: 600px){
    .yt-grid{ grid-template-columns: 1fr 1fr; } /* tablets */
  }
  @media (min-width: 1000px){
    .yt-grid{ grid-template-columns: repeat(3, 1fr); } /* desktop */
  }
  .yt-card{
    border-radius:var(--card-radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:#fff;
  }
  .yt-frame{ position:relative; aspect-ratio:16/9; background:#000; }
  .yt-frame iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  }

  /* ===== Promo row (image + glowing text) ===== */
  /* === PROMO ROW — mobile/desktop সমান look === */

/* আগের hard margin-left সরালাম */
.promo-row{
  margin: clamp(24px, 6vw, 48px) 0 0 !important;
  grid-template-columns: 1.2fr 1fr;   /* ডেস্কটপে দুই কোলাম */
  align-items: center;
}
.promo-text{ margin: 0 !important; }  /* fixed left margin off */

/* মোবাইলে এক কোলাম + text center */
@media (max-width: 1000px){
  .promo-row{ grid-template-columns: 1fr; }
  .promo-text{
    text-align: center;
    margin: 0 !important;
    font-size: clamp(22px, 5.2vw, 34px);
    line-height: 1.22;
  }
}

/* ইমেজ কার্ড পুরো প্রস্থে, ঠিক মাঝখানে */
.promo-img{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}
.promo-img img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* YouTube কার্ড/ইমেজের সাথে gap এক রাখি */
.yt-grid{ gap: var(--gap); }
.yt-card{ border-radius: var(--card-radius); box-shadow: var(--shadow); overflow:hidden; background:#fff; }
.yt-frame{ position:relative; aspect-ratio:16/9; background:#000; }
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ছোট স্ক্রিনে বাড়তি গ্যাপ কমাই */
@media (max-width: 600px){
  .yt-grid{ grid-template-columns: 1fr; }
  .promo-img img{ max-height: 60vh; }  /* অতিরিক্ত লম্বা না হয় */
}


/* Base: keep your current look, make container + image fully fluid */
.promo-img{
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  width: 100%;            /* fill the column */
  max-width: 100%;        /* never overflow */
}

.promo-img img{
  display: block;
  width: 100%;
  height: auto;           /* keep natural ratio */
  object-fit: contain;    /* no crop on any device */
}

/* Tablet: optional cap so the image doesn't get too tall */
@media (max-width: 1000px){
  .promo-img img{
    max-height: 70vh;     /* keep it visible without huge scroll */
  }
}

/* Mobile tweaks */
@media (max-width: 600px){
  .promo-img{
    border-radius: 10px;                 /* a bit softer on small screens */
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .promo-img img{
    max-height: 60vh;                    /* avoid over-tall images */
  }
}


  .promo-text{
    font-weight:800;
    font-style:italic;
    line-height:1.18;
    letter-spacing:.3px;
    color:#ff2a2a; /* red */
    text-shadow:
      0 0 6px #ffd100,
      0 0 14px #ffe56a,
      0 2px 2px rgba(0,0,0,.15);
    font-size: clamp(22px, 5.2vw, 39px); /* fluid */
    text-align:center;   /* center on mobile */
    margin:0;            /* no fixed left margins */
    padding:0 6px;
  }
  @media (min-width: 1000px){
    .promo-text{ text-align:left; }
  }

  :root{
    --maxw: 1260px;
    --gap: 28px;
    --card-radius: 8px;
    --shadow: 0 8px 30px rgba(0,0,0,.10);
    --green: #0c5a3d;
  }
  body{margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0b0b0b;}
  .section{padding:28px 14px;}
  .wrap{max-width:var(--maxw); margin:0 auto;}

  /* ====== Top: YouTube grid ====== */
  .yt-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
  }
  .yt-card{border-radius:var(--card-radius); overflow:hidden; box-shadow:var(--shadow); background:#fff;}
  .yt-frame{position:relative; aspect-ratio:16/9; background:#000;}
  .yt-frame iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }

  /* ====== Bottom: Promo row (image + glowing text) ====== */
  .promo-row{
    display:grid; gap: var(--gap);
    grid-template-columns: 1.3fr 1fr;
    align-items:center;
    margin-top: 98px;
    margin-left: 66px;
  }
  .promo-img{border-radius:var(--card-radius); overflow:hidden; box-shadow:var(--shadow); background:#fff;}
  .promo-img img{display:block; width:100%; height:auto;}

  .promo-text{
    font-weight:800;
    font-style:italic;
    line-height:1.18;
    letter-spacing:.3px;
    /* red text with yellow glow */
    color:#ff2a2a;
    text-shadow:
      0 0 6px #ffd100,
      0 0 14px #ffe56a,
      0 2px 2px rgba(0,0,0,.15);
    font-size: 39px;
    margin-left: 59px;
  }
  .promo-text .small{display:block; font-size: .84em;}

  /* ====== Responsive ====== */
  @media (max-width: 1000px){
    .yt-grid{ grid-template-columns: 1fr 1fr; }
    .promo-row{ grid-template-columns: 1fr; }
    .promo-text{ text-align:center; }
  }
  @media (max-width: 600px){
    .yt-grid{ grid-template-columns: 1fr; }
  }
*{box-sizing:border-box}
    body{
      font-family: Arial, sans-serif;
      margin:0;
      background:#f0f2f5;
      overflow-x:hidden;
    }

    .officials-section{
      max-width:1200px;
      margin:20px auto;
      padding:0 15px;
    }

    .header-bar{
      background:#155c3b;
      color:#fff;
      padding:20px 20px;
      text-align:center;
      border-radius:5px;
      font-size:clamp(18px,4vw,24px);
      font-weight:700;
      margin-bottom:20px;
      box-shadow:0 4px 8px rgba(0,0,0,.1);
      
    }

    .carousel-container{ position:relative; }

    .carousel-wrapper{
      display:flex;
      gap:20px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      padding:0 10px;
      -webkit-overflow-scrolling:touch;
      scroll-padding-left:10px;
      scroll-padding-right:10px;
    }

    .carousel-wrapper::-webkit-scrollbar{ height:8px }
    .carousel-wrapper::-webkit-scrollbar-track{ background:transparent }
    /* .carousel-wrapper::-webkit-scrollbar-thumb{ background:#d6d6d6; border-radius:6px } */

    .carousel-item{
      flex-shrink:0;
      width:33.33%;
      scroll-snap-align:center;
    }

    .image-card{
      background:#fff;
      border-radius:8px;
      overflow:hidden;
      box-shadow:0 4px 12px rgba(0,0,0,.1);
      position:relative;
      width:100%;
    }

    .image-card img{
      width:100%;
      height:auto;
      display:block;
    }

    .card-footer{
      background:rgba(255,255,255,.95);
      padding:10px;
      text-align:center;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:clamp(12px,3vw,14px);
      font-weight:700;
      color:#155c3b;
      border-top:1px solid #ddd;
    }
    .card-footer a{
      color:#155c3b; text-decoration:none; transition:color .2s;
    }
    .card-footer a:hover{ color:#0c3e21 }

    .carousel-prev, .carousel-next{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      background:rgba(0,0,0,.5);
      color:#fff;
      border:none;
      padding:10px;
      cursor:pointer;
      z-index:10;
      font-size:20px;
      border-radius:50%;
      width:40px; height:40px;
      display:flex; justify-content:center; align-items:center;
      user-select:none; opacity:.85; transition:opacity .2s;
    }
    .carousel-prev:hover, .carousel-next:hover{ opacity:1 }
    .carousel-prev{ left:10px }
    .carousel-next{ right:10px }

    .carousel-dots{
      text-align:center;
      margin:15px 0 0;
    }
    .dot{
      height:10px; width:10px;
      margin:0 5px;
      background:#bbb;
      border-radius:50%;
      display:inline-block;
      cursor:pointer;
      transition:background-color .3s ease, transform .12s ease;
    }
    .dot.active{ background:#155c3b; transform:scale(1.1) }

    @media (max-width: 768px){
      .carousel-wrapper{ padding-bottom:10px }
      .carousel-item{ width:80% }
      .card-footer{ flex-direction:column; gap:6px }
      .carousel-prev, .carousel-next{
        top:40%;
        width:30px; height:30px; font-size:16px;
      }
    }
      :root{
      --accent: #0d7a45;   /* green border color */
      --bg: #f4faf7;       /* soft page bg */
      --card-bg: #ffffff;  /* frame bg */
      --radius: 16px;
      --shadow: 0 8px 22px rgba(0,0,0,.06);
    }

    *{ box-sizing: border-box; margin:0; padding:0; }
    body{
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: #111;
    }

    .reviews{
      max-width: 1200px;
      margin: 28px auto;
      padding: 0 0 28px;   /* side padding off korlam */
    }

    .reviews .heading{
      background: var(--accent);
      color: #fff;
      text-align: center;
      padding: 12px 16px;
      border-radius: 10px;
      font-weight: 800;
      font-size: clamp(18px, 2.4vw, 26px);
      margin-bottom: 18px;
    }

    .grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;   /* 👉 ekdom gap nai */
    }

    .frame{
      background: var(--card-bg);
      border: 2px solid var(--accent);
      border-radius: 0;  /* corner border ekshathe milbe */
      box-shadow: var(--shadow);
      background-color: #2e2d2d;
  
   
    }

    /* .frame img{
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0; /* images er majhkhane kono gola na thake */
    
    /* } */ */

  .frame1 {
       display: block;
      width: 70%;
      height: auto;
      border-radius: 0; /* images er majhkhane kono gola na thake */
  }
  .frame2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    pointer-events: auto;
  }
    /* Mobile */
    @media (max-width: 768px){
      .grid{ grid-template-columns: 1fr; }
    }
   .small-box {
  height: 400px;      /* আগে যদি 200px থাকে, এটাকে 400px করে দিলাম */
  overflow: hidden;
}

figure{margin:0;padding:0;}

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;              /* halka chhoto gap */
  align-items:start;     /* row stretch bondho */
}

/* .frame{
  border:2px solid #0d7a45;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:4px;
  overflow:hidden; */
/* 
  responsive height: min 200px → fluid (48vw) → max 390px
  height: clamp(200px, 48vw, 390px);
} */


.frame img {
  width: 75%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-left: 65px;
  margin-top: 7px;
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
  .frame img {
    width: 73%; /* Adjust width for better viewing on small screens */
    margin: 10px auto; /* Use auto margins to center the image horizontally */
  }
}
@media (max-width:768px){
  .masonry{ column-count:1; }  /* তোমার মেসনারি লে-আউটের জন্য */
}

/* jodi kono ekta box ektu boro chai */
.big-box{height:360px;}
/* jodi ekta box ektu chhoto chai */
.small-box{height:260px;}
.small-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* image neatly fit hobe */
}

.big-box {
  height: 400px;      /* ✅ sudhu ekta box boro kora holo */
  overflow: hidden;
}

.big-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* ✅ image neatly fit hoye jabe */
}
.review {
  display: flex;          /* flex use korlam */
  align-items: flex-start; /* ✅ content (image) ke top e tule nilam */
  height: 300px;          /* fixed box height (apni iccha moto kom-beshi korte parben) */
  overflow: hidden;
  margin-top: auto;
}

.review img {
  width: 100%;
  height: auto;
  object-fit: contain;      /* image crop hobe na, natural fit thakbe */
  align-self: flex-start; /* ensure upore thake */


}
.full-image {
  height: auto;         /* ✅ box auto hobe */
  overflow: visible;    /* ✅ image kata jabe na */
}

.full-image img {
  width: 100%;
  height: auto;         /* ✅ natural size e full image show hobe */
  object-fit: contain;  /* ✅ crop na hoye pura image dekhabe */
  display: block;
}

/* figure default margin off */
figure{margin:0;padding:0;}

.masonry{
  column-count:2;       /* 2 column layout */
  column-gap:6px;       /* halka gap */
}

.masonry .frame{
  display:inline-block;
  width:100%;
  margin:0 0 6px;       /* niche halka gap */
  break-inside:avoid;   /* block na bhange */
  border:2px solid #0d7a45;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:4px;
}

.masonry .frame img{
  width:100%;
  height:auto;          /* ✅ full image show */
  object-fit:contain;
  display:block;
}
/* FULL image dekhate special override */
.frame.full-image{
  height: auto !important;      /* parent fixed height off */
  overflow: visible !important; /* cropping bondho */
  padding: 4px;                 /* iccha moto */
}

.frame.full-image img{
  display: block;
  width: 100%;
  height: auto !important;      /* natural height */
  object-fit: contain !important; /* pura image dekhabe, crop na */
  max-width: 100%;
  max-height: none;
}

/* (Optional) figure default margin off, jate extra white space na thake */
figure{ margin:0; padding:0; }
@media (max-width:768px){
  .masonry{ column-count:1; }
}

.grid{ align-items: start; }

/* figure er default margin off (extra gap jeno na thake) */
figure{ margin:0; padding:0; }

/* ✅ FULL image override */
.frame.full-image{
  height: auto !important;        /* fixed height off */
  max-height: none !important;
  overflow: visible !important;   /* cropping bondho */
  padding: 4px;                   /* ichchha moto */
}

.frame.full-image img{
  display: block;
  width: 100%;
  height: auto !important;        /* natural aspect ratio */
  object-fit: contain !important; /* full image show, no crop */
}

    .rv-reviews{max-width:1200px;margin:28px auto;padding:0 0 28px}
    .rv-reviews .rv-heading{
      background:var(--accent);color:#fff;text-align:center;padding:12px 16px;
      border-radius:10px;font-weight:800;font-size:clamp(18px,2.4vw,26px);margin-bottom:18px;
    }

    /* Masonry grid */
    .rv-masonry{column-count:2;column-gap:6px}
    .rv-masonry .rv-frame{
      display:inline-block;width:100%;margin:0 0 6px;break-inside:avoid;
      border:2px solid #0d7a45;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:4px;
      cursor:zoom-in;
    }
    .rv-masonry .rv-frame img{width:100%;height:auto;object-fit:contain;display:block}
    @media (max-width:768px){ .rv-masonry{column-count:1} }

    /* ===== Lightbox ===== */
    .rv-lb{
      position:fixed;inset:0;background:rgba(0,0,0,.92);
      display:none;align-items:center;justify-content:center;z-index:9999;
    }
    .rv-lb.rv-show{display:flex}

    /* toolbar (top-right) */
    .rv-toolbar{
      position:fixed;top:16px;right:16px;display:flex;gap:14px;z-index:10010;align-items:center;
    }
    .rv-btn{
      width:40px;height:40px;border-radius:999px;
      background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
      color:#fff;display:flex;align-items:center;justify-content:center;
      font-size:18px;line-height:1;cursor:pointer;backdrop-filter:blur(2px);
      transition:transform .12s ease, background .2s ease;
    }
    .rv-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.20) }
    .rv-btn svg{ width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round }

    /* stage (zoom-scroll) */
    .rv-stage{
      max-width:92vw; max-height:90vh;
      display:flex; align-items:center; justify-content:center;
      overflow:auto;
    }
    .rv-img{
      max-width:100%; max-height:100%; object-fit:contain;
      box-shadow:0 10px 30px rgba(0,0,0,.5);
      user-select:none;
      transition: transform .25s ease; /* smooth zoom */
    }
    .rv-stage.rv-zoomed .rv-img{ transform: scale(1.8); transform-origin:center; cursor:grab; }

    /* arrows */
    .rv-prev,.rv-next{
      position:fixed;top:50%;transform:translateY(-50%);
      background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
      backdrop-filter:blur(2px);color:#fff;font-size:26px;line-height:1;
      width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;
      cursor:pointer;user-select:none;z-index:10005;
    }
    .rv-prev{left:20px}
    .rv-next{right:20px}

    /* counter: top-left */
    .rv-counter{
      position:fixed;top:18px;left:18px;
      color:#fff;font-size:14px;background:rgba(0,0,0,.35);
      padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
      z-index:10000;
    }

    /* ===== Share Popover ===== */
    .rv-pop{
      position:fixed; top:62px; right:16px;
      background:#fff; color:#111;
      border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.35);
      min-width:230px; padding:8px; display:none; z-index:10020;
    }
    .rv-pop.rv-open{display:block}
    .rv-pop:before{
      content:""; position:absolute; top:-8px; right:34px;
      border-left:8px solid transparent; border-right:8px solid transparent;
      border-bottom:8px solid #fff;
      filter: drop-shadow(0 -1px 0 rgba(0,0,0,.08));
    }
  /* Parent list (optional but helpful) */
.rv-list{ width:100%; margin:0; padding:0; }

/* Row item = full width of its container */
.rv-item{
  display:flex; align-items:center; gap:12px;
  width:100%;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:16px 12px;         /* 40px chilo, compact kora holo */
  border-radius:8px;
  font-size:14px; color:#111;
}

/* Left text stretches, right meta fixed */
.rv-item .rv-text{ flex:1 1 auto; min-width:0; }
.rv-item .rv-meta{ flex:0 0 auto; margin-left:auto; }

/* Hover (optional) */
.rv-item:hover{ background:#f5f7f9; }

/* Mobile tweaks */
@media (max-width:768px){
  .rv-item{ padding:14px 10px; gap:10px; }
}
/* Wrap the rows with .rv-bleed */
.rv-bleed{
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;               /* full viewport width */
  background:#fff;           /* set bg if needed */
}

/* Inside it, keep safe horizontal padding */
.rv-bleed .rv-item{
  padding:20px 16px;         /* edge padding */
  border-radius:0;           /* edge-to-edge look */
}

@media (max-width:768px){
  .rv-bleed .rv-item{ padding:14px 12px; }
}

    .rv-item:hover{ background:#f2f2f2; }
    .rv-ico{
      width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:4px; color:#fff; font-weight:700; font-size:13px;
    }
    .rv-ico-fb{ background:#1877F2; }
    .rv-ico-tw{ background:#1D9BF0; }
    .rv-ico-pin{ background:#E60023; }
    .rv-ico-dl{ background:#6c757d; }
    .rv-tip{ font-size:12px; color:#666; padding:6px 12px 2px }
    .rv-no-scroll{overflow:hidden}


  :root{
    --s-gap: 10px;
    --s-radius: 12px;
    --s-shadow: 0 8px 22px rgba(0,0,0,.08);
    --s-title-bg: #0d7a45;
  }

  .saarc-wrap{
    max-width: 1220px;
    margin: 24px auto 32px;
    padding: 0 10px;
  }
  .saarc-title{
    margin: 0 0 12px;
    padding: 10px 14px;
    color: #fff;
    background: var(--s-title-bg);
    border-radius: 10px;
    font: 800 clamp(18px,2.2vw,26px)/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    text-align: center;
    letter-spacing: .2px;
  }

  /* Masonry columns */
  .saarc-masonry{
    column-count: 2;           /* desktop: two columns */
    column-gap: var(--s-gap);
  }
  @media (max-width: 768px){
    .saarc-masonry{ column-count: 1; } /* mobile: single column */
  }

  /* Each tile/card */
  .saarc-item{
    display: inline-block;      /* required for CSS columns */
    width: 100%;
    margin: 0 0 var(--s-gap);
    break-inside: avoid;
    border-radius: var(--s-radius);
    overflow: hidden;
    box-shadow: var(--s-shadow);
    background: #fff;
    border: 1px solid #eaeaea;
  }
  .saarc-item img{
    display: block;
    width: 100%;
    height: auto;               /* keeps original aspect ratio */
    object-fit: contain;        /* no cropping */
    transition: transform .2s ease;
  }
  .saarc-item:hover img{ transform: translateY(-1px) scale(1.01); }
  /* === Replace your Masonry styles with these === */
.saarc-masonry{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns like screenshot */
  gap: 10px;                              /* আইটেমগুলোর মাঝে গ্যাপ */
}

@media (max-width: 768px){
  .saarc-masonry{ grid-template-columns: 1fr; } /* মোবাইলে 1 কলাম */
}

/* figure-এর ডিফল্ট মার্জিন হটান, কার্ড ভাব রাখুন */
.saarc-item{
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
 background:#2625257e;
  border: 1px solid #eaeaea;
}


/* সব ছবিকে সমান উচ্চতার টাইল বানাতে (ক্রপ হবে না চাইলে Option B দেখুন) */
.saarc-item img{
  display: block;
  width: 100%;
  aspect-ratio: 16/9;  /* প্রয়োজনে 3/2, 4/3 ইত্যাদি দিন */
  object-fit: contain;   /* সমান টাইল; সামান্য ক্রপ হতে পারে */
  transition: transform .2s ease;
}
.saarc-item:hover img{ transform: translateY(-1px) scale(1.01); }
 :root{
    --accent:#156c45;      /* শিরোনামের সবুজ রঙ */
    --max:1180px;          /* কনটেন্টের সর্বোচ্চ প্রস্থ */
    --gap:28px;            /* গ্রিড গ্যাপ */
  }



  /* wrapper */
  .proof-wrap{
    margin: 0;
    padding: 10px 12px;
    font-weight: 800;
  }

  /* green heading bar */
  .proof-title{
    background:var(--accent);
    color:#fff;
    text-align:center;
    padding:12px 16px;
    border-radius:8px;
    font-weight:800;
    font-size:clamp(18px,2.8vw,34px);
    letter-spacing:.4px;
    margin-bottom:18px;
  }

  /* two-column collage */
  .proof-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--gap);
    align-items:start;
  }

  /* image cards */
  .shot{
    margin:0;
    line-height:0;              /* img নিচে বাড়তি গ্যাপ যেন না থাকে */
    border-radius:10px;
    overflow:hidden;
    border:1px solid #e9e9e9;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    background:#fff;
  }
  .shot img{
    display:block;
    width:100%;
    height:auto;
  }

  /* responsive */
  @media (max-width: 900px){
    .proof-grid{ grid-template-columns:1fr; }
  }
  :root{
  --green: #1b5f45;     /* ribbon color from screenshot */
  --text:  #0d0d0d;
  --container: 1400px;  /* max width of the content area */
}

/* Section wrapper */
.proof-section{
  background:#fff;
  padding: 18px 0 10px;
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Centered container with side gutters */
.proof-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 26px;     /* white margins on left & right like the screenshot */
}

/* Green ribbon heading bar */
.proof-ribbon{
  background: var(--green);
  color:#fff;
  text-align:center;
  padding: 12px 16px;
  margin: 0 0 20px;
  border-radius: 3px;
  font-family: "Oswald", sans-serif;  /* bold condensed heading */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .5px;
  font-size: clamp(22px, 3.4vw, 44px); /* responsive size */
}

/* Body copy */
.proof-copy{
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.9;
}

.proof-copy p{ margin: 0 0 18px; }
.proof-copy p:last-child{ margin-bottom: 0; }

/* Small screens: keep nice spacing */
@media (max-width: 640px){
  .proof-container{ padding: 0 16px; }
  .proof-ribbon{ border-radius: 2px; }
}
     body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        /* --- Section 1: First Image Design --- */
        .section-one-container {
            max-width: 800px;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .header-bar {
            background-color: #1a5e3d;
            color: white;
            padding: 15px 20px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

        .content-section {
            padding: 30px;
            line-height: 1.6;
            color: #333;
        }

        .content-section p {
            margin-bottom: 20px;
        }

        .content-section p:last-child {
            margin-bottom: 0;
        }

        .content-section strong {
            font-weight: bold;
        }

        /* --- Section 2: Second Image Design --- */
   /* ≤640px: container er vitorei scroll (both axes) */
@media (max-width: 640px){
  .section-two-container{
    width: 100%;
    max-width: 600px;          /* desktop width kept */
    margin: 0 auto;             /* center */
       /* side-e scroll */
    overflow-y: auto;           /* upar-niche scroll */
       /* viewport-er 85% porjonto dekhabe */
 
  }
  /* direct child-ke desktop-er moto chora rakhbo,
     tai container-er vitorei horizontal scrollbar dibe */
  .section-two-container > *{
    min-width: 790px;     
      -ms-overflow-style: none;   /* IE and Edge */
        scrollbar-width: none;      /* Firefox */     /* same as desktop canvas */
  }
    
}


        .program-header {
            background-color: #d1e2c4;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            text-align: center;
        }

        .program-header span {
            padding: 0 15px;
            white-space: nowrap;
        }

        .program-header span:not(:last-child) {
            border-right: 2px solid #a8a8a8;
        }

        .program-columns {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            gap: 20px;
        }

        .program-column {
            flex: 1;
            padding: 10px;
            border-left: 1px solid #ddd;
        }

        .program-column:first-child {
            border-left: none;
        }

        .column-heading {
            font-size: 1.1em;
            font-weight: bold;
            color: #1a5e3d;
            margin-bottom: 5px;
        }
        
        .column-heading.red {
            color: #e44d26; /* A reddish color for Physiology heading */
        }

        .column-subheading {
            font-size: 0.9em;
            color: #555;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .program-column ul {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
        }

        .program-column li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 8px;
            font-size: 0.95em;
            line-height: 1.4;
        }

        .program-column li:before {
            content: "•";
            position: absolute;
            left: 0;
            color: #1a5e3d;
            font-weight: bold;
        }

        .sub-list li {
            padding-left: 15px;
            margin-bottom: 5px;
            font-size: 0.9em;
        }

        .sub-list li:before {
            content: "•";
            color: #555;
        }

        .resource-list li:before {
            content: "•";
            color: #1a5e3d;
        }

        .underline-text {
            text-decoration: underline;
        }

        .icon-text {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .icon-text span {
            font-size: 1.2em;
        }
      
  :root{
    --bg:#f6f7f5;
    --text:#111827;
    --muted:#4b5563;
    --green:#155c3b;
    --green-2:#22c55e;
    --radius:16px;
    --shadow:0 12px 28px rgba(0,0,0,.12);
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
    line-height:1.6;
  }
  .wrap{
    max-width:1280px;
    margin:24px auto 40px;
    padding:0 18px;
  }

  /* grid */
  .twocol{
    display:grid;
    gap:36px;
    grid-template-columns:1fr;
    align-items:start;
  }
  @media (min-width:1024px){
    .twocol{ grid-template-columns:1fr 1fr; }
  }

  /* art cards */
  .art{
    border-radius:18px;
    border:3px solid #176644;
    box-shadow:var(--shadow);
    background:#fff;
    overflow:hidden;
  }
  .art img{
    display:block; width:100%; height:auto;
  }

  /* headings */
  .h1{
    font-family:"Oswald",sans-serif;
    font-size:clamp(26px,3.2vw,44px);
    margin:28px 0 14px;
  }
  .h2{
    font-family:"Oswald",sans-serif;
    font-size:clamp(24px,2.8vw,40px);
    margin:0 0 18px;
  }

  /* lists */
  .tick-list,.arrow-list{ list-style:none; padding:0; margin:0; }
  .tick-list li, .arrow-list li{
    position:relative; padding-left:34px; margin:12px 0;
    font-weight:600;
  }
  .tick-list li::before{
    content:""; position:absolute; left:0; top:.25em;
    width:22px; height:22px; border-radius:6px; background:#eafff0; border:2px solid var(--green-2);
    box-shadow:inset 0 0 0 2px rgba(34,197,94,.15);
  }
  .tick-list li::after{
    content:"✓"; position:absolute; left:4px; top:.05em; font-weight:700; color:var(--green-2);
  }

  .arrow-list li::before{
    content:"👉"; position:absolute; left:0; top:.05em; font-size:20px;
  }

  /* right lower illustration keeps same look */
  .right-bottom{
    margin-top:28px;

  }

  :root{
    --row-border:#e5e7eb;
    --text:#111827;
    --muted:#4b5563;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; font-family: Arial, Helvetica, sans-serif; color:var(--text);
    background:#fafafa;
  }

  /* Outer box like screenshot */
  .faq-box{
    max-width: 1180px;
    margin: 18px auto 40px;
    padding: 0;
    border:1px solid var(--row-border);
    background:#fff;
  }

  /* Each FAQ row (closed state looks like your image) */
  .faq{
    border-top:1px solid var(--row-border);
    overflow:hidden;
  }
  .faq:first-child{ 
    margin-top: -72px;
  }

/* Responsive clickable question bar */
.faq summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  background:#fff;

  /* 🔧 Responsive measurements */
  --padY: clamp(12px, 2.8vw, 22px);
  --padX: clamp(12px, 2.6vw, 18px);
  --icon: clamp(18px, 4.6vw, 22px);   /* left circle size */
  --gapL: 12px;                       /* icon & text-er majhe gap */

  padding: var(--padY) var(--padX) var(--padY)
           calc(var(--padX) + var(--icon) + var(--gapL));
  font-weight:800;
  font-size: clamp(16px, 4.2vw, 22px); /* mobile→desktop scale */
  margin:0;

  /* long question wrap safety */
  line-height:1.35;
  white-space:normal;
  word-break:break-word;
  min-height:44px; /* proper tap target on mobile */
}

/* Left icon (black circle + white +/− or arrow if you used that) */
.faq summary::before{
  content:"+";
  position:absolute;
  left: var(--padX);
  top:50%;
  transform: translateY(-50%);
  width: var(--icon);
  height: var(--icon);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#1f2328; color:#fff;
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight:900;
}
.faq[open] summary::before{ content:"−"; }

/* Optional: subtle hover/focus */
.faq summary:hover{ background:#fbfbfb; }
.faq summary:focus-visible{ outline:2px solid #cbd5e1; outline-offset:2px; }

/* Slightly roomier on very large screens */
@media (min-width:1280px){
  .faq summary{ --padY: 24px; --padX: 22px; }
}

  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary:hover{ background:#fbfbfb; }

  /* Left icon: black circle with white + / − */
  .faq summary::before{
    content:"+";
    position:absolute; left:18px; top:50%;
    transform:translateY(-50%);
    width:22px; height:22px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:#1f2328; color:#fff;
    font-size:14px; font-weight:900;
  }
  .faq[open] summary::before{ content:"−"; }

  /* Answer panel (not shown in your screenshot, but ready) */
  .faq .answer{
    padding:14px 18px 22px 56px;
    border-top:1px solid var(--row-border);
    color:var(--muted);
    font-weight:400;
    font-size:16px;
    background:#fff;
  }


  .contact-wrap{
    max-width:1260px;
    margin:28px auto 60px;
    padding:0 22px;
  }

  /* Red CTA */
  .cta{
    display:inline-block;
    background:var(--red);
    color:#fff;
    font-weight:800;
    letter-spacing:.3px;
    text-decoration:none;
    padding:14px 22px;
    border-radius:8px;
    margin:6px auto 18px;
    box-shadow:0 6px 18px rgba(225,29,37,.25);
  }
  .cta:hover{ filter:brightness(.95); }
  .cta:active{ transform:translateY(1px); }

 
  /* Grid */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:38px 36px;
  }
  @media (min-width:900px){
    .contact-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (min-width:640px) and (max-width:899px){
    .contact-grid{ grid-template-columns:repeat(2,1fr); }
  }

  .contact{
    padding:8px 8px 0;
    border-left:1px solid #e5e7eb;
  }
  .contact:first-child{ border-left:0; }
  @media (max-width:899px){
    .contact{ border-left:0; border-top:1px solid #e5e7eb; padding-top:18px; }
    .contact:first-child{ border-top:0; }
  }

  .contact h3{
    margin:0 0 12px;
    font-family:"Oswald",sans-serif;
    font-size:clamp(18px,2vw,28px);
    letter-spacing:.2px;
    color:var(--g2);
  }

  .tel{
    margin:8px 0;
    font-size:clamp(18px,2vw,28px);
    font-weight:800;
    color:#0b7a47;
  }

  .addr{
    margin:14px 0 6px;
    color:var(--muted);
    line-height:1.75;
    font-size:clamp(15px,1.25vw,18px);
  }

  /* Center CTA row */
  .cta-row{ text-align:center; }

  /* :root{
    --bg:#155c3b;        
    --line:#2ec4de;      
    --text:#eaf7f0;     
    --muted:#cfe8db;
    --card:#0f4e31;     
    --radius:10px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:#fff} */

  /* Footer */
  .alft-footer{
    background:var(--bg);
    color:var(--text);
    padding:28px 0 60px;
    position:relative;
  }
  .alft-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 22px;
  }

  /* Grid: 4 columns -> 2 -> 1 */
  .alft-grid{
    display:grid;
    gap:28px 36px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width:1024px){
    .alft-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width:640px){
    .alft-grid{ grid-template-columns: 1fr; }
  }

  /* Section titles with twin pipes */
  .alft-title{
    margin:10px 0 14px;
    font-weight:800;
    font-size:clamp(18px,2.1vw,22px);
    display:flex; align-items:center; gap:10px;
  }
  .alft-title::before{
    content:"";
    width:3px; height:18px; background:var(--line);
    box-shadow:6px 0 0 var(--line); /* two vertical lines */
  }

  /* Recent posts */
  .alft-post{
    display:flex; gap:14px; align-items:center;
    padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12);
  }
  .alft-post:last-child{ border-bottom:0; }
  .alft-post img{
    width:105px; height:67px; object-fit:cover; border-radius:6px;
    display:block; filter:brightness(.95);
  }
  .alft-post p{
    color:#fff; margin:0; font-weight:600; line-height:1.35;
  }
  .alft-post p:hover{ text-decoration:underline; }
  .alft-post .alft-meta{ color:var(--muted); font-size:12px; margin-top:6px; }

  /* Social icons */
  .alft-social{
    display:grid; grid-template-columns: repeat(4, 56px);
    gap:14px; margin:8px 0 4px; padding:0; list-style:none;
  }
  .alft-social a{
    width:56px; height:56px; display:grid; place-items:center;
    border-radius:8px; color:#fff; text-decoration:none;
    box-shadow:0 10px 20px rgba(0,0,0,.18);
  }
  .alft-tw{background:#1DA1F2} .alft-fb{background:#1877F2} .alft-ig{background:#405DE6}
  .alft-in{background:#0A66C2} .alft-pt{background:#E60023} .alft-fl{background:#ff5fa2}
  .alft-tm{background:#34465d} .alft-yt{background:#FF0000}
  .alft-social a:hover{ filter:brightness(.92); transform:translateY(-1px); }

  /* Search box */
  .alft-search input{
    width:100%; padding:14px 16px;
    border:1px solid rgba(255,255,255,.25);
    background:var(--card); color:#fff;
    border-radius:12px; outline:none;
  }
  .alft-search input::placeholder{ color:#cfe2d7; }

  /* Translate */
  .alft-translate-label{ margin:16px 0 8px; font-weight:700; }
  .alft-translate{
    display:flex; align-items:center; gap:10px;
    background:var(--card); border:1px solid rgba(255,255,255,.25);
    color:#fff; border-radius:10px; padding:8px 12px; width:max-content;
  }
  .alft-flag{ font-size:20px; }
  .alft-translate select{
    background:transparent; color:#fff; border:0; outline:none;
    appearance:none; padding-right:18px; font-weight:600;
  }
  .alft-translate select option{ color:#111; background:#fff; }

  /* Facebook placeholder box */
  .alft-fb-box{
    border:1px dashed rgba(255,255,255,.35);
    border-radius:10px; height:76px;
    display:grid; place-items:center; color:var(--muted);
  }

/* Floating WhatsApp */
.alft-wa-float {
    position: fixed;
    right: 61px;          
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 28px;
    box-shadow: 0 12px 24px rgba(0,0,0,.3);
    z-index: 99;
    margin-bottom: 86px;   /* Phone বাটনের জন্য space */
}

/* Floating Phone */
.alft-call-float {
    position: fixed;
    right: 61px;          
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #16b85c;   /* ফোনের রঙ */
    color: #fff;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 24px;
    box-shadow: 0 12px 24px rgba(0,0,0,.3);
    z-index: 98;           /* WhatsApp এর নিচে থাকবে */
}

/* মোবাইলে বাইরে বেরোবে না */
@media (max-width: 768px) {
  .alft-wa-float {
    right: 16px !important;
    bottom: 86px !important;   /* ফোনের উপর বসবে */
    margin-bottom: 0 !important;
  }
  .alft-call-float {
    right: 60px !important;
    bottom: 16px !important;
  }
}


  /* Small circular arrows that sit NEXT TO the image */


/* Mobile-e aro beshi tappable */


  .alft-wa-float:hover{ filter:brightness(.95); transform:translateY(-1px); }
  /* :root {
    --bg: #1A4D2E;
    --text: #F8F9FA;
    --line: #A3BF9B;
    --muted: #D3D3D3;
    --card: #2E8B57;
  } */

  /* Footer main */
  .alft-footer {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    padding: 28px 0 60px;
    position: relative;
    background: var(--green) !important; 
  }
  .alft-footer .alft-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 22px;
  }

  /* Grid */
  .alft-footer .alft-grid {
    display: grid;
    gap: 28px 36px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 1024px) {
    .alft-footer .alft-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .alft-footer .alft-grid { grid-template-columns: 1fr; gap: 22px; }
  }

  /* Section titles */
  .alft-footer .alft-title {
    margin: 10px 0 14px;
    font-weight: 800;
    font-size: clamp(18px, 2.1vw, 22px);
    display: flex; align-items: center; gap: 10px;
  }
  .alft-footer .alft-title::before {
    content: ""; width: 3px; height: 18px; background: var(--line);
    box-shadow: 6px 0 0 var(--line);
  }

  /* Recent posts */
  .alft-footer .alft-post {
    display: grid; grid-template-columns: 105px 1fr;
    gap: 14px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .alft-footer .alft-post:last-child { border-bottom: 0; }
  .alft-footer .alft-post img {
    width: 105px; height: 67px; object-fit: cover; border-radius: 6px; display: block; filter: brightness(.95);
  }
  .alft-footer .alft-post p { color: #fff; margin: 0 0 6px; font-weight: 600; line-height: 1.35; }
  .alft-footer .alft-post p:hover { text-decoration: underline; }
  .alft-footer .alft-post .alft-meta { color: rgb(35, 7, 92); font-size: 12px; }

  @media (max-width: 480px){
    .alft-footer .alft-post { grid-template-columns: 88px 1fr; }
    .alft-footer .alft-post img { width: 88px; height: 56px; }
  }

  /* Social icons */
  .alft-footer .alft-social {
    display: grid;
    grid-template-columns: repeat(4, 56px);
    gap: 14px; margin: 8px 0 4px; padding: 0; list-style: none;
  }
  .alft-footer .alft-social a {
    width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: 8px; color: #fff; text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
  }
  .alft-footer .alft-tw{background:#1DA1F2}
  .alft-footer .alft-fb{background:#1877F2}
  .alft-footer .alft-ig{background:#405DE6}
  .alft-footer .alft-in{background:#0A66C2}
  .alft-footer .alft-pt{background:#E60023}
  .alft-footer .alft-fl{background:#ff5fa2}
  .alft-footer .alft-tm{background:#34465d}
  .alft-footer .alft-yt{background:#FF0000}
  .alft-footer .alft-social a:hover{ filter:brightness(.92); transform:translateY(-1px); }

  /* Auto-fit icons on small screens */
  @media (max-width: 640px){
    .alft-footer .alft-social{
      grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
      gap: 12px;
    }
    .alft-footer .alft-social a{ width: 100%; height: 52px; }
  }

  /* Search box */
  .alft-footer .alft-search-box { position: relative; }
  .alft-footer .alft-search-box input {
    width: 66%;
    padding: 14px 16px;
    border: 1px solid rgba(16,16,16,.25);
    background: #fff; color: #111;
    border-radius: 12px; outline: none;
  }
  .alft-footer .alft-search-box input::placeholder { color: #888; }

  /* Translate */
  .alft-footer .alft-translate-label { margin: 16px 0 8px; font-weight: 700; }
  .alft-footer .alft-translate {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid rgba(255,255,255,.25);
    color: #111; border-radius: 10px; padding: 8px 12px; width: 66%;
    max-width: 420px;
  }
  .alft-footer .alft-flag { font-size: 20px;  margin-bottom: 10px;}
  .alft-footer .alft-translate select {
    background: transparent; color: #111; border: 0; outline: none;
    appearance: none; padding-right: 18px; font-weight: 600; width: 100%;
  }
  .alft-footer .alft-translate .fa-angle-down { color: #111; }

  /* Facebook placeholder box */
  .alft-footer .alft-fb-box {
    border: 1px dashed rgba(255,255,255,.35);
    border-radius: 10px; height: 76px;
    display: grid; place-items: center; color: var(--muted);
    background: rgba(255,255,255,.06);
  }

  /* Floating WhatsApp */
  .alft-footer .alft-wa-float{
    position: fixed; right: 18px; bottom: 18px;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color:#fff; display:grid; place-items:center;
    text-decoration:none; font-size:28px; box-shadow:0 12px 24px rgba(0,0,0,.3);
    z-index: 99;
  }
  .alft-footer .alft-wa-float:hover{ filter: brightness(.95); transform: translateY(-1px); }

  @media (max-width: 480px){
    .alft-footer .alft-wa-float{ right: 12px; bottom: 12px; width: 52px; height: 52px; font-size: 26px; }
  }

  /* Copyright */
  .alft-footer .alft-copyright{
    text-align:center; color: rgb(9, 9, 10); font-size: 14px; margin-top: 30px;
  }
  /* Floating Call Button */
/* ---- Floating FAB settings (desktop + mobile safe) ---- */
:root{
  --fab-size: 56px;
  --fab-gap: 12px;
  --fab-right-desktop: 10px;  /* ← হালকা বামে (আগের 61/62px থেকে একটু বেশি) */
  --fab-right-mobile: 30px;   /* মোবাইলে স্ক্রিনের ভেতরে snug */
  --fab-bottom-safe: max(12px, env(safe-area-inset-bottom)); /* iOS safe area */
}
a {
  color: inherit;          /* লেখা রঙ চারপাশের মতো */
  text-decoration: none;   /* underline কেটে দিবে */
  border: none;            /* কোনো border আসবে না */
  outline: none;           /* focus করলে নীল outline আসবে না */
  font-size: 13px;
  font-weight: bold;
}
.logo {
  filter: brightness(0) invert(1); /* সাদা করে দেবে */
}
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;          /* এখানে gap ঠিক করুন (4–10px) */
  text-decoration: none;
  color: #2b2b2b;
  font-size: 16px;
}
.submenu-toggle i {
  margin-left: 6px;   /* টেক্সট আর আইকনের মধ্যে স্পেস */
}

a:focus, 
a:active, 
a:hover {
  color: inherit;          /* hover/focus/active এও একই */
  text-decoration: none;
  outline: none;
}
a { color:hsl(0, 1%, 83%); }

/* বেস: দুটো বাটনেরই ফিক্সড অবস্থান */
.alft-wa-float,
.alft-call-float{
  position: fixed;
  right: var(--fab-right-desktop);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(0,0,0,.3);
  z-index: 9999;
  margin-bottom: 0 !important; /* আগের margin-bottom থাকলে নিষ্ক্রিয় */
}

/* WhatsApp: একদম নিচে */
.alft-wa-float{
  bottom: var(--fab-bottom-safe);
  /* আপনার আগের রঙ/ফন্ট থাকলে থাকবে */
}

/* Phone: WhatsApp-এর একদম ওপরে (ফিক্সড গ্যাপ সহ) */
.alft-call-float{
  bottom: calc(var(--fab-bottom-safe) + var(--fab-size) + var(--fab-gap));
  /* আপনার আগের রঙ/ফন্ট থাকলে থাকবে */
}

/* মোবাইল সেফ পজিশনিং */
@media (max-width: 768px){
  .alft-wa-float,
  .alft-call-float{
    right: var(--fab-right-mobile) !important; /* ভেতরে রাখে */
  }
}


.alft-flag { font-size: 20px; }

.alft-translate .fa-angle-down {
  margin-left: auto;
  transition: transform .3s;
}

.alft-translate.open .fa-angle-down {
  transform: rotate(180deg);
}

.alft-options {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  z-index: 100;
}

.alft-options div {
  padding: 10px;
  cursor: pointer;
}

.alft-options div:hover {
  background: #f1f1f1;
}

.alft-translate.open .alft-options {
  display: block;
}
 body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    footer {
      background:#1a2533;
      color: #e6e6e6;
      padding: 40px 20px;
    }

    .footer-container {
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* now 5 columns */
      gap: 30px;
      align-items: start;
    }

    /* Logo and description */
    .footer-logo img {
      width: 200px;
      margin-bottom: 10px;
    }
    .footer-logo h2 {
      margin: 0;
      font-size: 22px;
      color: #fff;
    }
    .footer-logo p {
      margin: 8px 0;
      line-height: 1.5;
      font-size: 14px;
      color: #ccc;
    }
#email-line { cursor: pointer; }
#email-line:hover { text-decoration: underline; }

    /* Links */
    .footer-links h4 {
      color: #fff;
      margin-bottom: 12px;
      font-size: 16px;
    }
    .footer-links ul {
      list-style: none;
      padding: 0;
    }
    .footer-links ul li {
      margin: 6px 0;
    }
    .footer-links ul li a {
      text-decoration: none;
      color: #ccc;
      font-size: 14px;
      transition: color 0.3s;
    }
    .footer-links ul li a:hover {
      color: #00c853;
    }

    /* Contact Info */
    .footer-contact h4 {
      color: #fff;
      margin-bottom: 12px;
      font-size: 16px;
    }
    .footer-contact p {
      font-size: 14px;
      margin: 8px 0;
      color: #ccc;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-contact i {
      color: #160299;
      font-size: 16px;
    }

    /* Social */
    .footer-social h4 {
      color: #fff;
      margin-bottom: 12px;
      font-size: 16px;
    }
    .footer-social a {
      display: inline-block;
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border-radius: 50%;
      background: #2c3b50;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
      transition: background 0.3s;
    }
    .footer-social a:hover {
      background: #00c853;
    }

    /* WhatsApp floating button */
    .whatsapp-float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #25d366;
      color: white;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      text-decoration: none;
      z-index: 1000;
    }
html {
  scroll-behavior: smooth; /* smooth auto scroll */
}

/* Jodi fixed header thake, target section jeno header er niche dhaka na pore */
#why-bd { 
  scroll-margin-top: 80px; /* header height moto kore din */
}

/* (Optional) target e click korar por halka highlight */


    /* Copyright */
    .footer-bottom {
      text-align: center;
      margin-top: 30px;
      font-size: 13px;
      color: #aaa;
    }
    
/* --- Footer Social: 1-row, no overflow --- */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;   /* center the row */
  gap: 12px;                 /* space between icons */
  max-width: 100%;
  padding: 6px 0;
  box-sizing: border-box;
}

.footer-social h4 {
  width: 100%;
  text-align: center;
  margin: 0 0 10px 0;
}

/* Icon buttons */
.footer-social a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;               /* fixed circle size */
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  flex: 0 0 44px;            /* don’t stretch/shrink */
  outline: 1px solid rgba(255,255,255,0.08);
}

/* Icons size */
.footer-social a i { font-size: 18px; }

/* Small screens: shrink so sab ek row me aa jaye */
@media (max-width: 600px) {
  .footer-social { gap: 8px; }
  .footer-social a {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  .footer-social a i { font-size: 16px; }
}

/* Safety: page edges pe overflow na ho */
html, body { margin: 0; padding: 0; }

    /* Responsive */
    @media (max-width: 992px) {
      .footer-container {
        grid-template-columns: 2fr 1fr 1fr;
        align-items: start;
      }
    }
   /* Mobile: footer items start from left (no centering) */
@media (max-width: 600px){
  footer .footer-container{
    grid-template-columns: 1fr !important;
    justify-items: start !important;   /* left align grid items */
    align-items: start !important;
    text-align: left !important;
    padding-left: 16px !important;     /* adjust as needed */
    padding-right: 16px !important;
    margin: 0 !important;
  }
  /* make each column start from left */
  footer .footer-container > *{
    justify-self: start !important;
    width: 100%;
    margin: 0 !important;
  }
  /* logo should not be centered */
  footer .footer-logo .logo{
    display: block; margin: 0 0 12px 0 !important;
  }
  /* Follow Us icons stay from left */
  .footer-social{ text-align: left !important; }
  .footer-social .icons{ justify-content: flex-start !important; }
}

  
    .footer-social {
  display: grid;
  grid-template-columns: repeat(4, 60px); /* 4 icons per row */
  gap: 10px 10px; /* row-gap (top-bottom) | column-gap (left-right) */
  justify-content: center; /* center the whole grid */
  margin-right: 165px;
}

.footer-social h4 {
  grid-column: 1 / -1; /* Follow Us text will stay on top full row */
  margin-bottom: 10px;
  font-size: 16px;
  color: #fff;
  margin-left: -94px;
}

.footer-social a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c3b50;
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  transition: background 0.3s;
}

.footer-social a:hover {
  background: #00c853;
}
.top-header {
  background-color: #155c3b;
  opacity: 0.;
  color: #fff;
  padding: 10px 20px;

}
.hero-section {

  background: #155c3b;
  color: #fff;
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 14px;
}
/* base reset */
html, body { margin: 0; padding: 0; }

/* full-width header wrapper */
.header { width: 100%; }

/* the centered row */
.header-content{
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* keep the row centered */
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;

  /* consistent inner breathing room */
  padding: 0 16px;
  box-sizing: border-box;

  /* prevent random wrapping on wider screens */
  flex-wrap: nowrap;
  gap: 16px;
}

/* make children behave consistently */
.header-content > *{
  flex: 0 0 auto;    /* don’t stretch */
  min-width: 0;      /* prevent overflow if text is long */
}

/* logo sizing keeps row height stable */
.header-logo img{
  display: block;
  height: 48px;      /* adjust as needed */
  width: auto;
}

/* horizontal nav always in one line */
.header-nav ul{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* optional: force desktop-specific consistency */
@media (min-width: 1024px){
  .header-content{ flex-wrap: nowrap; }
}


/* Navigation menu left side */
.hero-section {
  background: #155c3b;
  color: #fff;
  padding: 20px;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Desktop nav */
.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:20px; align-items:center;
}
.nav-links li a{ color:#fff; text-decoration:none; font-weight:600; }
.hamburger{ font-size:26px; background:none; border:none; color:#fff; cursor:pointer; display:none; }


/* Mobile drawer */
@media (max-width:992px){
  .hamburger{ display:block; }
  .nav-links{
    position:fixed; top:0; right:-260px;      /* hidden off-canvas */
    height:100vh; width:260px;
    display:flex; flex-direction:column; gap:14px;
    padding:20px 16px;
    background:#155c3b;                       /* your green */
    overflow-y:auto;                           /* scrollable items */
    box-shadow:-6px 0 16px rgba(0,0,0,.25);
    transition:right .25s ease;
    z-index:999;
  }
  .nav-links.show{ right:0; }                 /* slide in */
  /* optional: stop page scroll when menu open */
  body.menu-open{ overflow:hidden; }
}

/* Backdrop (for outside click) */
.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:998;
}
/* ========================================================================= */
/* Hero Section Layout */
/* ========================================================================= */

.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1rem 16px;
  background-color: var(--brand);
  color: #fff;
}



/* ========================================================================= */
/* Main Navigation */
/* ========================================================================= */

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-links li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap; /* Prevents text from wrapping */
}

/* ========================================================================= */
/* Mobile Adjustments */
/* ========================================================================= */

.hamburger {
  font-size: 26px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: none; /* Hidden on desktop */
}

@media (max-width: 992px) {
  .nav-links {
    display: none; /* Hide the links on mobile */
  }
  .hamburger {
    display: block; /* Show the hamburger on mobile */
  }
}
.backdrop.show{ opacity:1; pointer-events:auto; }


/* nav links (desktop) */
.nav-links {
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-links li { margin: 0; }

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.nav-links a:hover { color: #ffd700; }

/* hamburger button */
.hamburger {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  margin-top: 5px;
}

/* ===== Mobile Styles ===== */
@media (max-width: 768px) {
  .hamburger { display: flex; text-decoration: none;  }

  .nav-links {
    display: none;           /* hide by default */
    flex-direction: column;
    background: #155c3b;
    margin-top: 15px;
    gap: 15px;
    padding: 15px 0;
  }

  .nav-links.show { display: flex; }
}
.hero-section {
  background: #155c3b;
  color: #fff;
  padding: 20px;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* heading + hamburger same row */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between; /* h1 left, button right */
}

.hero-top h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

/* hamburger button */
.hamburger {
  font-size: 26px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: none; /* desktop e off */
}

/* nav links (desktop) */
.nav-links {
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}
.nav-links a:hover { color: #ffd700; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .hamburger { display: block; } /* show hamburger on mobile */

  .nav-links {
    display: none;               /* hide by default */
    flex-direction: column;
    background: #155c3b;
    margin-top: 15px;
    gap: 15px;
    padding: 15px 0;
  }

  .nav-links.show { display: flex; }
}


/* Social icons right side */
.social-icons {
  list-style: none;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.social-icons a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}
/* ==== NAV LAYOUT ======================================================= */
.main-nav{
  position: relative;
  background:#155f43;          /* তোমার bar color */
  overflow: visible;           /* dropdown যেন কাটা না পড়ে */
  z-index: 500;
}
.desktop-nav{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0;
  justify-content:center;      /* যা ছিল তাই রাখলাম */
}
.desktop-nav > li{ position:relative; }

/* Link style + blue underline on hover/active */
.desktop-nav > li > a{
  display:inline-block;
  padding:16px 10px;
  color:#fff; text-decoration:none; font-weight:700;
  position:relative;
}
.desktop-nav > li > a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:8px;
  height:3px; background:#1e90ff;     /* নীল লাইন */
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.desktop-nav > li > a:hover::after,
.desktop-nav > li.is-open > a::after{ transform:scaleX(1); }

/* ==== SUBMENU ========================================================== */
.desktop-nav .submenu{
  position:absolute;
  top:calc(100% + 10px);  /* লিঙ্কের একটু নীচে */
  left:0;
  min-width:240px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:8px 0;
  margin:0; list-style:none;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  display:none;
  z-index:3000;            /* অন্যান্য overlay-এর উপরে */
  overflow:visible;
}
.desktop-nav .submenu li a{
  display:block;
  padding:10px 14px;
  color:#0f172a; text-decoration:none; font-weight:600;
  white-space:nowrap;
}
.desktop-nav .submenu li a:hover{ background:#f1f5f9; }

/* JS যেই class দেয়—তাতেই submenu খোলে */
.desktop-nav .has-submenu.is-open > .submenu{ display:block; }

/* কোনো wrapper যেন dropdown কাটে না */
.banner-section, .form-container, .form-wrapper{ overflow:visible !important; }

/* মোবাইলেও ঠিক করে ক্লিক পাওয়া */
@media (max-width: 768px){
  .desktop-nav > li > a{ padding:14px 8px; }
}
/* ====== Desktop nav base ====== */
.main-nav{ position:relative; z-index:100; }
.desktop-nav{
  display:flex; align-items:center; gap:28px;
  list-style:none; margin:0; padding:0;
}
.desktop-nav > li{ position:relative; }         /* anchor for dropdown */
.desktop-nav > li > a{
  display:inline-block; padding:14px 10px; color:#fff;
  font-weight:700; text-decoration:none;
  font-size:16px; /* iOS zoom এড়ায় */
}

/* ====== Card dropdown (like screenshot) ====== */
.desktop-nav .submenu{
  position:absolute;
  top: calc(100% + 12px);      /* trigger-এর ঠিক নিচে */
  right: 0;                    /* টগলের ডানদিকে সারিবদ্ধ */
  width: 280px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:8px 0;
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
  opacity:0;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;         /* বন্ধ থাকলে ক্লিক পাবে না */
  z-index:1000;
}

/* ছোট টিপ / arrow */
.desktop-nav .submenu::before{
  content:"";
  position:absolute;
  top:-8px; right:24px;
  width:16px; height:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-bottom:none; border-right:none;
  transform: rotate(45deg);
  box-shadow: -2px -2px 6px rgba(0,0,0,.03);
}

/* খোলা অবস্থায় */
.desktop-nav .has-submenu.is-open > .submenu{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

/* আইটেম স্টাইল */
.desktop-nav .submenu li{ list-style:none; }
.desktop-nav .submenu li a{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  color:#0f172a; text-decoration:none; font-weight:600;
  border-radius:12px; margin:0 8px;
}
.desktop-nav .submenu li a:hover{
  background:#f4f6f8;
}

/* বিভাজক (যদি গ্রুপ আলাদা করতে চাও) */
.desktop-nav .submenu li.divider{
  height:1px; background:#eaecef; margin:8px 0;
}



/* ‘PRO’ ব্যাজ চাইলে */
.badge-pro{
  margin-left:auto; font-size:12px; font-weight:800;
  padding:2px 8px; border-radius:999px;
  background:#e957f6; color:#fff;
}

/* কোনো wrapper যদি dropdown কাটে, এইটা রাখো */
header, .header, .navbar, .main-nav{ overflow:visible !important; }
/* আগে ছিল right:0;  এখন left:0; দিলে dropdown লিংকের নিচে বামে খুলবে */
.desktop-nav .submenu{
  left: 0;
  right: auto;                 /* remove overlay towards the logo */
  top: calc(100% + 12px);
}

/* ছোট arrow-টাও বামের দিকে আনো */
.desktop-nav .submenu::before{
  left: 24px;
  right: auto;
}

/* Extra safety: লোগোর দিকে না গিয়ে ডানদিকে ফাঁকা রাখবে */
@media (min-width: 992px){
  .desktop-nav .submenu{
    max-width: 320px;          /* চাইলে কম/বেশি */
  }
}
/* ===== macOS-style card dropdown (no HTML/JS change) ===== */

/* কার্ড কনটেইনার */
.desktop-nav .submenu{
  width: 320px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 6px 0;
  box-shadow:
      0 4px 10px rgba(0,0,0,.06),
      0 16px 40px rgba(0,0,0,.12);
  /* আগের ভিজিবিলিটি/অ্যানিমেশন যেমন ছিল তেমনই থাকুক */
}

/* ছোট ত্রিভুজ টিপ (কার্ডের উপরে) */
.desktop-nav .submenu::before{
  content:"";
  position:absolute;
  top:-8px;
  left: var(--arrow-left, 24px);   /* JS আগের মতোই সেট করবে */
  width:16px; height:16px;
  background:#fff;
  border:1px solid #e6e9ef;
  border-bottom:none; border-right:none;
  transform:rotate(45deg);
  box-shadow:-2px -2px 6px rgba(0,0,0,.03);
}

/* আইটেম—স্ক্রিনশটের মতো ফাঁক-ফোকর/টাইপোগ্রাফি */
.desktop-nav .submenu li{ list-style:none; }
.desktop-nav .submenu li a{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px;
  margin: 0 6px;                  /* ভেতরে সামান্য মার্জিন */
  border-radius: 10px;
  color:#0f172a;
  font-size: 15px;
  font-weight: 600;
  text-decoration:none;
  line-height: 1.25;
  white-space: nowrap;
}
.desktop-nav .submenu li a:hover{
  background:#f5f7fb;             /* হালকা হোভার */
}

/* গ্রুপ ডিভাইডার চাইলে (ঐচ্ছিক): <li class="sep"></li> দিলে কাজ করবে */
.desktop-nav .submenu li.sep{
  height: 1px;
  background: #eceff4;
  margin: 6px 0;
  pointer-events: none;
}

/* ডানপাশে সাবমেনু ইন্ডিকেটর (যদি nested submenu থাকে) */
.desktop-nav .submenu li.has-sub > a::after{
  content: "›";
  margin-left: auto;
  opacity:.6;
}

/* ড্রপডাউন খোলা অবস্থায় স্ন্যাপি অ্যানিমেশন – তোমার আগের rules ধরে রাখি */
.desktop-nav .has-submenu.is-open > .submenu{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

/* মেনু-লিঙ্ক (টপ বার) – একটু পরিষ্কার দেখা যায় */
.desktop-nav > li > a{
  padding: 12px 10px;
  font-weight: 700;
  color: #fff;
}
/* === FORCE DROPDOWN BELOW THE TRIGGER === */
.main-nav,
.header,
.navbar { overflow: visible !important; }

.desktop-nav > li { position: relative; }  /* anchor */

.desktop-nav .submenu{
  position: absolute;
  top: calc(100% + 12px) !important;  /* link-এর ঠিক নিচে */
  left: 0 !important;                 /* ট্রিগারের বাঁদিক থেকে শুরু */
  right: auto !important;
  transform: translateY(8px) scale(.98);  /* তোমার আগের এনিমেশন রাখলে */
  transform-origin: top center;
  z-index: 2000;                      /* উপরেই থাকবে, কিন্তু লোগো ঢাকবে না */
}

/* ছোট ত্রিভুজ/arrow যেন ওপরে থাকে */
.desktop-nav .submenu::before{
  top: -8px !important;
  left: 24px !important;   /* চাইলে 24px বদলে নাও */
  right: auto !important;
}

/* Mobile: কার্ডটা একটু মাঝখানে */
@media (max-width: 768px){
  .desktop-nav .submenu{
    left: 50% !important;
    transform: translate(-50%, 8px) scale(.98);
    width: min(320px, 90vw);
  }
}
@media (min-width: 992px){
  .desktop-nav .submenu{
    left: -120px !important;     /* ⬅️ 24px বামে নিলাম */
  }
  .desktop-nav .submenu::before{
    left: 200px !important;       /* তীর/arrow-টা ঠিক জায়গায় রাখতে */
  }
}
:root{ --submenu-shift: -24px; }   /* যতটা বামে নিতে চাও, নেগেটিভ ভ্যালু দাও */

@media (min-width: 992px){
  .desktop-nav .submenu{
    left: 90px
  }
  /* submenu বামে গেলে arrow ডানদিকে একই পরিমাণে শিফট হবে */
  .desktop-nav .submenu::before{
    left: calc(90px - var(--submenu-shift)) !important;
  }
}


/* নিরাপত্তা: কোনো header/navbar overflow যেন ড্রপডাউন কাটে না */
header, .header, .navbar, .main-nav{ overflow: visible !important; }

.college-logo {
  width: 130px;
  height: auto;
  filter: brightness(0) invert(1); /* ✅ dark → white */
margin-bottom: 19px;
margin-left: -20px;
}
/* drawer menu (mobile) */
@media (max-width: 992px) {
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    background: #0b5a3b; /* green bg */
    flex-direction: column;
    gap: 16px;
    padding: 80px 24px 24px;  /* space top e jeno items bhalo lage */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  .nav-links.show {
    transform: translateX(0);
  }

  /* drawer er link styling */
  .nav-links li a {
    display: block;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
  }

  /* desktop horizontal menu hide kore dewa */
  .hero-top .nav-links {
    display: none;
  }

  /* hamburger visible mobile e */
  .hamburger {
    display: block;
    background: none;
    border: 0;
    font-size: 28px;
    cursor: pointer;
    z-index: 1100;
  }
}
/* Base */
.site-header{background:#0b5a3b;color:#fff;position:sticky;top:0;z-index:100;}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;}
.logo-wrap{flex-shrink:0}

/* Desktop menu */
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{color:#fff;text-decoration:none;font-weight:600}
.nav-links a:hover{opacity:.9;text-decoration:underline}

/* Ha.logo-wrap img {urger button (hidden on desktop) */
.hamburger{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer; margin-bottom: 59px;}

/* Drawer + overlay (mobile) */
.drawer{
  position:fixed;inset:0 auto 0 0; /* left full-height */
  width:280px;max-width:85vw;
  background:#0b5a3b;transform:translateX(-100%);
  transition:transform .3s ease;z-index:1000;box-shadow:2px 0 14px rgba(0,0,0,.35)
}
.drawer-nav{padding:80px 22px 24px;overflow-y:auto;height:100%}
.drawer-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.drawer-nav a{color:#fff;text-decoration:none;font-weight:600;display:block;padding:6px 0}
.drawer-close{
  position:absolute;top:14px;right:14px;background:transparent;border:0;color:#fff;
  font-size:22px;cursor:pointer
}
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(1px);
  z-index:900
}

/* State */
.drawer.open{transform:translateX(0)}
.overlay[hidden]{display:none}

/* Responsive */
@media (max-width: 992px){
  .nav-links{display:none}       /* hide desktop nav */
  .hamburger{display:inline-block}
}


/* Desktop nav (header er jonne) */
.desktop-nav{list-style:none;padding:0;display:flex;align-items:center;flex-wrap:wrap; margin-top: 20px;}
.desktop-nav a{color:#fff;text-decoration:none;font-weight:600;}
.hamburger{font-size:26px;background:none;border:none;color:#fff;cursor:pointer;display:none;}

@media (max-width:992px){
  .desktop-nav{display:none;}
  .hamburger{display:block;}
}
/* ===== Header container: logo + nav এক লাইনে ===== */
/* তোমার যে wrapper-এ logo এবং .desktop-nav আছে, ওটার জন্য নিচের যেকোনোটা মিললে কাজ করবে */
header,
.site-header,
.header-bar,
.nav-wrap {
  display: flex !important;
  align-items: center !important;   /* vertical center */
  justify-content: flex-start;
  gap: 20px;
  padding: 10px 24px;               /* প্রয়োজনমতো বদলাও */
  
}

/* পুরো বারের নিচে নীল underline */
header::after,
.site-header::after,
.header-bar::after,
.nav-wrap::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;

}

/* ===== Logo ===== */
header img.logo,
.site-header img.logo,
.header-bar img.logo,
.nav-wrap img.logo {
  height: 56px;              /* তোমার লোগোর সাইজ অনুযায়ী বদলাও */
  width: auto;
  display: block;            /* baseline গ্যাপ কাটে, align ঠিক হয় */
}

/* ===== Desktop nav ===== */
.desktop-nav{
  display: flex !important;
  align-items: center;        /* টেক্সট vertical center */
  gap: 24px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;

  /* মেনু ডানদিকে নিতে */
  margin-left: auto;          /* logo বাম, nav ডান */
  position: static !important;/* আগের top/absolute থাকলে নিষ্ক্রিয় */
}

.desktop-nav li { display: flex; align-items: center; }

.desktop-nav li a{
  display: block;
  padding: 12px 10px;         /* header height-এর সাথে চোখে-চোখে বসে */
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  line-height: 1;             /* line-height mismatch এড়ায় */
}

.desktop-nav li a:hover{ color:#bbe1ff; }

/* আগের কোনো কাস্টম offset/negative top থাকলে এটা কাটবে */
.desktop-nav,
.desktop-nav *{
  top: auto !important;
  transform: none !important;
}

/* ছোট স্ক্রিনে ডেস্কটপ মেনু লুকাও (তোমার mobile menu থাকলে) */
@media (max-width: 991.98px){
  .desktop-nav{ display:none !important; }
}

/* Drawer */
.side-drawer{
  position:fixed; top:70px; left:-300px; width:280px; height:calc(100vh - 70px);
  background:#fff; box-shadow:4px 0 16px rgba(0,0,0,.2);
  transition:left .28s ease; z-index:1001; display:flex; flex-direction:column; border-radius:0 16px 16px 0;
}
.side-drawer.show{ left:0; }

/* ✅ drawer menu is always visible */
.drawer-nav{ list-style:none; margin:0; padding:16px; flex:1 1 auto; overflow-y:auto; }
.drawer-nav li{ padding:12px 8px; border-bottom:1px solid #f0f0f0; }
.drawer-nav a{ color:#222; text-decoration:none; font-size:15px; font-weight:500; display:block; width:100%; }

.close-btn{ background:#FFD600; border:none; padding:10px 14px; font-size:13px; font-weight:600; cursor:pointer; width:auto; align-self:center; margin:10px 0; border-radius:12px; }

.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1000; }
.backdrop.show{ opacity:1; pointer-events:auto; }

body.menu-open{ overflow:hidden; }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #faf6fb;
  text-align: center;
  color: #222;
}

h2 {
  margin: 30px 0 40px;
  font-size: 24px;
  font-weight: 600;
}

h2 span {
  color: #0c7a22;
}

.country-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.country-card {
background: linear-gradient(135deg, #038238, #044e13);
  border-radius: 15px;
  padding: 20px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: flex;                /* flexbox enable */
  flex-direction: column;       /* stack: image + text */
  align-items: center;          /* horizontal center */
  justify-content: center;      /* vertical center */
  color: #fff;
  min-height: 150px;            /* consistent height */
}

.country-card img {
  width: 80px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  display: block;
}


.country-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.25);
}