/* 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;
    }
  
    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); margin-right: 52px;}
    .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:10px; /* 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;

    border-radius:3px;
  }
  
  /* 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 */
  }
}




  :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:#f6f4f4;
    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{
  
    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: 19px;                       /* 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 */
  margin-top: 51px;
}

/* 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-top: 1px;
    }
    .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 (left aligned from the very start) */
.footer-social{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* <-- left align */
  gap:10px;                     /* replaces margin-right on <a> */
  flex-wrap:wrap;
  text-align:left !important;   /* override any parent centering */
  margin:0 !important;          /* in case margin:0 auto was applied */
}

.footer-social h4{
  color:#fff;
  font-size:16px;
  margin:0 12px 0 0;            /* title then icons */
  flex:0 0 auto;
}

.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  background:#2c3b50;
  color:#fff;
  font-size:18px;
  text-decoration:none;
  transition:background .3s;
  /* remove old margin-right; gap handles spacing */
}

.footer-social a:hover{ background:#00c853; }
.footer-column .footer-social{ text-align:left !important; }

    /* 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;
text-align: center;
}

.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() 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);
}

    /* Full-width underline inside the container */
.uline{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;       /* চাইলে left/right করুন */
  padding-bottom: 8px;      /* লাইনের জন্য জায়গা */
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}
.uline::before{ content:none !important; }
.uline *{
  text-decoration:none !important;
  border-bottom:0 !important;
  background-image:none !important;
  box-shadow:none !important;
}
.uline::after{
  content: "";
  position: absolute;
  left: 0;                  /* পুরো container জুড়ে */
  right: 0;
  bottom: 0;
  height: 3px;
  background: currentColor; /* .uline er color use করবে */
  border-radius: 0;
}

    /* শুধু ব্রাউজারের ডিফল্ট ডট রাখব */
.benefits ul,
.elig-list ul{
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.2rem;
  margin: 0;
}

/* আগে থেকে থাকা কাস্টম বুলেট বন্ধ */
.benefits li::before,
.elig-list li::before{
  content: none !important;
  background: none !important;
}

/* নিরাপদ স্পেসিং */
.benefits li,
.elig-list li{
  padding-left: 0;
  margin-bottom: 10px;
  line-height: 1.6;
}

    /* list container */
.benefits .benefit-list{
  margin:0;
  padding-left: 1.2rem;   /* বুলেটের জন্য সামান্য ইনডেন্ট */
  list-style: disc;       /* ডিফল্ট ডিস্ক বুলেট */
}

/* প্রতিটি আইটেম */
.benefits .benefit-list li{
  margin-bottom:12px;
  line-height:1.7;
  color:#173042;
  font-size:clamp(14px, 2vw, 16px);
}

/* বুলেটের রং (চাইলে) */
.benefits .benefit-list li::marker{
  color:#0b5e3a;
  font-size:1.1em;
}

/* কোথাও আগে কাস্টম বুলেট থাকলে সম্পূর্ণ বন্ধ করবে */
.benefits li::before,
.benefits .benefit-list li::before{
  content:none !important;
  background:none !important;
}

    /* আপনার আগের .section-title বদলাবেন না—শুধু এই অ্যাডঅন */
.section-title.split{ line-height:1.25; margin:0; text-align:center; }
.section-title.split .t1,
.section-title.split .t2{ display:block; }

.section-title.split .t1{
  font-size: clamp(22px, 3.2vw, 42px);   /* উপরের লাইন */
  font-weight: 800;
  letter-spacing:.3px;
  color: black;
}
/* Split title: both lines black */
.section-title.split,
.section-title.split .t1,
.section-title.split .t2{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important; /* Safari/iOS */
}

.section-title.split .t2{
  margin-top: 6px;                       /* একটু ফাঁক */
  font-size: clamp(18px, 2.6vw, 32px);   /* নিচের লাইন */
  font-weight: 900;
  letter-spacing:.3px;
}

    /* Slider container */
.slider-wrap {
  width: 100%;
  max-width: 900px; /* Adjust as needed */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f7f7f7;
}

/* Hide radio buttons */
.nav-radio {
  display: none;
}

/* Viewport and Track */
.vp-box {
  width: 100%;
  overflow: hidden;
}

.trk-box {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Page container for each slide */
.pg-box {
  width: 100%;
  flex-shrink: 0;
  padding: 20px;
}

/* Grid for four cards per page */
.row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Changed from 3 to 4 */
  gap: 15px;
  align-items: center;
  justify-items: center;
}

/* Card styling */
.card-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  height:200px
}
/* ---- NO CROP: show full image inside card ---- */
.slider-wrap .row-grid .card-box{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  display:block;              /* keep layout same */
}

/* আগে যেখানে cover/4:3 ছিল—সেটা বাদ, এখন contain */
.slider-wrap .row-grid .card-box img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;        /* ডকুমেন্টের জন্য সমান উচ্চতা; চাইলে 4/3 করতে পারো */
  object-fit: contain;        /* ✅ আর কাটা পড়বে না */
  background:#f3f5f7;         /* সাইডে ফাঁকা হলে হালকা ব্যাকগ্রাউন্ড */
  display:block;
}

/* যেখানেই image-card ব্যবহার হয়েছে সেখানেও crop বন্ধ করতে চাও? */
.image-card img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;        /* বা তোমার পছন্দের রেশিও */
  object-fit: contain;        /* ✅ no crop */
  background:#f3f5f7;
}
/* === 3টা কার্ড পাশাপাশি, NO CROP === */

/* প্রতিটা টাইলের সমান উঁচু ফ্রেম (পোর্ট্রেট ডকুমেন্টের জন্য ভাল লাগে) */
.row-grid .card-box{
  aspect-ratio: 3 / 4;            /* চাইলে 4/3 বা 1/1 করতে পারো */
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  display:flex;                   /* ইমেজকে মাঝখানে বসাতে */
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* ইমেজ কাটবে না, ফ্রেমের মধ্যে পুরোটা দেখাবে */
.row-grid .card-box img,
.image-card img{
  width:100%;
  height:100%;
  object-fit: contain !important;  /* ✅ no crop */
  background:#f3f5f7;              /* পাশের ফাঁকা জায়গায় হালকা ব্যাকগ্রাউন্ড */
  display:block;
}

/* রেসপন্সিভ গ্রিড (ডেস্কটপ=৩, ট্যাব=২, মোবাইল=১) */
.row-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .row-grid{ grid-template-columns: 1fr; }
}
/* ==== NO CROP: নিচটা আর কাটবে না ==== */
.row-grid .card-box img,
.image-card img,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* পুরো ইমেজ দেখাও, crop নয় */
  object-position: center top;      /* উপরে অ্যাঙ্কর করলে নিচে কাটা পড়ে না */
  background: #f3f5f7;              /* ফাঁকা জায়গায় হালকা ব্যাকগ্রাউন্ড */
  display: block;
}

/* যেথায় ফ্রেম ফিক্সড হাইট আছে, ওখানে কাটাছেঁড়া ঠেকাতে */
.row-grid .card-box,
.image-card,
.frame {
  overflow: visible;                 /* প্যারেন্টে হাইড থাকলে কাটে; তাই visible */
}

/* কার্ডগুলো সমান হাইট চাইলে – ফ্রেম দিন (ইমেজ তবু কাটা হবে না) */
.row-grid .card-box { aspect-ratio: 10/ 4; }   /* পোর্ট্রেট ডকুমেন্টে সুন্দর লাগে */
/* চাইলে 4/3 বা 1/1 দিতে পারেন */


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

/* Navigation Arrows */
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  display: none; /* Initially hide all arrows */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
  font-size: 24px;
}

.arrow-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* Show arrows based on radio button state */
#p1:checked ~ .arrow-btn.a1, #p2:checked ~ .arrow-btn.a2, #p3:checked ~ .arrow-btn.a3 {
  display: flex;
}

/* Dots for pagination */
.dot-wrap {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot-btn {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Highlight active dot */
#p1:checked ~ .dot-wrap .dot-btn:nth-child(1), #p2:checked ~ .dot-wrap .dot-btn:nth-child(2), #p3:checked ~ .dot-wrap .dot-btn:nth-child(3) {
  background-color: #000;
}

/* Page transitions based on radio button state */
#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%);
}

/* Responsive design for mobile view */
@media (max-width: 768px) {
  .row-grid {
    grid-template-columns: repeat(2, 1fr); /* On mobile, show 2 images for better viewing */
    gap: 10px;
  }
}
    /* ===== Bigger carousel cards (desktop & mobile) ===== */
#official-website .officials-section { padding: 20px 0 8px; }

.carousel-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 24px 42px;
  position: relative;
}

.carousel-wrapper{
  display: flex;
  gap: 32px;                 /* space between cards */
  scroll-behavior: smooth;
  will-change: transform;
}
/* ============ THEME & SCALES ============ */
:root{
  --brand: #0b5e3a;
  --brand-2:#074a2c;
  --bg: #f5f7f8;
  --gap: 16px;         /* card-to-card gap (desktop) */
  --gutter: 36px;      /* left/right outer padding for arrows */
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.14);
}

/* Section header – like screenshot */
#official-website.officials-section{ padding: 14px 12px 0; background:var(--bg); }
#official-website .header-bar{
  max-width:1400px;margin:0 auto 14px;background:var(--brand);color:#fff;
  padding:14px 18px;border-radius:10px;text-align:center;
  font-weight:900;font-size:24px;letter-spacing:.3px;
}

/* ============ CAROUSEL LAYOUT ============ */
#official-website .carousel-container{
  max-width:1400px;margin:0 auto;position:relative;padding:4px 0 10px;overflow:visible;
}

/* Desktop default: 3-up with small gaps (like your screenshot) */
#official-website .carousel-wrapper{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: calc((100% - (2 * var(--gap))) / 3);
  column-gap: var(--gap); gap: var(--gap);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
}
#official-website .carousel-wrapper::-webkit-scrollbar{ display:none; }
#official-website .carousel-wrapper{ scrollbar-width:none; }

#official-website .carousel-item{
  width:auto;margin:0;padding:0;scroll-snap-align:start;transform:translateZ(0);
}

/* Tablet: 2-up */
@media (max-width:1199.98px){
  #official-website .carousel-wrapper{
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
}
/* Mobile: 1-up */
@media (max-width:767.98px){
  #official-website .carousel-wrapper{
    grid-auto-columns: 100%;
    column-gap: 0; gap:0;           /* tighter on mobile */
    padding-inline: 16px; scroll-padding-inline: 16px;
  }
}

/* ============ CARD ============ */
#official-website .image-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:#eee; box-shadow:var(--shadow);
}
#official-website .image-card img{
  width:100%; aspect-ratio:20/9; object-fit:cover; display:block;
}
/* ===== Assurance Beyond Admission (responsive) ===== */
#Assurance.rv-reviews{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  background: #f5f9f7;
  border: 1px solid #e6efe9;
  border-radius: 14px;
}

#Assurance .rv-heading{
  margin: 0 0 10px;
  font-weight: 900;
  color: #f9fbf9;                 /* brand green */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .2px;
}

#Assurance p{
  margin: 0;
  color: #080808;
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.7;
}

/* Tablet+ gets a touch more breathing room */
@media (min-width: 768px){
  #Assurance.rv-reviews{ padding: 32px 28px; }
}

/* Optional: full-bleed (edge-to-edge on mobile) */
@media (max-width: 600px){
  #Assurance.rv-reviews{
    border-radius: 10px;
    padding: 18px 16px;
  }
}

/* Footer overlay on the image (as in screenshot) */
#official-website .card-footer{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; display:flex; align-items:center; justify-content:flex-start;
  gap:18px; padding:10px 14px; font-weight:800;
  font-size:clamp(12px,1.05vw,15px); line-height:1.2;
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}
#official-website .card-footer span::before{ content:"📞"; margin-right:8px; }
#official-website .card-footer a{
  color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.95);
  white-space:nowrap;
}
#official-website .card-footer a::before{ content:"🌐"; margin-right:6px; }

/* ============ ARROWS ============ */




/* ============ DOTS (tight under images) ============ */
#official-website .carousel-dots{
  display:flex; gap:12px; justify-content:center; align-items:center; margin-top:10px;
}
#official-website .carousel-dots button{
  width:10px; height:10px; border-radius:50%; border:0; background:#cfcfcf; cursor:pointer;
}
#official-website .carousel-dots button[aria-current="true"]{ background:var(--brand); }

/* Base card width: big, but responsive */
.carousel-item{
  flex: 0 0 clamp(340px, 36vw, 520px);
}

.image-card{
  background: #0b5e3a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

/* Make images fill the card nicely and look large */
.image-card img{
  width: 100%;
  aspect-ratio: 16 / 9;      /* tall enough visuals */
  object-fit: cover;
  display: block;
}

/* Footer text larger */
.card-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #0b5e3a;
  color: #fff;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.25;
}
.card-footer a{ color:#fff; text-decoration: underline; white-space: nowrap; }

/* Bigger arrows so layout feels balanced with larger cards */


/* ===== Tablet ===== */
@media (max-width:1199px) and (min-width:768px){
  .carousel-item{ flex-basis: clamp(420px, 48vw, 520px); }
}



    /* ====== Officials carousel (website + mobile) ====== */
.officials-section{ max-width:1360px; margin:0 auto; padding:24px 18px 0; }

.carousel-container{
  --gap:18px;
  --perView:3;                /* desktop: 3 cards */
  max-width:100%;
  margin:12px auto 0;
  position:relative;
  padding:0 12px 32px;        /* space for dots */
}

/* breakpoints */
@media (max-width:1200px){ .carousel-container{ --perView:2; } }
@media (max-width:700px){  .carousel-container{ --perView:1; } }

/* track */
.carousel-wrapper{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--gap)*(var(--perView)-1))/var(--perView));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-wrapper::-webkit-scrollbar{ display:none; }
.carousel-item{ scroll-snap-align:start; }

/* card */
.image-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.image-card img{
  width:100%; height:auto;
  display:block;
  aspect-ratio:16 / 9;        /* wide like screenshot */
  object-fit:cover;
}

/* green footer strip (inside the image) */
.card-footer{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:#075b38;
  color:#fff; font-weight:700; line-height:1.35; font-size:14px;
}
.card-footer a{ color:#fff; text-decoration:none; }
.card-footer a:hover{ text-decoration:underline; }

/* arrows */


/* dots */
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.carousel-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#cfd7dd; cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#075b38; }

     body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            margin: 0;
        }

        .officials-section {
            padding: 2rem 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .header-bar {
            background-color: #004d40;
            color: #fff;
            padding: 1.5rem;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .carousel-container {
            position: relative;
            width: 100%;
            margin-top: 2rem;
            overflow: hidden;
        }

        .carousel-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: auto;
            align-items: center;
        }

        .carousel-item {
            flex: 0 0 100%;
            padding: 100px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
        }

        .image-card {
            max-width: 320px;
            width: 100%;
            background-color: #fff;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
        }
.image-card {
  width: 300px; /* Adjust the card's width as needed */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-card img {
  width: 100%; /* Ensures the image fills the card's width */
  height: 200px; /* Sets a fixed height for the image */
  object-fit: cover; /* This is the key property. It crops the image to fit the container without distortion. */
  display: block;
}

        .card-footer {
            padding: 1rem;
            background-color: #00695c;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .card-footer span, .card-footer a {
            display: block;
            font-size: 0.9rem;
        }

        .card-footer a {
            color: #fff;
            text-decoration: underline;
        }

      

        .carousel-prev {
            left: 1rem;
        }

        .carousel-next {
            right: 1rem;
        }

        .carousel-dots {
            text-align: center;
            margin-top: 1rem;
        }

        .dot {
            height: 12px;
            width: 12px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .dot.active {
            background-color: #004d40;
        }

        /* Responsive adjustments */
        @media (min-width: 768px) {
            .carousel-item {
                flex: 0 0 50%; /* Show two cards on tablets */
            }
        }

        @media (min-width: 1024px) {
            .carousel-item {
                flex: 0 0 33.333%; /* Show three cards on desktops */
            }
        }
    /* ====== Container ====== */
.carousel-container{
  --gap:16px;
  --perView:4;               /* xl default */
  max-width:1200px;
  margin:0 auto;
  position:relative;
  padding:8px 12px 28px;     /* bottom space for dots */
}

/* breakpoints: 3 → 2 → 1 */
@media (max-width:1200px){ .carousel-container{ --perView:3; } }
@media (max-width:900px){  .carousel-container{ --perView:2; } }
@media (max-width:600px){  .carousel-container{ --perView:1; } }

/* ====== Track (scroll-snap grid) ====== */
.carousel-wrapper{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--gap) * (var(--perView) - 1)) / var(--perView));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox hide */
}
.carousel-wrapper::-webkit-scrollbar{ display:none; } /* WebKit hide */

.carousel-item{ scroll-snap-align:start; }

/* ====== Card ====== */
.image-card{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  background:#fff;
  display:flex;
  flex-direction:column;
  height:100%;
}
.image-card img{
  width:100%; height:auto;
  display:block;
  aspect-ratio: 4 / 3;            /* uniform tiles; change to 16/9 if you prefer */
  object-fit:cover;
}

/* Footer bar under each image */
.card-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#075b38;
  color:#fff;
  font-size:14px; line-height:1.35; font-weight:700;
}
.card-footer a{ color:#fff; text-decoration:none; word-break:break-word; }
.card-footer a:hover{ text-decoration:underline; }

/* ====== Arrows ====== */




/* ====== Dots ====== */
.carousel-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:10px;
}
.carousel-dots button{
  width:8px; height:8px; border-radius:50%;
  border:0; background:#cfd7dd; cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#075b38; }

    /* Container */
.officials-section{
  max-width:1360px;
  margin:0 auto;
  padding:24px 18px 0;
}

/* Green heading bar */
.header-bar{
  background:#02522d;
  color:#fff;
  text-align:center;
  padding:8px 12px;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.3;
  -webkit-text-fill-color:#fff;
  font-size:10px; /* responsive size */
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Slightly tighter on small phones */
@media (max-width:768px){
  .officials-section{ padding:20px 14px 0; }
  .header-bar{ padding:6px 10px; }
}

/* OPTIONAL: force single line + swipe (no scrollbar shown)
.header-bar{
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.header-bar::-webkit-scrollbar{ display:none; }
*/

    /* ===== Container ===== */
.sectionyt{

}
/* ===== Responsive wrapper ===== */
.wrap1{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 3.5vw, 32px) clamp(12px, 4vw, 28px);
  box-sizing: border-box;
  overflow-x: hidden;              /* prevent side scroll on mobile */
}
.wrap1 *, .wrap1 *::before, .wrap1 *::after{ box-sizing: inherit; }

/* Text scales nicely */
.wrap1 h1{ font-size: clamp(20px, 4.2vw, 34px); margin: 0 0 10px; }
.wrap1 h2{ font-size: clamp(18px, 3.6vw, 28px); margin: 0 0 8px; }
.wrap1 p { font-size: clamp(14px, 2.6vw, 16px); line-height: 1.7; }

/* Media fits container */
.wrap1 img, .wrap1 video, .wrap1 canvas, .wrap1 svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Long content won't break layout */
.wrap1{ word-break: break-word; }

/* Optional: grid helpers for inner layouts */
.wrap1 .row{
  display: grid;
  grid-template-columns: 1fr;      /* mobile: single column */
  gap: 16px;
}
@media (min-width: 600px){
  .wrap1 .row.two   { grid-template-columns: 1fr 1fr; }
  .wrap1 .row.three { grid-template-columns: repeat(3, 1fr); }
  .wrap1 .row       { gap: 18px; }
}
@media (min-width: 1024px){
  .wrap1 .row       { gap: 22px; }
}

/* Tables: make scrollable on small screens */
.wrap1 .table-scroll{ overflow-x: auto; }
.wrap1 .table-scroll table{ min-width: 600px; border-collapse: collapse; }


/* ===== Top: YouTube grid ===== */
.yt-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* desktop: 3 */
}

@media (max-width: 992px){
  .yt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* tablet: 2 */
}
@media (max-width: 640px){
  .yt-grid{ grid-template-columns: 1fr; gap:12px; } /* mobile: 1 */
}

.yt-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Responsive 16:9 frame */
.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 ===== */
.promo-row{
  display:grid;
  grid-template-columns: 1.2fr .8fr;  /* image larger */
  gap:16px;
  align-items:center;
  margin-top:18px;
}
@media (max-width: 768px){
  .promo-row{ grid-template-columns:1fr; gap:12px; }
}

.promo-img{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.promo-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;     /* consistent banner height */

}

.promo-text{
  background:#035332;
  color:#fff;
  border-radius:12px;
  padding:16px;
  text-align:center;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  text-wrap:balance;
}
/* hide <br class="small"> on desktop; show on mobile for nicer breaks */
.small{ display:none; }
@media (max-width: 640px){
  .promo-text{ padding:14px; }
  .small{ display:inline; }
}

    /* Wrapper: a little higher + mobile swipe */
.table-scroll{
  max-width:1200px;
  margin:-8px auto 0;                /* ⬆️ ekto upore uthlo */
  padding:0 12px;
  overflow-x:auto;                   /* mobile swipe */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* hide scrollbar (Firefox) */
}
.table-scroll::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit) */

/* Table base */
.table-scroll table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;                /* predictable column widths */
  min-width:780px;                   /* keeps columns readable; swipes on phones */
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}

/* Head */
.table-scroll thead th{
  background:#155c3b;
  color:#fff;
  text-align:left;
  padding:12px 10px;
  font-weight:700;
  font-size:clamp(13px,1.6vw,15px);
  position:sticky; top:0; z-index:1; /* sticky header on scroll */
}

/* Cells */
.table-scroll td{
  padding:10px;
  font-size:clamp(13px,1.6vw,15px);
  color:#111;
  vertical-align:top;
  border-bottom:1px solid #eef1f4;
  word-break:break-word;             /* long text wraps nicely */
}

/* Zebra rows */
.table-scroll tbody tr:nth-child(odd){ background:#fafcfd; }

/* Emphasis cells */
.table-scroll .phase{ font-weight:700; color:#155c3b; }
.table-scroll .subject{ font-weight:600; }

/* Tighten on very small phones */
@media (max-width:400px){
  .table-scroll{ margin:-6px auto 0; padding:0 10px; }
  .table-scroll thead th, .table-scroll td{ padding:8px 8px; }
}

    /* light push-down for both mobile & desktop */
/* Container */
.study-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  font-family: Arial, sans-serif;
  color:#111;
}

/* Paragraphs */
.study-content p{
  margin: 0 0 12px;
  font-size: 21px;  /* scales nicely on phones */
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;               /* better mobile wrapping */
  overflow-wrap: anywhere;     /* prevent overflow on tiny screens */
}

/* ==== Only ONE underline below .uline (centered) ==== */

/* Center + reset any built-in underlines/borders */

/* Center the title + its underline */
.study-content .uline{
  font-weight: 700;
  color: #155c3b;
  padding-bottom: 6px;
  position: relative;
  text-align: center;          /* <-- text center */
  display: block;              /* safe block context */
  margin-inline: auto;         /* center within container */
}

/* Center the decorative underline */
.study-content .uline::after{
  content: "";
  position: absolute;
  left: 50%;                   /* start from center */
  transform: translateX(-50%); /* perfectly center */
  bottom: 0;
  width: 72px;                 /* keep your length */
  height: 3px;
  background: currentColor;    /* uses #155c3b */
  border-radius: 2px;
}
/* === Full container-width underline for .study-content .uline === */
.study-content .uline{
  position: relative;
  display: block;
  width:50%;
  text-align: center;
  padding-bottom: 8px;              /* line'er jonne space */
  text-decoration: none !important; /* any text underline off */
  border-bottom: 0 !important;
}

.study-content .uline::after{
  content: "";
  position: absolute;
  left: 0;                          /* span full container */
  right: 0;
  bottom: 0;
  height: 3px;
  background: currentColor;         /* uses #155c3b */
  border-radius: 0;

  /* override old centered 72px rule */
  transform: none !important;
  width: auto !important;
}

.study-content .uline.full-bleed::after{
  left: 50%;
  right: auto;
  transform: translateX(-50%) !important;
  width: 100vw !important;          /* viewport-wide */
}


/* Slightly tighter on small phones */
@media (max-width: 480px){
  .study-content{ padding: 10px 14px; }
  .study-content p{ line-height: 1.7; }
}

/* a little more room on larger screens (optional) */
@media (min-width: 768px){
  .rich-copy{ margin-top: 14px; }
}

    .rich-copy{
  font-family: Arial, sans-serif;
  color:#111;
  margin:0;
  line-height:1.75;
  font-size:clamp(14px, 1.9vw, 16px); /* scales nicely on phones */
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;               /* cleaner breaks on mobile */
  overflow-wrap:anywhere;     /* prevent overflow */
}

.rich-copy b{ color:#155c3b; }

/* Optional container if you want page padding */
.wrap-1360{ max-width:1360px; margin:0 auto; padding:16px 18px; }
@media (max-width:768px){ .wrap-1360{ padding:14px 14px; } }

    /* ============ Layout ============ */
.two-col{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:16px 12px;
}

.card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Keep both sides the same height */
.frame{
  position:relative;
  aspect-ratio: 16 / 9;   /* equal height for img & video */
  background:#f5f7fa;     /* subtle backdrop for portrait cert */
}

/* Certificate image */
/* Frame: portrait box so certificate nicely fits */
.frame{
  position: relative;
  aspect-ratio: 3 / 4;   /* portrait; change if needed */
  background: #f5f7fa;   /* light backdrop for empty space */
  overflow: hidden;
}

/* Certificate image: fully visible, centered */
.frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;        /* ✅ show full certificate (no crop) */
  object-position: center;    /* center it */
  display: block;
  margin: 0;                  /* remove negative offset */
}
/* Will fill the frame but may crop edges */
.frame img{
  object-fit: contain;      /* fill + crop */
  object-position: center;

}
/* ===== FAQ (responsive) ===== */
#faq.rv-reviews{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  background: #f7faf9;
  border: 1px solid #e6efe9;
  border-radius: 14px;
  text-align: left;
}

#faq .rv-heading{
  margin: 0 0 12px;
  font-weight: 900;
  color:white;                    /* brand green */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .2px;
}

#faq p{
  margin: 0;
  color: #173042;
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.7;
}

/* Anchor scroll fix: if you click a link to #faq-section,
   keep the heading visible below a sticky header */
#faq-section{
  scroll-margin-top: var(--anchor-offset, 84px);
}

/* Mobile tweak */
@media (max-width: 600px){
  #faq.rv-reviews{
    border-radius: 10px;
    padding: 18px 16px;
  }
}


/* Responsive YouTube */
.frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ============ Mobile ============ */
@media (max-width: 768px){
  .two-col{ grid-template-columns:1fr; gap:12px; padding:14px 12px; margin-top:  5px; }
}
.two-col .card:first-child .frame{ aspect-ratio: 3 / 4; } /* optional */

    /* Container (optional if wrapped elsewhere) */
#certificate{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 12px;
}

/* Responsive grid */
.certificate-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card */
.certificate-item{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 10px;
  display: grid;
  place-items: center;
}

/* Uniform portrait frame */
.certificate-item img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;   /* portrait look */
  object-fit: contain;   /* show full certificate */
  display: block;
}

/* Tablet tweaks */
@media (max-width: 992px){
  .certificate-grid{ gap:14px; }
}

/* Phones */
@media (max-width: 640px){
  .certificate-grid{
    grid-template-columns: repeat(2, 1fr);  /* 2 per row on phones */
    gap:12px;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .certificate-grid{ grid-template-columns: 1fr; } /* single column */
}

   /* shared container */
.wrap-1360{
  max-width:1360px;
  margin:0 auto;
  padding:24px 18px 0;
}

/* ribbon = same look as before */
.ribbon{
  background:#02522d;
  text-align:center;
  padding:8px 12px;          /* compact like before */
  border-radius:6px;
}
.ribbon h1{
  margin:0;
  font-weight:800;
  color:#fff; -webkit-text-fill-color:#fff;
  letter-spacing:.3px;
  line-height:1.3;
  font-size:10px;  /* responsive, balanced */
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* text block (website-like) */
.why-copy{
  line-height:1.7;
  font-size:clamp(14px,1.9vw,16px);
  color:#111;
  font-family:Arial, sans-serif;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  margin:20px 0 0;
}

/* small screens: a bit tighter */
@media (max-width:768px){
  .wrap-1360{ padding:20px 14px 0; }
  .ribbon{ padding:6px 10px; }
}

/* Responsive green ribbon */
.ribbon{
  background:#02522d;          /* same green as your bar */
  text-align:center;
  padding:10px 14px;           /* comfy on desktop */
  border-radius:6px;
}

/* Title inside the ribbon */
.ribbon h1{
  margin:0;
  font-weight:800;
  color:#fff;
  -webkit-text-fill-color:#fff;
  line-height:1.3;
  letter-spacing:.3px;
  font-size:clamp(18px, 2.2vw, 28px);  /* scales for mobile/desktop */
  text-wrap:balance;                    /* prettier line breaks */
  overflow-wrap:anywhere;               /* no overflow on tiny phones */
}

/* Tighter padding on small screens */
@media (max-width: 768px){
  .ribbon{ padding:8px 12px; }
}
@media (max-width: 400px){
  .ribbon{ padding:6px 10px; }
}
/* Base styles for all screen sizes */
.ribbon h1 {
  font-size: 24px; /* A good starting font size */
  text-align: center;
}

/* Media query for screens smaller than 768px (common breakpoint for tablets/mobile) */
@media (max-width: 767px) {
  section {
    padding: 12px 10px 0; /* Reduce padding for smaller screens */
    margin-top: 20px;
  }

  .ribbon h1 {
    font-size: 18px; /* Make the font size smaller on mobile */
    /* You can add more styles here, like line-height, to improve readability */
  }
}
.section-title{ margin:0; font-weight:800; color:#fff; line-height:1.3; letter-spacing:.3px; font-size:24px; }

    /* same container look as your Admission Procedure bar */
.heading-bar{
  max-width:2000px;
  margin:0 auto;
  padding:0 7px;
}
.heading-bar{
  background:#02522d;
  text-align:center;
  padding:7px;
  border-radius:6px;
}
.heading-bar1{
  max-width:2000px;
  margin:0 auto;
  padding:0 8px;
}
.heading-bar1{
  background:#02522d;
  text-align:center;
  padding:12px;
  border-radius:6px;
}
/* title styling (matches your section-title behavior) */
.heading-title{
  margin:0;
  font-weight:800;
  color:#f9f7f7;
  -webkit-text-fill-color:rgb(20, 20, 20)a0a;
  letter-spacing:.3px;
  line-height:1.3;
  font-size:10px;
}

    /* Ribbon: same look on all screens */
.ribbon{
  background:#155c3b;
  color:#fff;
  margin:24px auto 18px;
  padding:10px 7px;
  border-radius:999px;    /* pill */
  width:fit-content;      /* shrink to content */
  max-width:100%;
  text-align:center;
  overflow-x:auto;        /* allow swipe on tiny phones */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;   /* hide scrollbar (Firefox) */
}
.ribbon::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit) */

.ribbon h1{
  margin:0;
  font-family:Oswald, sans-serif;
  font-weight:800;
  font-size:28px;         /* same size on mobile & desktop */
  line-height:1.25;
  letter-spacing:.3px;
  white-space:nowrap;     /* keep one line */
  -webkit-text-fill-color:#fff;
}

    /* Wrapper */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}

/* Responsive grid */
.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}

/* Card */
.doc-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Clickable area */
.doc-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Figure frame */
.doc-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;           /* document-like portrait */
  background:linear-gradient(180deg,#f7f9fb,#eef3f7);
  overflow:hidden;
}

/* Image */
.doc-frame img{
  width:100%;
  height:100%;
  object-fit:cover;           /* fill nicely; use 'contain' if you prefer full page inside */
  display:block;
  transition:transform .25s ease;
}

/* Hover / focus effect */
.doc-card:hover img,
.doc-link:focus img{ transform:scale(1.02); }

.doc-link:focus-visible{
  outline:2px solid #155c3b;
  outline-offset:4px;
  border-radius:10px;
}

/* Optional watermark via data-watermark */
.doc-frame.watermark::after{
  content:attr(data-watermark);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:700 26px/1.1 system-ui, sans-serif;
  color:#155c3b;
  opacity:.08;
  transform:rotate(-18deg);
  pointer-events:none;
}

/* Tighter on tablets */
@media (max-width: 992px){
  .wrap{ padding:18px 14px; }
  .doc-grid{ gap:16px; }
}

/* Phones: single column, comfy padding */
@media (max-width: 640px){
  .wrap{ padding:16px 12px; }
  .doc-grid{
    grid-template-columns:1fr;   /* mobile = single column */
    gap:14px;
  }
  .doc-frame{ aspect-ratio: 3/4; }
}

/* Very small phones */
@media (max-width: 380px){
  .doc-frame.watermark::after{ font-size:22px; }
}
/* Row-wise list (desktop + mobile: 1 item per row) */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}

.doc-grid{
  display:grid;
  grid-template-columns: 1fr;   /* ✅ row-wise: single column */
  gap:16px;
}

.doc-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.section-title{
  margin:0;
  font-weight:800;
  color:#fff;
  -webkit-text-fill-color:#fff;
  letter-spacing:.3px;
  line-height:1.3;
  text-align:center;
  padding:8px 12px;

  /* desktop = same size as site */
  font-size:28px;
}

/* phones: keep one line, allow swipe, hide scrollbar */
@media (max-width: 768px){
  .section-title{
    font-size:28px;               /* same size on mobile */
    white-space:nowrap;           /* single line */
    overflow-x:auto;              /* swipe horizontally if needed */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;   
    margin-top:  20px;      /* Firefox hide */
  }
  .section-title::-webkit-scrollbar{ display:none; } /* Chrome/Safari hide */
}

/* OPTIONAL: if instead you want auto-wrap (no swipe), comment the block above
   and use this smaller mobile size:
@media (max-width: 768px){
  .section-title{ font-size:22px; white-space:normal; overflow-x:visible; }
}
*/

.doc-frame{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  background:#f5f7fa;
}
.doc-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Narrower container */
.wrap{
  max-width: 1000px;   /* choto width */
  margin: 0 auto;
  padding: 16px 12px;
}

/* Column layout */
.doc-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;            /* mobile: 1 column */
}

/* Tablet: 2 columns */
@media (min-width: 600px){
  .doc-grid{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

/* Desktop: 3 columns */
@media (min-width: 1100px){
  .doc-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

/* Cards (optional polish) */
.doc-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

.doc-frame{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  background:#f5f7fa;
}
.doc-frame img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Container: full or comfy width (choose one) */
.wrap{
  /* Option 1: full width */
  max-width: 100%;
  /* Option 2: fixed comfy width (uncomment if you want) */
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 20px 16px;
}

/* GRID: no empty columns, no big white gap */
.doc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* ✅ auto-fit collapses empties */
  gap: 16px;
  grid-auto-flow: dense;      /* fill holes between rows */
  align-items: stretch;
}

/* Card + image */
.doc-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); height:100%; }
.doc-frame{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#f5f7fa; }
.doc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Phones: single column */
@media (max-width: 640px){
  .doc-grid{ grid-template-columns: 1fr; }
}
/* Container */
.wrap{
  max-width: 1280px;    /* 4 column comfortably fits */
  margin: 0 auto;
  padding: 16px 12px;
}

/* Grid: default 1 col */
.doc-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;                 /* mobile: 1 */
}

/* ≥600px: 2 cols */
@media (min-width: 600px){
  .doc-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

/* ≥900px: 3 cols */
@media (min-width: 900px){
  .doc-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

/* ≥1200px: 4 cols ✅ */
@media (min-width: 1200px){
  .doc-grid{ grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}

/* Card + image (same as before) */
.doc-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.doc-frame{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#f5f7fa; }
.doc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

    .fees-section{
  max-width:1360px;
  margin:20px auto;
  padding:0 18px;
  font-family: Arial, sans-serif;
  color:#111;
}

.fees-copy{
  line-height:1.7;
  font-size:clamp(14px, 1.9vw, 16px); /* desktop→mobile scale */
  text-align:justify;                 /* website-like */
  text-justify:inter-word;            /* better spacing when justified */
  hyphens:auto;                       /* allow soft hyphenation on mobile */
  overflow-wrap:anywhere;             /* prevent overflow on tiny screens */
}

.fees-copy strong{ color:#155c3b; }

/* Tablet */
@media (max-width: 768px){
  .fees-section{ padding:0 14px; }
  .fees-copy{ line-height:1.75; }
}

/* Small phones */
@media (max-width: 400px){
  .fees-section{ padding:0 12px; }
  .fees-copy{ font-size:15px; }
}

    /* Top green ribbon (responsive) */
.ribbon{
  background: var(--green, #155c3b);
  color:#fff;
  margin:24px auto 18px;
  padding:10px 16px;
  border-radius:999px;          /* pill look */
  width: fit-content;           /* shrink to content */
  max-width: min(100%, 720px);  /* don't overflow */
  text-align:center;
}

.ribbon h1{
  margin:0;
  letter-spacing:.3px;
  font-family: Oswald, sans-serif;
  font-weight:800;
  font-size: clamp(18px, 4.2vw, 28px); /* scales on mobile */
  line-height:1.25;
  overflow-wrap:anywhere;       /* prevent overflow on tiny phones */
  text-wrap: balance;           /* nicer line breaks (modern browsers) */
}

/* Tablet */
@media (max-width: 768px){
  .ribbon{ padding:10px 14px; }
}

/* Small phones: make it feel wider without breaking layout */
@media (max-width: 480px){
  .ribbon{
    width:92%;                  /* nearly full width on small screens */
    border-radius:10px;         /* softer */
  }
  .ribbon h1{
    font-size: clamp(16px, 5.4vw, 22px);
  }
}

    .section-title{
  margin:0;
  font-weight:800;
  font-size:40px; /* responsive size */
  line-height:1.3;
  letter-spacing:.3px;
  color:#fff;
  -webkit-text-fill-color:#fff;

  text-align:center;        /* desktop + mobile */
  padding:8px 12px;         /* mobile breathing room */
  max-width:100%;
  overflow-wrap:anywhere;   /* prevent overflow */
  text-wrap:balance;        /* nicer line breaks (modern browsers) */
}

/* Small tablets/phones */
@media (max-width:768px){
  .section-title{ font-size:clamp(17px, 4vw, 24px); padding:6px 10px; }
}

/* Very small phones */
@media (max-width:400px){
  .section-title{ font-size:clamp(16px, 4.5vw, 20px); letter-spacing:.2px; }
}

    .steps {
  max-width: 900px;         /* center block on large screens */
  margin: 0 auto;
  padding: 20px;
  background: #fff;         /* optional white background */
  border-radius: 8px;       /* smooth card look */
}

.steps p {
  margin: 0 0 12px;
  font-size: clamp(14px, 2vw, 16px); /* responsive font */
  line-height: 1.6;
  color: #222;
  position: relative;
  padding-left: 8px;
}

.steps b {
  color: #155c3b;           /* highlight steps in green */
}

/* Tablet */
@media (max-width: 768px) {
  .steps {
    padding: 16px;
  }
  .steps p {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

/* Mobile */
@media (max-width: 500px) {
  .steps {
    padding: 12px;
  }
  .steps p {
    font-size: 14px;
    line-height: 1.5;
  }
}

    /* Base title */
.section-title{
  margin:0;
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 28px); /* auto scales */
  line-height:1.3;
  letter-spacing:.3px;
  color:#fff;
  -webkit-text-fill-color:#fff;

  /* Mobile-resilience */
  text-align:center;           /* center on all screens */
  max-width: 100%;
  overflow-wrap:anywhere;      /* prevent overflow on tiny screens */
  word-break:normal;
  hyphens:auto;
  text-wrap:balance;           /* nicer line breaks (supported modern browsers) */
  padding:8px 12px;            /* breathing room on mobiles */
}

/* Optional: if the title sits on dark green bar, keep spacing tight */
@media (min-width: 768px){
  .section-title{ padding:10px 16px; }
}

/* Very small phones: slightly tighter */
@media (max-width:360px){
  .section-title{
    font-size:clamp(16px, 5.2vw, 22px);
    letter-spacing:.2px;
  }
}

/* Remove default page gap so header full-width dikhe */
html, body { margin: 0; }

/* Full-bleed green bar */
.top-header{
  background:#155c3b;
  color:#fff;
  padding:10px 0;
  opacity:1;
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
  z-index: 5;
  overflow-x:hidden;  /* parent pe overflow band */
}

/* Inner wrapper (centers content on large screens) */
.header-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Text + phone in one line */
.header-left{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  white-space:nowrap;
  flex-wrap:nowrap;
  min-height:40px;
}

/* Message */
.header-left span{
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.2;
  font-size:15px;
}

/* Phone */
.header-left a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1.2;
  font-size:15px;
}

/* Tablet tweaks */
@media (max-width: 768px){
  .top-header{ padding:10px 0; }
  .header-content{ padding:0 12px; }
  .header-left{ gap:10px; }
}

/* Very small phones — force scroll without showing bar */
@media (max-width: 480px){
  .header-content{
    overflow-x:auto;               /* swipe enable */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* Firefox hide */
  }
  .header-content::-webkit-scrollbar{
    display:none;                  /* Chrome/Safari hide */
  }

  .header-left{
    display:inline-flex;           /* ek hi line */
    width:max-content;             /* apne content ke hisaab se width */
  }
}
/* Container width + padding */
.wrap-1360{
  max-width:1360px;
  margin:0 auto;
  padding:20px 18px;
}



/* Slightly tighter on phones */
@media (max-width: 768px){
  .wrap-1360{ padding:16px 14px; }
}

@media (max-width: 400px){
  .wrap-1360{ padding:14px 12px; }
  .rich-copy{ font-size: 15px;  margin-top: 20px;}
}

.benefits{
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 7px;
  background:#fff;       /* optional background */
  border-radius:8px;     /* optional rounded look */
}

.benefits ul{
  list-style:disc inside;    /* bullets neatly inside */
  margin:0;
  padding:0;
}

.benefits li{
  margin-bottom:12px;
  font-size:clamp(14px, 2vw, 16px);  /* responsive font size */
  line-height:1.5;
  color:#222;
}

.benefits b{
  color:#155c3b;   /* highlight keywords in green */
}

/* Tablet */
@media (max-width: 768px){
  .benefits{ padding:14px 16px; }
  .benefits li{ font-size:15px; }
}

/* Mobile phones */
@media (max-width: 480px){
  .benefits{ padding:12px 14px; }
  .benefits li{
    font-size:14px;
    line-height:1.6;
    margin-bottom:10px;
  }
}
.section-title {
  margin: 0;
  font-weight: 800;
  font-size: 21px; /* responsive scaling */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #fff;
  -webkit-text-fill-color: #fff;

  text-indent: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  mix-blend-mode: normal;

  text-align: center;        /* mobile & desktop me center */
  max-width: 100%;
  padding: 8px 12px;         /* mobile ke liye breathing space */
  overflow-wrap: anywhere;   /* break if needed */
  text-wrap: balance;        /* modern balanced wrapping */
}

/* Tablet *
@media (max-width: 768px){
  .section-title {
    font-size: 21px;
    padding: 6px 10px;
  }
}

/* Very small phones */
@media (max-width: 400px){
  .section-title {
    font-size: 21px;
    letter-spacing: .2px;
  }
}
/* Wrapper grid */
.elig-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Left list */
.elig-list ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.elig-list li {
  margin-bottom: 12px;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  color: #222;
}

.elig-list b {
  color: #155c3b; /* highlight */
}

/* Right image */
.elig-visual figure {
  margin: 0;
}

.elig-visual img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Tablet */
@media (max-width: 992px) {
  .elig-wrap {
    gap: 20px;
    padding: 20px 16px;
  }
}
.heading-wrap {
  /* Change this value to whatever you need */
  padding: 0px !important;
}
/* Mobile */
@media (max-width: 768px) {
  .elig-wrap {
    grid-template-columns: 1fr; /* stack */
    text-align: center;
  }
  .elig-list ul {
    text-align: left;
    display: inline-block; /* keep bullets neat */
  }
  .elig-visual {
    order: -1; /* image upar aa jaye, optional */
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .elig-list li {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.row-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  max-width:1200px;
  margin:0 auto;
  padding:12px;
}

.card-box{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.card-box a{ display:block; }

/* Uniform thumbnail frames */
.card-box img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 4 / 3;      /* consistent tile shape */
  object-fit: cover;        /* fill nicely (may crop a bit) */
}

/* Tablet */
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px){
  .row-grid{ grid-template-columns: 1fr; }
  .row-grid{ padding:10px; gap:10px; }
}


/* === Force single-line heading (no wrap) === */
.section-title{
  white-space: nowrap !important;   /* এক লাইনে রাখে */
  overflow-x: auto !important;       /* লম্বা হলে swipe করে দেখাবে */
  overflow-y: hidden;
  display: block;
  max-width: 100%;
  -webkit-overflow-scrolling: touch; /* smooth swipe on iOS */
  word-break: normal;
  hyphens: none;
}
/* <br> থাকলে লাইন ভাঙবে না */
.section-title br{ display:none !important; }

/* Optional: scrollbar লুকানো */
.section-title::-webkit-scrollbar{ display:none; }
.section-title{ scrollbar-width: none; }
/* Alternative: cut + ellipsis */
.section-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  .section-heading {
  margin: 0;
  font-weight: 800;
  font-size: 10px; /* responsive size */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #090909;

  text-align: center;         /* center for all screens */
  padding: 8px 12px;
  text-wrap: balance;         /* balanced line breaks */
  overflow-wrap: anywhere;    /* prevent overflow */
}

/* Tablet */
@media (max-width: 768px) {
  .section-heading {
    font-size: clamp(17px, 4vw, 24px);
    padding: 6px 10px;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .section-heading {
    font-size: clamp(16px, 4.5vw, 20px);
    letter-spacing: .2px;
  }
}


/* Lightbox off by default */
.lightbox{
  position: fixed; inset: 0; z-index: 9999;
  display: none;            /* <-- important */
  align-items: center; justify-content: center;
  background: rgba(10,12,16,.92);
}
/* Target hole dekhabe */
.lightbox:target{ display: flex; }  /* <-- important */
.lightbox img{ max-width:92vw; max-height:82vh; object-fit:contain }
.lightbox .nav{ position:fixed; top:50%; transform:translateY(-50%); color:green; text-decoration:none; font-size:36px; }
.lightbox .prev{ left:12px } .lightbox .next{ right:12px }
.lightbox .toolbar{ position:fixed; top:10px; left:50%; transform:translateX(-50%); }
.counter{ position:fixed; top:12px; left:12px; color:#fff; }
.caption{ position:fixed; bottom:14px; left:50%; transform:translateX(-50%); color:#fff; }

.doc-frame.watermark { position: relative; }
.doc-frame.watermark::after{
  content: attr(data-watermark);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem; font-weight: 600; letter-spacing: .05em;
  white-space: nowrap; pointer-events: none;

  /* একদম ফিকে: রঙের ভেতরেই alpha, opacity = 1 */
  color: rgba(255, 255, 255, 0.02); /* ~2% opacity */
  opacity: 1;
  text-shadow: none;
}




    
.logo-container {
  display: flex;
  justify-content: center; /* Horizontally centers the content */
  align-items: center;     /* Vertically centers the content */
  /* You may need to specify a height for vertical centering to work */
  height: 100vh; /* Example: Centers the logo within the entire viewport height */
}
.logo-container {
  display: flex;
  justify-content: center; /* horizontally center */
  align-items: center;     /* vertically center */
}
.college-logo {
  width: 130px; 
  height: auto;
  /* turn dark logo → white, white bg → black */
  filter: brightness(0) invert(1);
  /* make black areas blend into the dark background */
  mix-blend-mode: screen;
  align-items: 'center';
}
/* 🔄 সব ellipsis/nowrap/clamp রিসেট করে দিন */
#study-pattern .section-title{
  display: block;
  max-width: 100%;
  white-space: normal !important;   /* একলাইনে আটকাবেন না */
  overflow: visible !important;     /* লুকাবেন না */
  text-overflow: clip !important;   /* … বন্ধ */
  overflow-wrap: anywhere;          /* লম্বা শব্দ ভাঙতে পারবে */
  word-break: break-word;           /* প্রয়োজনে শব্দ ভেঙে দিন */

  /* আগের কোথাও ক্ল্যাম্প থাকলে সেগুলোও অফ */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* মোবাইলে শুধু সাইজ/স্পেসিং লাগলে */
@media (max-width: 400px){
  #study-pattern .section-title{
    font-size: 21px;
    letter-spacing: .2px;
    line-height: 1.25;
  }
}

/* Mobile: সর্বোচ্চ ২ লাইনে ক্ল্যাম্প */
/* Base: একলাইনের nowrap/ellipsis জোর করে অফ করুন */
#study-pattern .section-title{
  display:block;
  max-width:100%;
  white-space: normal !important;   /* কোনো nowrap থাকলে ওভাররাইড */
  text-overflow: clip !important;   /* single-line ellipsis নিষ্ক্রিয় */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile: সর্বোচ্চ ২ লাইনে ক্ল্যাম্প */
@media (max-width: 400px){
  #study-pattern .section-title{
    font-size:21px;
    letter-spacing:.2px;
    line-height:1.25;

    display:-webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* 2 লাইন */
    overflow:hidden;           /* অতিরিক্ত অংশ লুকাবে */
  }

  /* parent flex হলে wrap নিশ্চিত করতে */
  #study-pattern .heading-bar,
  #study-pattern .section-title { min-width:0; }
}

/* Firefox fallback (ellipsis নাও দেখাতে পারে, তবে ২ লাইনের পর কাটবে) */
@supports not (-webkit-line-clamp: 2){
  #study-pattern .section-title{
    line-height:1.25;
    max-height: calc(1.25em * 2);
    overflow:hidden;
  }
}


    /* base: একলাইন ellipsis/nowrap থাকলে জোর করে অফ করুন */
  #eligibility .section-title{
    display:block;
    max-width:100%;
    white-space: normal !important;   /* nowrap override */
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip !important;   /* single-line ellipsis থাকলে কেটে দিন */
  }

  /* mobile: ২ লাইনে ক্ল্যাম্প */
  @media (max-width: 400px){
    #eligibility .section-title{
      /* আপনার inline font-size থাকলে সেটা থাকবে; না থাকলে চাইলে এখানে দিন */
      line-height: 1.25;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;   /* সর্বোচ্চ ২ লাইন */
      overflow: hidden;        /* ২ লাইনের পর লুকাবে */
    }
    /* যদি parent flex হয়—wrap কাজ নাও করতে পারে, তাই এটা সহায়ক */
    #eligibility * { min-width: 0; }
  }
    .provide-heading {
  background: #02522d;      /* green background */
  padding: 0px 0px;       /* छोटा padding */
  border-radius: 10px;      /* rounded corners */
  text-align: center;
}

.provide-title {
  margin: 0;
  font-size: 21px;          /* छोटा font-size */
  font-weight: 600;
  color: #fff;  
  margin-top: -14px;            /* white text */
}

  /* ===== MOBILE SIDE-GAP FIX (paste at very end) ===== */
.heading-bar {
  background: #02522d;       /* green background */
  padding: 7px 7px;        /* reduced padding */
  border-radius: 10px;       /* same rounded look */
  text-align: center;
}

.section-title {
  margin: 0;
  font-size: 18px;           /* adjust if needed */
  font-weight: 600;
  color: #fff;               /* white text */
}

/* 0) Safety */
*,
*::before,
*::after { box-sizing: border-box; }
html, body{
  margin:0 !important;
  padding:0 !important;
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;     /* stop horizontal scroll */
}

/* 1) Global mobile gutters: 8px (left/right) */
@media (max-width: 768px){
  .wrap, .wrap-1360, .wrap1,
  .officials-section, .sectionyt,
  .fees-section, .study-content,
  #certificate, .carousel-container,
  .table-scroll, .elig-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Grids tighter */
  .row-grid, .doc-grid { gap:10px !important; padding:8px !important; }
}

/* 2) Kill giant inner padding causing “air” on sides */
.carousel-item{ padding: 0 !important; }            /* was 100px */
.pg-box{ padding: 12px !important; }                /* softer */
@media (max-width: 768px){
  .header-bar, .heading-bar, .heading-bar1 { padding-left:10px !important; padding-right:10px !important; }
}

/* 3) Scroll-snap carousels: compact edge insets */
@media (max-width: 768px){
  .carousel-wrapper{
    padding-inline: 8px !important;
    scroll-padding-inline: 8px !important;
    column-gap: 8px !important;
    gap: 8px !important;
  }
  #official-website .carousel-wrapper{
    padding-inline: 8px !important;
    scroll-padding-inline: 8px !important;
    column-gap: 8px !important;
    gap: 8px !important;
  }
  .carousel-container{ padding-bottom: 10px !important; }
  #official-website .carousel-dots{ margin-top:6px !important; }
}

/* 4) Full-bleed bars using 100vw → don't overflow on mobile */
@media (max-width: 768px){
  .top-header{
    left:auto !important; right:auto !important;
    margin:0 !important;
    width:100% !important;           /* instead of 100vw */
  }
  .heading-title{
    width:100% !important;           /* was 100vw in mobile rule */
    max-width:100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* 5) Prevent any element from pushing width */
img, video, iframe, canvas{ max-width:100% !important; height:auto; display:block; }

/* 6) Trim duplicate container paddings so layout stays edge-to-edge */
@media (max-width: 768px){
  section{ padding-left: 0 !important; padding-right: 0 !important; }
  /* but keep our desired 8px via containers above */
}

/* 7) Optional: utility if kono section absolutely full-bleed chai
   <div class="no-side-gap">...</div> wrap korle edge-to-edge hoye jabe */
@media (max-width: 768px){
  .no-side-gap{ margin-left: calc(-8px) !important; margin-right: calc(-8px) !important; }
}
  
    /* শুধু ব্রাউজারের ডিফল্ট ডট রাখব */
.benefits ul,
.elig-list ul{
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.2rem;
  margin: 0;
}

/* আগে থেকে থাকা কাস্টম বুলেট বন্ধ */
.benefits li::before,
.elig-list li::before{
  content: none !important;
  background: none !important;
}

/* নিরাপদ স্পেসিং */
.benefits li,
.elig-list li{
  padding-left: 0;
  margin-bottom: 10px;
  line-height: 1.6;
}

    /* list container */
.benefits .benefit-list{
  margin:0;
  padding-left: 1.2rem;   /* বুলেটের জন্য সামান্য ইনডেন্ট */
  list-style: disc;       /* ডিফল্ট ডিস্ক বুলেট */
}

/* প্রতিটি আইটেম */
.benefits .benefit-list li{
  margin-bottom:12px;
  line-height:1.7;
  color:#173042;
  font-size:clamp(14px, 2vw, 16px);
}

/* বুলেটের রং (চাইলে) */
.benefits .benefit-list li::marker{
  color:#0b5e3a;
  font-size:1.1em;
}

/* কোথাও আগে কাস্টম বুলেট থাকলে সম্পূর্ণ বন্ধ করবে */
.benefits li::before,
.benefits .benefit-list li::before{
  content:none !important;
  background:none !important;
}

    /* আপনার আগের .section-title বদলাবেন না—শুধু এই অ্যাডঅন */
.section-title.split{ line-height:1.25; margin:0; text-align:center; }
.section-title.split .t1,
.section-title.split .t2{ display:block; }

.section-title.split .t1{
  font-size: clamp(22px, 3.2vw, 42px);   /* উপরের লাইন */
  font-weight: 800;
  letter-spacing:.3px;
  color: black;
}
/* Split title: both lines black */
.section-title.split,
.section-title.split .t1,
.section-title.split .t2{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important; /* Safari/iOS */
}

.section-title.split .t2{
  margin-top: 6px;                       /* একটু ফাঁক */
  font-size: clamp(18px, 2.6vw, 32px);   /* নিচের লাইন */
  font-weight: 900;
  letter-spacing:.3px;
}

    /* Slider container */
.slider-wrap {
  width: 100%;
  max-width: 900px; /* Adjust as needed */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f7f7f7;
}

/* Hide radio buttons */
.nav-radio {
  display: none;
}

/* Viewport and Track */
.vp-box {
  width: 100%;
  overflow: hidden;
}

.trk-box {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Page container for each slide */
.pg-box {
  width: 100%;
  flex-shrink: 0;
  padding: 20px;
}

/* Grid for four cards per page */
.row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Changed from 3 to 4 */
  gap: 15px;
  align-items: center;
  justify-items: center;
}

/* Card styling */
.card-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  height:200px
}
/* ---- NO CROP: show full image inside card ---- */
.slider-wrap .row-grid .card-box{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  display:block;              /* keep layout same */
}

/* আগে যেখানে cover/4:3 ছিল—সেটা বাদ, এখন contain */
.slider-wrap .row-grid .card-box img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;        /* ডকুমেন্টের জন্য সমান উচ্চতা; চাইলে 4/3 করতে পারো */
  object-fit: contain;        /* ✅ আর কাটা পড়বে না */
  background:#f3f5f7;         /* সাইডে ফাঁকা হলে হালকা ব্যাকগ্রাউন্ড */
  display:block;
}

/* যেখানেই image-card ব্যবহার হয়েছে সেখানেও crop বন্ধ করতে চাও? */
.image-card img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;        /* বা তোমার পছন্দের রেশিও */
  object-fit: contain;        /* ✅ no crop */
  background:#f3f5f7;
}
/* === 3টা কার্ড পাশাপাশি, NO CROP === */

/* প্রতিটা টাইলের সমান উঁচু ফ্রেম (পোর্ট্রেট ডকুমেন্টের জন্য ভাল লাগে) */
.row-grid .card-box{
  aspect-ratio: 3 / 4;            /* চাইলে 4/3 বা 1/1 করতে পারো */
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  display:flex;                   /* ইমেজকে মাঝখানে বসাতে */
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* ইমেজ কাটবে না, ফ্রেমের মধ্যে পুরোটা দেখাবে */
.row-grid .card-box img,
.image-card img{
  width:100%;
  height:100%;
  object-fit: contain !important;  /* ✅ no crop */
  background:#f3f5f7;              /* পাশের ফাঁকা জায়গায় হালকা ব্যাকগ্রাউন্ড */
  display:block;
}

/* রেসপন্সিভ গ্রিড (ডেস্কটপ=৩, ট্যাব=২, মোবাইল=১) */
.row-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .row-grid{ grid-template-columns: 1fr; }
}
/* ==== NO CROP: নিচটা আর কাটবে না ==== */
.row-grid .card-box img,
.image-card img,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* পুরো ইমেজ দেখাও, crop নয় */
  object-position: center top;      /* উপরে অ্যাঙ্কর করলে নিচে কাটা পড়ে না */
  background: #f3f5f7;              /* ফাঁকা জায়গায় হালকা ব্যাকগ্রাউন্ড */
  display: block;
}

/* যেথায় ফ্রেম ফিক্সড হাইট আছে, ওখানে কাটাছেঁড়া ঠেকাতে */
.row-grid .card-box,
.image-card,
.frame {
  overflow: visible;                 /* প্যারেন্টে হাইড থাকলে কাটে; তাই visible */
}

/* কার্ডগুলো সমান হাইট চাইলে – ফ্রেম দিন (ইমেজ তবু কাটা হবে না) */
.row-grid .card-box { aspect-ratio: 10/ 4; }   /* পোর্ট্রেট ডকুমেন্টে সুন্দর লাগে */
/* চাইলে 4/3 বা 1/1 দিতে পারেন */


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

/* Navigation Arrows */
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  display: none; /* Initially hide all arrows */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
  font-size: 24px;
}

.arrow-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* Show arrows based on radio button state */
#p1:checked ~ .arrow-btn.a1, #p2:checked ~ .arrow-btn.a2, #p3:checked ~ .arrow-btn.a3 {
  display: flex;
}

/* Dots for pagination */
.dot-wrap {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot-btn {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Highlight active dot */
#p1:checked ~ .dot-wrap .dot-btn:nth-child(1), #p2:checked ~ .dot-wrap .dot-btn:nth-child(2), #p3:checked ~ .dot-wrap .dot-btn:nth-child(3) {
  background-color: #000;
}

/* Page transitions based on radio button state */
#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%);
}

/* Responsive design for mobile view */
@media (max-width: 768px) {
  .row-grid {
    grid-template-columns: repeat(2, 1fr); /* On mobile, show 2 images for better viewing */
    gap: 10px;
  }
}
    /* ===== Bigger carousel cards (desktop & mobile) ===== */
#official-website .officials-section { padding: 20px 0 8px; }

.carousel-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 24px 42px;
  position: relative;
}

.carousel-wrapper{
  display: flex;
  gap: 32px;                 /* space between cards */
  scroll-behavior: smooth;
  will-change: transform;
}
/* ============ THEME & SCALES ============ */


/* Section header – like screenshot */
#official-website.officials-section{ padding: 14px 12px 0; background:var(--bg); }
#official-website .header-bar{
  max-width:1400px;margin:0 auto 14px;background:var(--brand);color:#fff;
  padding:14px 18px;border-radius:10px;text-align:center;
  font-weight:900;font-size:24px;letter-spacing:.3px;
}

/* ============ CAROUSEL LAYOUT ============ */
#official-website .carousel-container{
  max-width:1400px;margin:0 auto;position:relative;padding:4px 0 10px;overflow:visible;
}

/* Desktop default: 3-up with small gaps (like your screenshot) */
#official-website .carousel-wrapper{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: calc((100% - (2 * var(--gap))) / 3);
  column-gap: var(--gap); gap: var(--gap);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
}
#official-website .carousel-wrapper::-webkit-scrollbar{ display:none; }
#official-website .carousel-wrapper{ scrollbar-width:none; }

#official-website .carousel-item{
  width:auto;margin:0;padding:0;scroll-snap-align:start;transform:translateZ(0);
}

/* Tablet: 2-up */
@media (max-width:1199.98px){
  #official-website .carousel-wrapper{
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
}
/* Mobile: 1-up */
@media (max-width:767.98px){
  #official-website .carousel-wrapper{
    grid-auto-columns: 100%;
    column-gap: 0; gap:0;           /* tighter on mobile */
    padding-inline: 16px; scroll-padding-inline: 16px;
  }
}

/* ============ CARD ============ */
#official-website .image-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:#eee; box-shadow:var(--shadow);
}
#official-website .image-card img{
  width:100%; aspect-ratio:20/9; object-fit:cover; display:block;
}
/* ===== Assurance Beyond Admission (responsive) ===== */
#Assurance.rv-reviews{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  background: #f5f9f7;
  border: 1px solid #e6efe9;
  border-radius: 14px;
}

#Assurance .rv-heading{
  margin: 0 0 10px;
  font-weight: 900;
  color: #f9fbf9;                 /* brand green */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .2px;
}

#Assurance p{
  margin: 0;
  color: #080808;
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.7;
}

/* Tablet+ gets a touch more breathing room */
@media (min-width: 768px){
  #Assurance.rv-reviews{ padding: 32px 28px; }
}

/* Optional: full-bleed (edge-to-edge on mobile) */
@media (max-width: 600px){
  #Assurance.rv-reviews{
    border-radius: 10px;
    padding: 18px 16px;
  }
}

/* Footer overlay on the image (as in screenshot) */
#official-website .card-footer{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; display:flex; align-items:center; justify-content:flex-start;
  gap:18px; padding:10px 14px; font-weight:800;
  font-size:clamp(12px,1.05vw,15px); line-height:1.2;
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}
#official-website .card-footer span::before{ content:"📞"; margin-right:8px; }
#official-website .card-footer a{
  color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.95);
  white-space:nowrap;
}
#official-website .card-footer a::before{ content:"🌐"; margin-right:6px; }

/* ============ ARROWS ============ */




/* ============ DOTS (tight under images) ============ */
#official-website .carousel-dots{
  display:flex; gap:12px; justify-content:center; align-items:center; margin-top:10px;
}
#official-website .carousel-dots button{
  width:10px; height:10px; border-radius:50%; border:0; background:#cfcfcf; cursor:pointer;
}
#official-website .carousel-dots button[aria-current="true"]{ background:var(--brand); }

/* Base card width: big, but responsive */
.carousel-item{
  flex: 0 0 clamp(340px, 36vw, 520px);
}

.image-card{
  background: #0b5e3a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

/* Make images fill the card nicely and look large */
.image-card img{
  width: 100%;
  aspect-ratio: 16 / 9;      /* tall enough visuals */
  object-fit: cover;
  display: block;
}

/* Footer text larger */
.card-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #0b5e3a;
  color: #fff;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.25;
}
.card-footer a{ color:#fff; text-decoration: underline; white-space: nowrap; }

/* Bigger arrows so layout feels balanced with larger cards */


/* ===== Tablet ===== */
@media (max-width:1199px) and (min-width:768px){
  .carousel-item{ flex-basis: clamp(420px, 48vw, 520px); }
}



    /* ====== Officials carousel (website + mobile) ====== */
.officials-section{ max-width:1360px; margin:0 auto; padding:24px 18px 0; }

.carousel-container{
  --gap:18px;
  --perView:3;                /* desktop: 3 cards */
  max-width:100%;
  margin:12px auto 0;
  position:relative;
  padding:0 12px 32px;        /* space for dots */
}

/* breakpoints */
@media (max-width:1200px){ .carousel-container{ --perView:2; } }
@media (max-width:700px){  .carousel-container{ --perView:1; } }

/* track */
.carousel-wrapper{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--gap)*(var(--perView)-1))/var(--perView));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-wrapper::-webkit-scrollbar{ display:none; }
.carousel-item{ scroll-snap-align:start; }

/* card */
.image-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.image-card img{
  width:100%; height:auto;
  display:block;
  aspect-ratio:16 / 9;        /* wide like screenshot */
  object-fit:cover;
}

/* green footer strip (inside the image) */
.card-footer{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:#075b38;
  color:#fff; font-weight:700; line-height:1.35; font-size:14px;
}
.card-footer a{ color:#fff; text-decoration:none; }
.card-footer a:hover{ text-decoration:underline; }

/* arrows */


/* dots */
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.carousel-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#cfd7dd; cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#075b38; }

     body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            margin: 0;
        }

        .officials-section {
            padding: 2rem 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .header-bar {
            background-color: #004d40;
            color: #fff;
            padding: 1.5rem;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .carousel-container {
            position: relative;
            width: 100%;
            margin-top: 2rem;
            overflow: hidden;
        }

        .carousel-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: auto;
            align-items: center;
        }

        .carousel-item {
            flex: 0 0 100%;
            padding: 100px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
        }

        .image-card {
            max-width: 320px;
            width: 100%;
            background-color: #fff;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
        }
.image-card {
  width: 300px; /* Adjust the card's width as needed */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-card img {
  width: 100%; /* Ensures the image fills the card's width */
  height: 200px; /* Sets a fixed height for the image */
  object-fit: cover; /* This is the key property. It crops the image to fit the container without distortion. */
  display: block;
}

        .card-footer {
            padding: 1rem;
            background-color: #00695c;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .card-footer span, .card-footer a {
            display: block;
            font-size: 0.9rem;
        }

        .card-footer a {
            color: #fff;
            text-decoration: underline;
        }

      

        .carousel-prev {
            left: 1rem;
        }

        .carousel-next {
            right: 1rem;
        }

        .carousel-dots {
            text-align: center;
            margin-top: 1rem;
        }

        .dot {
            height: 12px;
            width: 12px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .dot.active {
            background-color: #004d40;
        }

        /* Responsive adjustments */
        @media (min-width: 768px) {
            .carousel-item {
                flex: 0 0 50%; /* Show two cards on tablets */
            }
        }

        @media (min-width: 1024px) {
            .carousel-item {
                flex: 0 0 33.333%; /* Show three cards on desktops */
            }
        }
    /* ====== Container ====== */
.carousel-container{
  --gap:16px;
  --perView:4;               /* xl default */
  max-width:1200px;
  margin:0 auto;
  position:relative;
  padding:8px 12px 28px;     /* bottom space for dots */
}

/* breakpoints: 3 → 2 → 1 */
@media (max-width:1200px){ .carousel-container{ --perView:3; } }
@media (max-width:900px){  .carousel-container{ --perView:2; } }
@media (max-width:600px){  .carousel-container{ --perView:1; } }

/* ====== Track (scroll-snap grid) ====== */
.carousel-wrapper{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--gap) * (var(--perView) - 1)) / var(--perView));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox hide */
}
.carousel-wrapper::-webkit-scrollbar{ display:none; } /* WebKit hide */

.carousel-item{ scroll-snap-align:start; }

/* ====== Card ====== */
.image-card{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  background:#fff;
  display:flex;
  flex-direction:column;
  height:100%;
}
.image-card img{
  width:100%; height:auto;
  display:block;
  aspect-ratio: 4 / 3;            /* uniform tiles; change to 16/9 if you prefer */
  object-fit:cover;
}

/* Footer bar under each image */
.card-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#075b38;
  color:#fff;
  font-size:14px; line-height:1.35; font-weight:700;
}
.card-footer a{ color:#fff; text-decoration:none; word-break:break-word; }
.card-footer a:hover{ text-decoration:underline; }

/* ====== Arrows ====== */




/* ====== Dots ====== */
.carousel-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:10px;
}
.carousel-dots button{
  width:8px; height:8px; border-radius:50%;
  border:0; background:#cfd7dd; cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#075b38; }

    /* Container */
.officials-section{
  max-width:1360px;
  margin:0 auto;
  padding:24px 18px 0;
}

/* Green heading bar */
.header-bar{
  background:#02522d;
  color:#fff;
  text-align:center;
  padding:8px 12px;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.3;
  -webkit-text-fill-color:#fff;
  font-size:10px; /* responsive size */
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Slightly tighter on small phones */
@media (max-width:768px){
  .officials-section{ padding:20px 14px 0; }
  .header-bar{ padding:6px 10px; }
}

/* OPTIONAL: force single line + swipe (no scrollbar shown)
.header-bar{
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.header-bar::-webkit-scrollbar{ display:none; }
*/

    /* ===== Container ===== */
.sectionyt{

}
/* ===== Responsive wrapper ===== */
.wrap1{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 3.5vw, 32px) clamp(12px, 4vw, 28px);
  box-sizing: border-box;
  overflow-x: hidden;              /* prevent side scroll on mobile */
}
.wrap1 *, .wrap1 *::before, .wrap1 *::after{ box-sizing: inherit; }

/* Text scales nicely */
.wrap1 h1{ font-size: clamp(20px, 4.2vw, 34px); margin: 0 0 10px; }
.wrap1 h2{ font-size: clamp(18px, 3.6vw, 28px); margin: 0 0 8px; }
.wrap1 p { font-size: clamp(14px, 2.6vw, 16px); line-height: 1.7; }

/* Media fits container */
.wrap1 img, .wrap1 video, .wrap1 canvas, .wrap1 svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Long content won't break layout */
.wrap1{ word-break: break-word; }

/* Optional: grid helpers for inner layouts */
.wrap1 .row{
  display: grid;
  grid-template-columns: 1fr;      /* mobile: single column */
  gap: 16px;
}
@media (min-width: 600px){
  .wrap1 .row.two   { grid-template-columns: 1fr 1fr; }
  .wrap1 .row.three { grid-template-columns: repeat(3, 1fr); }
  .wrap1 .row       { gap: 18px; }
}
@media (min-width: 1024px){
  .wrap1 .row       { gap: 22px; }
}

/* Tables: make scrollable on small screens */
.wrap1 .table-scroll{ overflow-x: auto; }
.wrap1 .table-scroll table{ min-width: 600px; border-collapse: collapse; }


/* ===== Top: YouTube grid ===== */
.yt-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* desktop: 3 */
}

@media (max-width: 992px){
  .yt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* tablet: 2 */
}
@media (max-width: 640px){
  .yt-grid{ grid-template-columns: 1fr; gap:12px; } /* mobile: 1 */
}

.yt-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Responsive 16:9 frame */
.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 ===== */
.promo-row{
  display:grid;
  grid-template-columns: 1.2fr .8fr;  /* image larger */
  gap:16px;
  align-items:center;
  margin-top:18px;
}
@media (max-width: 768px){
  .promo-row{ grid-template-columns:1fr; gap:12px; }
}

.promo-img{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.promo-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;     /* consistent banner height */

}

.promo-text{
  background:#035332;
  color:#fff;
  border-radius:12px;
  padding:16px;
  text-align:center;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  text-wrap:balance;
}
/* hide <br class="small"> on desktop; show on mobile for nicer breaks */
.small{ display:none; }
@media (max-width: 640px){
  .promo-text{ padding:14px; }
  .small{ display:inline; }
}

    /* Wrapper: a little higher + mobile swipe */
.table-scroll{
  max-width:1200px;
  margin:-8px auto 0;                /* ⬆️ ekto upore uthlo */
  padding:0 12px;
  overflow-x:auto;                   /* mobile swipe */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* hide scrollbar (Firefox) */
}
.table-scroll::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit) */

/* Table base */
.table-scroll table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;                /* predictable column widths */
  min-width:780px;                   /* keeps columns readable; swipes on phones */
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}

/* Head */
.table-scroll thead th{
  background:#155c3b;
  color:#fff;
  text-align:left;
  padding:12px 10px;
  font-weight:700;
  font-size:clamp(13px,1.6vw,15px);
  position:sticky; top:0; z-index:1; /* sticky header on scroll */
}

/* Cells */
.table-scroll td{
  padding:10px;
  font-size:clamp(13px,1.6vw,15px);
  color:#111;
  vertical-align:top;
  border-bottom:1px solid #eef1f4;
  word-break:break-word;             /* long text wraps nicely */
}

/* Zebra rows */
.table-scroll tbody tr:nth-child(odd){ background:#fafcfd; }

/* Emphasis cells */
.table-scroll .phase{ font-weight:700; color:#155c3b; }
.table-scroll .subject{ font-weight:600; }

/* Tighten on very small phones */
@media (max-width:400px){
  .table-scroll{ margin:-6px auto 0; padding:0 10px; }
  .table-scroll thead th, .table-scroll td{ padding:8px 8px; }
}

    /* light push-down for both mobile & desktop */
/* Container */
.study-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  font-family: Arial, sans-serif;
  color:#111;
}

/* Paragraphs */
.study-content p{
  margin: 0 0 12px;
  font-size: 21px;  /* scales nicely on phones */
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;               /* better mobile wrapping */
  overflow-wrap: anywhere;     /* prevent overflow on tiny screens */
}

/* Underlined section titles */
.study-content .uline{
  font-weight: 700;
  color: #155c3b;
  padding-bottom: 6px;
  position: relative;
  font-size: 15px;
}

.study-content .uline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;                 /* underline length */
  height: 3px;

  border-radius: 2px;
}

/* Slightly tighter on small phones */
@media (max-width: 480px){
  .study-content{ padding: 10px 14px; }
  .study-content p{ line-height: 1.7; }
}

/* a little more room on larger screens (optional) */
@media (min-width: 768px){
  .rich-copy{ margin-top: -47px; }
}

    .rich-copy{
  font-family: Arial, sans-serif;
  color:#111;
  margin:0;
  line-height:1.75;
  font-size:clamp(14px, 1.9vw, 16px); /* scales nicely on phones */
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;               /* cleaner breaks on mobile */
  overflow-wrap:anywhere;     /* prevent overflow */
}

.rich-copy b{ color:#155c3b; }

/* Optional container if you want page padding */
.wrap-1360{ max-width:1360px; margin:0 auto; padding:16px 18px; }
@media (max-width:768px){ .wrap-1360{ padding:14px 14px; } }

    /* ============ Layout ============ */
.two-col{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:16px 12px;
}

.card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Keep both sides the same height */
.frame{
  position:relative;
  aspect-ratio: 16 / 9;   /* equal height for img & video */
  background:#f5f7fa;     /* subtle backdrop for portrait cert */
}

/* Certificate image */
/* Frame: portrait box so certificate nicely fits */
.frame{
  position: relative;
  aspect-ratio: 3 / 4;   /* portrait; change if needed */
  background: #f5f7fa;   /* light backdrop for empty space */
  overflow: hidden;
}

/* Certificate image: fully visible, centered */
.frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;        /* ✅ show full certificate (no crop) */
  object-position: center;    /* center it */
  display: block;
  margin: 0;                  /* remove negative offset */
}
/* Will fill the frame but may crop edges */
.frame img{
  object-fit: contain;      /* fill + crop */
  object-position: center;

}
/* ===== FAQ (responsive) ===== */
#faq.rv-reviews{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  background: #f7faf9;
  border: 1px solid #e6efe9;
  border-radius: 14px;
  text-align: left;
}

#faq .rv-heading{
  margin: 0 0 12px;
  font-weight: 900;
  color:white;                    /* brand green */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .2px;
}

#faq p{
  margin: 0;
  color: #173042;
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.7;
}

/* Anchor scroll fix: if you click a link to #faq-section,
   keep the heading visible below a sticky header */
#faq-section{
  scroll-margin-top: var(--anchor-offset, 84px);
}

/* Mobile tweak */
@media (max-width: 600px){
  #faq.rv-reviews{
    border-radius: 10px;
    padding: 18px 16px;
  }
}


/* Responsive YouTube */
.frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ============ Mobile ============ */
@media (max-width: 768px){
  .two-col{ grid-template-columns:1fr; gap:12px; padding:14px 12px; margin-top:  5px; }
}
.two-col .card:first-child .frame{ aspect-ratio: 3 / 4; } /* optional */

    /* Container (optional if wrapped elsewhere) */
#certificate{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 12px;
}

/* Responsive grid */
.certificate-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card */
.certificate-item{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 10px;
  display: grid;
  place-items: center;
}

/* Uniform portrait frame */
.certificate-item img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;   /* portrait look */
  object-fit: contain;   /* show full certificate */
  display: block;
}

/* Tablet tweaks */
@media (max-width: 992px){
  .certificate-grid{ gap:14px; }
}

/* Phones */
@media (max-width: 640px){
  .certificate-grid{
    grid-template-columns: repeat(2, 1fr);  /* 2 per row on phones */
    gap:12px;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .certificate-grid{ grid-template-columns: 1fr; } /* single column */
}

   /* shared container */
.wrap-1360{
  max-width:1360px;
  margin:0 auto;
  padding:24px 18px 0;
}

/* ribbon = same look as before */
.ribbon{
  background:#02522d;
  text-align:center;
  padding:8px 12px;          /* compact like before */
  border-radius:6px;
}
.ribbon h1{
  margin:0;
  font-weight:800;
  color:#fff; -webkit-text-fill-color:#fff;
  letter-spacing:.3px;
  line-height:1.3;
  font-size:clamp(18px, 2.2vw, 28px);  /* responsive, balanced */
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* text block (website-like) */
.why-copy{
  line-height:1.7;
  font-size:clamp(14px,1.9vw,16px);
  color:#111;
  font-family:Arial, sans-serif;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  margin:20px 0 0;
}

/* small screens: a bit tighter */
@media (max-width:768px){
  .wrap-1360{ padding:20px 14px 0; }
  .ribbon{ padding:6px 10px; }
}

/* Responsive green ribbon */
.ribbon{
  background:#02522d;          /* same green as your bar */
  text-align:center;
  padding:10px 14px;           /* comfy on desktop */
  border-radius:6px;
}

/* Title inside the ribbon */
.ribbon h1{
  margin:0;
  font-weight:800;
  color:#fff;
  -webkit-text-fill-color:#fff;
  line-height:1.3;
  letter-spacing:.3px;
  font-size:clamp(18px, 2.2vw, 28px);  /* scales for mobile/desktop */
  text-wrap:balance;                    /* prettier line breaks */
  overflow-wrap:anywhere;               /* no overflow on tiny phones */
}

/* Tighter padding on small screens */
@media (max-width: 768px){
  .ribbon{ padding:8px 12px; }
}
@media (max-width: 400px){
  .ribbon{ padding:6px 10px; }
}
/* Base styles for all screen sizes */
.ribbon h1 {
  font-size: 24px; /* A good starting font size */
  text-align: center;
}

/* Media query for screens smaller than 768px (common breakpoint for tablets/mobile) */
@media (max-width: 767px) {
  section {
    padding: 12px 10px 0; /* Reduce padding for smaller screens */
    margin-top: 20px;
  }

  .ribbon h1 {
    font-size: 18px; /* Make the font size smaller on mobile */
    /* You can add more styles here, like line-height, to improve readability */
  }
}
.section-title{ margin:0; font-weight:800; color:#fff; line-height:1.3; letter-spacing:.3px; font-size:24px; }

    /* same container look as your Admission Procedure bar */
.heading-bar{
  max-width:2000px;
  margin:0 auto;
  padding:0 7px;
}
.heading-bar{
  background:#02522d;
  text-align:center;
  padding:7px;
  border-radius:6px;
}
.heading-bar1{
  max-width:2000px;
  margin:0 auto;
  padding:0 8px;
}
.heading-bar1{
  background:#02522d;
  text-align:center;
  padding:12px;
  border-radius:6px;
}
/* title styling (matches your section-title behavior) */
.heading-title{
  margin:0;
  font-weight:800;
  color:#f9f7f7;
  -webkit-text-fill-color:rgb(20, 20, 20)a0a;
  letter-spacing:.3px;
  line-height:1.3;
  font-size:11px;
}

    /* Ribbon: same look on all screens */
.ribbon{
  background:#155c3b;
  color:#fff;
  margin:24px auto 18px;
  padding:10px 7px;
  border-radius:999px;    /* pill */
  width:fit-content;      /* shrink to content */
  max-width:100%;
  text-align:center;
  overflow-x:auto;        /* allow swipe on tiny phones */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;   /* hide scrollbar (Firefox) */
}
.ribbon::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit) */

.ribbon h1{
  margin:0;
  font-family:Oswald, sans-serif;
  font-weight:800;
  font-size:28px;         /* same size on mobile & desktop */
  line-height:1.25;
  letter-spacing:.3px;
  white-space:nowrap;     /* keep one line */
  -webkit-text-fill-color:#fff;
}

    /* Wrapper */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}

/* Responsive grid */
.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}

/* Card */
.doc-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Clickable area */
.doc-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Figure frame */
.doc-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;           /* document-like portrait */
  background:linear-gradient(180deg,#f7f9fb,#eef3f7);
  overflow:hidden;
}

/* Image */
.doc-frame img{
  width:100%;
  height:100%;
  object-fit:cover;           /* fill nicely; use 'contain' if you prefer full page inside */
  display:block;
  transition:transform .25s ease;
}

/* Hover / focus effect */
.doc-card:hover img,
.doc-link:focus img{ transform:scale(1.02); }

.doc-link:focus-visible{
  outline:2px solid #155c3b;
  outline-offset:4px;
  border-radius:10px;
}

/* Optional watermark via data-watermark */
.doc-frame.watermark::after{
  content:attr(data-watermark);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:700 26px/1.1 system-ui, sans-serif;
  color:#155c3b;
  opacity:.08;
  transform:rotate(-18deg);
  pointer-events:none;
}

/* Tighter on tablets */
@media (max-width: 992px){
  .wrap{ padding:18px 14px; }
  .doc-grid{ gap:16px; }
}

/* Phones: single column, comfy padding */
@media (max-width: 640px){
  .wrap{ padding:16px 12px; }
  .doc-grid{
    grid-template-columns:1fr;   /* mobile = single column */
    gap:14px;
  }
  .doc-frame{ aspect-ratio: 3/4; }
}

/* Very small phones */
@media (max-width: 380px){
  .doc-frame.watermark::after{ font-size:22px; }
}
/* Row-wise list (desktop + mobile: 1 item per row) */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}

.doc-grid{
  display:grid;
  grid-template-columns: 1fr;   /* ✅ row-wise: single column */
  gap:16px;
}

.doc-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.section-title{
  margin:0;
  font-weight:800;
  color:#fff;
  -webkit-text-fill-color:#fff;
  letter-spacing:.3px;
  line-height:1.3;
  text-align:center;
  padding:8px 12px;

  /* desktop = same size as site */
  font-size:28px;
}

/* phones: keep one line, allow swipe, hide scrollbar */
@media (max-width: 768px){
  .section-title{
    font-size:28px;               /* same size on mobile */
    white-space:nowrap;           /* single line */
    overflow-x:auto;              /* swipe horizontally if needed */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;   
        /* Firefox hide */
  }
  .section-title::-webkit-scrollbar{ display:none; } /* Chrome/Safari hide */
}

/* OPTIONAL: if instead you want auto-wrap (no swipe), comment the block above
   and use this smaller mobile size:
@media (max-width: 768px){
  .section-title{ font-size:22px; white-space:normal; overflow-x:visible; }
}
*/

.doc-frame{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  background:#f5f7fa;
}
.doc-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Narrower container */
.wrap{
  max-width: 1000px;   /* choto width */
  margin: 0 auto;
  padding: 16px 12px;
}

/* Column layout */
.doc-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;            /* mobile: 1 column */
}

/* Tablet: 2 columns */
@media (min-width: 600px){
  .doc-grid{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

/* Desktop: 3 columns */
@media (min-width: 1100px){
  .doc-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

/* Cards (optional polish) */
.doc-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

.doc-frame{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  background:#f5f7fa;
}
.doc-frame img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Container: full or comfy width (choose one) */
.wrap{
  /* Option 1: full width */
  max-width: 100%;
  /* Option 2: fixed comfy width (uncomment if you want) */
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 20px 16px;
}

/* GRID: no empty columns, no big white gap */
.doc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* ✅ auto-fit collapses empties */
  gap: 16px;
  grid-auto-flow: dense;      /* fill holes between rows */
  align-items: stretch;
}

/* Card + image */
.doc-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); height:100%; }
.doc-frame{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#f5f7fa; }
.doc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Phones: single column */
@media (max-width: 640px){
  .doc-grid{ grid-template-columns: 1fr; }
}
/* Container */
.wrap{
  max-width: 1280px;    /* 4 column comfortably fits */
  margin: 0 auto;
  padding: 16px 12px;
}

/* Grid: default 1 col */
.doc-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;                 /* mobile: 1 */
}

/* ≥600px: 2 cols */
@media (min-width: 600px){
  .doc-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

/* ≥900px: 3 cols */
@media (min-width: 900px){
  .doc-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

/* ≥1200px: 4 cols ✅ */
@media (min-width: 1200px){
  .doc-grid{ grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}

/* Card + image (same as before) */
.doc-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.doc-frame{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#f5f7fa; }
.doc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

    .fees-section{
  max-width:1360px;
  margin:20px auto;
  padding:0 18px;
  font-family: Arial, sans-serif;
  color:#111;
}

.fees-copy{
  line-height:1.7;
  font-size:clamp(14px, 1.9vw, 16px); /* desktop→mobile scale */
  text-align:justify;                 /* website-like */
  text-justify:inter-word;            /* better spacing when justified */
  hyphens:auto;                       /* allow soft hyphenation on mobile */
  overflow-wrap:anywhere;             /* prevent overflow on tiny screens */
}

.fees-copy strong{ color:#155c3b; }

/* Tablet */
@media (max-width: 768px){
  .fees-section{ padding:0 14px; }
  .fees-copy{ line-height:1.75; }
}

/* Small phones */
@media (max-width: 400px){
  .fees-section{ padding:0 12px; }
  .fees-copy{ font-size:15px; }
}

    /* Top green ribbon (responsive) */
.ribbon{
  background: var(--green, #155c3b);
  color:#fff;
  margin:24px auto 18px;
  padding:10px 16px;
  border-radius:999px;          /* pill look */
  width: fit-content;           /* shrink to content */
  max-width: min(100%, 720px);  /* don't overflow */
  text-align:center;
}

.ribbon h1{
  margin:0;
  letter-spacing:.3px;
  font-family: Oswald, sans-serif;
  font-weight:800;
  font-size: clamp(18px, 4.2vw, 28px); /* scales on mobile */
  line-height:1.25;
  overflow-wrap:anywhere;       /* prevent overflow on tiny phones */
  text-wrap: balance;           /* nicer line breaks (modern browsers) */
}

/* Tablet */
@media (max-width: 768px){
  .ribbon{ padding:10px 14px; }
}

/* Small phones: make it feel wider without breaking layout */
@media (max-width: 480px){
  .ribbon{
    width:92%;                  /* nearly full width on small screens */
    border-radius:10px;         /* softer */
  }
  .ribbon h1{
    font-size: clamp(16px, 5.4vw, 22px);
  }
}

    .section-title{
  margin:0;
  font-weight:800;
  font-size:40px; /* responsive size */
  line-height:1.3;
  letter-spacing:.3px;
  color:#fff;
  -webkit-text-fill-color:#fff;

  text-align:center;        /* desktop + mobile */
  padding:8px 12px;         /* mobile breathing room */
  max-width:100%;
  overflow-wrap:anywhere;   /* prevent overflow */
  text-wrap:balance;        /* nicer line breaks (modern browsers) */
}

/* Small tablets/phones */
@media (max-width:768px){
  .section-title{ font-size:clamp(17px, 4vw, 24px); padding:6px 10px; }
}

/* Very small phones */
@media (max-width:400px){
  .section-title{ font-size:15px; letter-spacing:.2px; }
}

    .steps {
  max-width: 900px;         /* center block on large screens */
  margin: 0 auto;
  padding: 20px;
  background: #fff;         /* optional white background */
  border-radius: 8px;       /* smooth card look */
}

.steps p {
  margin: 0 0 12px;
  font-size: clamp(14px, 2vw, 16px); /* responsive font */
  line-height: 1.6;
  color: #222;
  position: relative;
  padding-left: 8px;
}

.steps b {
  color: #155c3b;           /* highlight steps in green */
}

/* Tablet */
@media (max-width: 768px) {
  .steps {
    padding: 16px;
  }
  .steps p {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

/* Mobile */
@media (max-width: 500px) {
  .steps {
    padding: 12px;
  }
  .steps p {
    font-size: 14px;
    line-height: 1.5;
  }
}

    /* Base title */
.section-title{
  margin:0;
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 28px); /* auto scales */
  line-height:1.3;
  letter-spacing:.3px;
  color:#fff;
  -webkit-text-fill-color:#fff;

  /* Mobile-resilience */
  text-align:center;           /* center on all screens */
  max-width: 100%;
  overflow-wrap:anywhere;      /* prevent overflow on tiny screens */
  word-break:normal;
  hyphens:auto;
  text-wrap:balance;           /* nicer line breaks (supported modern browsers) */
  padding:8px 12px;            /* breathing room on mobiles */
}

/* Optional: if the title sits on dark green bar, keep spacing tight */
@media (min-width: 768px){
  .section-title{ padding:10px 16px; }
}

/* Very small phones: slightly tighter */
@media (max-width:360px){
  .section-title{
    font-size:clamp(16px, 5.2vw, 22px);
    letter-spacing:.2px;
  }
}

/* Remove default page gap so header full-width dikhe */
html, body { margin: 0; }

/* Full-bleed green bar */
.top-header{
  background:#155c3b;
  color:#fff;
  padding:10px 0;
  opacity:1;
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
  z-index: 5;
  overflow-x:hidden;  /* parent pe overflow band */
}

/* Inner wrapper (centers content on large screens) */
.header-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Text + phone in one line */
.header-left{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  white-space:nowrap;
  flex-wrap:nowrap;
  min-height:40px;
}

/* Message */
.header-left span{
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.2;
  font-size:15px;
}

/* Phone */
.header-left a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1.2;
  font-size:15px;
}

/* Tablet tweaks */
@media (max-width: 768px){
  .top-header{ padding:10px 0; }
  .header-content{ padding:0 12px; }
  .header-left{ gap:10px; }
}

/* Very small phones — force scroll without showing bar */
@media (max-width: 480px){
  .header-content{
    overflow-x:auto;               /* swipe enable */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* Firefox hide */
  }
  .header-content::-webkit-scrollbar{
    display:none;                  /* Chrome/Safari hide */
  }

  .header-left{
    display:inline-flex;           /* ek hi line */
    width:max-content;             /* apne content ke hisaab se width */
  }
}
/* Container width + padding */
.wrap-1360{
  max-width:1360px;
  margin:0 auto;
  padding:20px 18px;
}



/* Slightly tighter on phones */
@media (max-width: 768px){
  .wrap-1360{ padding:16px 14px; }
}

@media (max-width: 400px){
  .wrap-1360{ padding:14px 12px; }
  .rich-copy{ font-size: 15px;  margin-top: -47px;}
}

.benefits{
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 7px;
  background:#fff;       /* optional background */
  border-radius:8px;     /* optional rounded look */
}

.benefits ul{
  list-style:disc inside;    /* bullets neatly inside */
  margin:0;
  padding:0;
}

.benefits li{
  margin-bottom:12px;
  font-size:clamp(14px, 2vw, 16px);  /* responsive font size */
  line-height:1.5;
  color:#222;
}

.benefits b{
  color:#155c3b;   /* highlight keywords in green */
}

/* Tablet */
@media (max-width: 768px){
  .benefits{ padding:14px 16px; }
  .benefits li{ font-size:15px; }
}

/* Mobile phones */
@media (max-width: 480px){
  .benefits{ padding:12px 14px; }
  .benefits li{
    font-size:14px;
    line-height:1.6;
    margin-bottom:10px;
  }
}
.section-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px); /* responsive scaling */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #fff;
  -webkit-text-fill-color: #fff;

  text-indent: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  mix-blend-mode: normal;

  text-align: center;        /* mobile & desktop me center */
  max-width: 100%;
  padding: 8px 12px;         /* mobile ke liye breathing space */
  overflow-wrap: anywhere;   /* break if needed */
  text-wrap: balance;        /* modern balanced wrapping */
}


@media (max-width: 768px){
  .section-title {
    font-size: 10px;
    padding: 0px 0px;
  }
}

/* Very small phones */
@media (max-width: 400px){
  .section-title{
    font-size: 17px;
    letter-spacing: .2px;

    /* wrap allow */
    white-space: normal;
    overflow-wrap: anywhere;   /* long word/URL হলেও ভাঙবে */
    word-break: break-word;

    /* সর্বোচ্চ ২ লাইনে সীমাবদ্ধ */
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* 2-line clamp */
    overflow: hidden;          /* 2 লাইনের বাইরে কাটবে */
  }
}

/* Wrapper grid */
.elig-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Left list */
.elig-list ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.elig-list li {
  margin-bottom: 12px;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  color: #222;
}

.elig-list b {
  color: #155c3b; /* highlight */
}

/* Right image */
.elig-visual figure {
  margin: 0;
}

.elig-visual img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Tablet */
@media (max-width: 992px) {
  .elig-wrap {
    gap: 20px;
    padding: 20px 16px;
  }
}
.heading-wrap {
  /* Change this value to whatever you need */
  padding: 0px !important;
}
/* Mobile */
@media (max-width: 768px) {
  .elig-wrap {
    grid-template-columns: 1fr; /* stack */
    text-align: center;
  }
  .elig-list ul {
    text-align: left;
    display: inline-block; /* keep bullets neat */
  }
  .elig-visual {
    order: -1; /* image upar aa jaye, optional */
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .elig-list li {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.row-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  max-width:1200px;
  margin:0 auto;
  padding:12px;
}

.card-box{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.card-box a{ display:block; }

/* Uniform thumbnail frames */
.card-box img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 4 / 3;      /* consistent tile shape */
  object-fit: cover;        /* fill nicely (may crop a bit) */
}

/* Tablet */
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px){
  .row-grid{ grid-template-columns: 1fr; }
  .row-grid{ padding:10px; gap:10px; }
}


 .section-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px);  /* responsive size */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #fff;
  -webkit-text-fill-color: #fff;

  text-align: center;          /* center for all screens */
  padding: 8px 12px;
  text-wrap: balance;          /* balanced line breaks (modern browsers) */
  overflow-wrap: anywhere;     /* prevent cut text */
}

/* Tablet */
@media (max-width: 768px) {
  .section-title {
    font-size: 10px;
    padding: 0px 0px;
  }
}

/* base: এক লাইনের ellipsis যেন না থাকে */
.section-title{
  display:block;
  max-width:100%;
  white-space: normal !important;   /* nowrap override */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 1) base: এক লাইনের ellipsis/nowrap জোর করে অফ করুন */
.section-title{
  display:block;
  max-width:100%;
  white-space: normal !important;  /* nowrap override */
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip !important;  /* single-line ellipsis থাকলে কেটে দিন */
}

/* 2) mobile: ২ লাইনে ক্ল্যাম্প করুন (webkit) */
@media (max-width: 400px){
  .section-title{
    font-size:17px;
    letter-spacing:.2px;

    line-height:1.25;
    display:-webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* সর্বোচ্চ ২ লাইন */
    overflow:hidden;         /* ২ লাইনের পর লুকাবে */
  }

  /* parent যদি flex হয়, wrap কাজের জন্য এটা সহায়ক */
  .section-title, .section-title * { min-width:0; }
}




  .section-heading {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px); /* responsive size */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #090909;

  text-align: center;         /* center for all screens */
  padding: 8px 12px;
  text-wrap: balance;         /* balanced line breaks */
  overflow-wrap: anywhere;    /* prevent overflow */
}

/* Tablet */
@media (max-width: 768px) {
  .section-heading {
    font-size: 10px;
    padding: 6px 10px;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .section-heading {
    font-size: clamp(16px, 4.5vw, 20px);
    letter-spacing: .2px;
  }
}

.logo-container {
  display: flex;
  justify-content: center; /* Horizontally centers the content */
  align-items: center;     /* Vertically centers the content */
  /* You may need to specify a height for vertical centering to work */
  height: 100vh; /* Example: Centers the logo within the entire viewport height */
}
.logo-container {
  display: flex;
  justify-content: center; /* horizontally center */
  align-items: center;     /* vertically center */
}
.college-logo {
  width: 130px; 
  height: auto;
  /* turn dark logo → white, white bg → black */
  filter: brightness(0) invert(1);
  /* make black areas blend into the dark background */
  mix-blend-mode: screen;
  align-items: 'center';
}
/* 🔄 সব ellipsis/nowrap/clamp রিসেট করে দিন */
#study-pattern .section-title{
  display: block;
  max-width: 100%;
  white-space: normal !important;   /* একলাইনে আটকাবেন না */
  overflow: visible !important;     /* লুকাবেন না */
  text-overflow: clip !important;   /* … বন্ধ */
  overflow-wrap: anywhere;          /* লম্বা শব্দ ভাঙতে পারবে */
  word-break: break-word;           /* প্রয়োজনে শব্দ ভেঙে দিন */

  /* আগের কোথাও ক্ল্যাম্প থাকলে সেগুলোও অফ */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* মোবাইলে শুধু সাইজ/স্পেসিং লাগলে */
@media (max-width: 400px){
  #study-pattern .section-title{
    font-size: 21px;
    letter-spacing: .2px;
    line-height: 1.25;
  }
}

/* Mobile: সর্বোচ্চ ২ লাইনে ক্ল্যাম্প */
/* Base: একলাইনের nowrap/ellipsis জোর করে অফ করুন */
#study-pattern .section-title{
  display:block;
  max-width:100%;
  white-space: normal !important;   /* কোনো nowrap থাকলে ওভাররাইড */
  text-overflow: clip !important;   /* single-line ellipsis নিষ্ক্রিয় */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile: সর্বোচ্চ ২ লাইনে ক্ল্যাম্প */
@media (max-width: 400px){
  #study-pattern .section-title{
    font-size:21px;
    letter-spacing:.2px;
    line-height:1.25;

    display:-webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* 2 লাইন */
    overflow:hidden;           /* অতিরিক্ত অংশ লুকাবে */
  }

  /* parent flex হলে wrap নিশ্চিত করতে */
  #study-pattern .heading-bar,
  #study-pattern .section-title { min-width:0; }
}

/* Firefox fallback (ellipsis নাও দেখাতে পারে, তবে ২ লাইনের পর কাটবে) */
@supports not (-webkit-line-clamp: 2){
  #study-pattern .section-title{
    line-height:1.25;
    max-height: calc(1.25em * 2);
    overflow:hidden;
  }
}


    /* base: একলাইন ellipsis/nowrap থাকলে জোর করে অফ করুন */
  #eligibility .section-title{
    display:block;
    max-width:100%;
    white-space: normal !important;   /* nowrap override */
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip !important;   /* single-line ellipsis থাকলে কেটে দিন */
  }

  /* mobile: ২ লাইনে ক্ল্যাম্প */
  @media (max-width: 400px){
    #eligibility .section-title{
      /* আপনার inline font-size থাকলে সেটা থাকবে; না থাকলে চাইলে এখানে দিন */
      line-height: 1.25;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;   /* সর্বোচ্চ ২ লাইন */
      overflow: hidden;        /* ২ লাইনের পর লুকাবে */
    }
    /* যদি parent flex হয়—wrap কাজ নাও করতে পারে, তাই এটা সহায়ক */
    #eligibility * { min-width: 0; }
  }
    .provide-heading {
  background: #02522d;      /* green background */
  padding: 0px 0px;       /* छोटा padding */
  border-radius: 10px;      /* rounded corners */
  text-align: center;
}

.provide-title {
  margin: 0;
  font-size: 21px;          /* छोटा font-size */
  font-weight: 600;
  color: #fff;  
  margin-top: -14px;            /* white text */
}

  /* ===== MOBILE SIDE-GAP FIX (paste at very end) ===== */
.heading-bar {
  background: #02522d;       /* green background */
  padding: 7px 7px;        /* reduced padding */
  border-radius: 10px;       /* same rounded look */
  text-align: center;
}

.section-title {
  margin: 0;
  font-size: 18px;           /* adjust if needed */
  font-weight: 600;
  color: #fff;               /* white text */
}

/* 0) Safety */
*,
*::before,
*::after { box-sizing: border-box; }
html, body{
  margin:0 !important;
  padding:0 !important;
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;     /* stop horizontal scroll */
}

/* 1) Global mobile gutters: 8px (left/right) */
@media (max-width: 768px){
  .wrap, .wrap-1360, .wrap1,
  .officials-section, .sectionyt,
  .fees-section, .study-content,
  #certificate, .carousel-container,
  .table-scroll, .elig-wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Grids tighter */
  .row-grid, .doc-grid { gap:10px !important; padding:8px !important; }
}

/* 2) Kill giant inner padding causing “air” on sides */
.carousel-item{ padding: 0 !important; }            /* was 100px */
.pg-box{ padding: 12px !important; }                /* softer */
@media (max-width: 768px){
  .header-bar, .heading-bar, .heading-bar1 { padding-left:10px !important; padding-right:10px !important; }
}

/* 3) Scroll-snap carousels: compact edge insets */
@media (max-width: 768px){
  .carousel-wrapper{
    padding-inline: 8px !important;
    scroll-padding-inline: 8px !important;
    column-gap: 8px !important;
    gap: 8px !important;
  }
  #official-website .carousel-wrapper{
    padding-inline: 8px !important;
    scroll-padding-inline: 8px !important;
    column-gap: 8px !important;
    gap: 8px !important;
  }
  .carousel-container{ padding-bottom: 10px !important; }
  #official-website .carousel-dots{ margin-top:6px !important; }
}

/* 4) Full-bleed bars using 100vw → don't overflow on mobile */
@media (max-width: 768px){
  .top-header{
    left:auto !important; right:auto !important;
    margin:0 !important;
    width:100% !important;           /* instead of 100vw */
  }
  .heading-title{
    width:100% !important;           /* was 100vw in mobile rule */
    max-width:100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* 5) Prevent any element from pushing width */
img, video, iframe, canvas{ max-width:100% !important; height:auto; display:block; }

/* 6) Trim duplicate container paddings so layout stays edge-to-edge */
@media (max-width: 768px){
  section{ padding-left: 0 !important; padding-right: 0 !important; }
  /* but keep our desired 8px via containers above */
}

/* 7) Optional: utility if kono section absolutely full-bleed chai
   <div class="no-side-gap">...</div> wrap korle edge-to-edge hoye jabe */
@media (max-width: 768px){
  .no-side-gap{ margin-left: calc(-8px) !important; margin-right: calc(-8px) !important; }
}
  
    /* শুধু ব্রাউজারের ডিফল্ট ডট রাখব */
.benefits ul,
.elig-list ul{
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.2rem;
  margin: 0;
}

/* আগে থেকে থাকা কাস্টম বুলেট বন্ধ */
.benefits li::before,
.elig-list li::before{
  content: none !important;
  background: none !important;
}

/* নিরাপদ স্পেসিং */
.benefits li,
.elig-list li{
  padding-left: 0;
  margin-bottom: 10px;
  line-height: 1.6;
}

    /* list container */
.benefits .benefit-list{
  margin:0;
  padding-left: 1.2rem;   /* বুলেটের জন্য সামান্য ইনডেন্ট */
  list-style: disc;       /* ডিফল্ট ডিস্ক বুলেট */
}

/* প্রতিটি আইটেম */
.benefits .benefit-list li{
  margin-bottom:12px;
  line-height:1.7;
  color:#173042;
  font-size:clamp(14px, 2vw, 16px);
}

/* বুলেটের রং (চাইলে) */
.benefits .benefit-list li::marker{
  color:#0b5e3a;
  font-size:1.1em;
}

/* কোথাও আগে কাস্টম বুলেট থাকলে সম্পূর্ণ বন্ধ করবে */
.benefits li::before,
.benefits .benefit-list li::before{
  content:none !important;
  background:none !important;
}

    /* আপনার আগের .section-title বদলাবেন না—শুধু এই অ্যাডঅন */
.section-title.split{ line-height:1.25; margin:0; text-align:center; }
.section-title.split .t1,
.section-title.split .t2{ display:block; }

.section-title.split .t1{
  font-size: clamp(22px, 3.2vw, 42px);   /* উপরের লাইন */
  font-weight: 800;
  letter-spacing:.3px;
  color: black;
}
/* Split title: both lines black */
.section-title.split,
.section-title.split .t1,
.section-title.split .t2{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important; /* Safari/iOS */
}

.section-title.split .t2{
  margin-top: 6px;                       /* একটু ফাঁক */
  font-size: clamp(18px, 2.6vw, 32px);   /* নিচের লাইন */
  font-weight: 900;
  letter-spacing:.3px;
}

    /* Slider container */
.slider-wrap {
  width: 100%;
  max-width: 900px; /* Adjust as needed */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f7f7f7;
}

/* Hide radio buttons */
.nav-radio {
  display: none;
}

/* Viewport and Track */
.vp-box {
  width: 100%;
  overflow: hidden;
}

.trk-box {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* Page container for each slide */
.pg-box {
  width: 100%;
  flex-shrink: 0;
  padding: 20px;
}

/* Grid for four cards per page */
.row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Changed from 3 to 4 */
  gap: 15px;
  align-items: center;
  justify-items: center;
}

/* Card styling */
.card-box {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  height:200px
}
/* ---- NO CROP: show full image inside card ---- */
.slider-wrap .row-grid .card-box{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  display:block;              /* keep layout same */
}

/* আগে যেখানে cover/4:3 ছিল—সেটা বাদ, এখন contain */
.slider-wrap .row-grid .card-box img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;        /* ডকুমেন্টের জন্য সমান উচ্চতা; চাইলে 4/3 করতে পারো */
  object-fit: contain;        /* ✅ আর কাটা পড়বে না */
  background:#f3f5f7;         /* সাইডে ফাঁকা হলে হালকা ব্যাকগ্রাউন্ড */
  display:block;
}

/* যেখানেই image-card ব্যবহার হয়েছে সেখানেও crop বন্ধ করতে চাও? */
.image-card img{
  width:100%;
  height:100%;
  aspect-ratio: 3 / 4;        /* বা তোমার পছন্দের রেশিও */
  object-fit: contain;        /* ✅ no crop */
  background:#f3f5f7;
}
/* === 3টা কার্ড পাশাপাশি, NO CROP === */

/* প্রতিটা টাইলের সমান উঁচু ফ্রেম (পোর্ট্রেট ডকুমেন্টের জন্য ভাল লাগে) */
.row-grid .card-box{
  aspect-ratio: 3 / 4;            /* চাইলে 4/3 বা 1/1 করতে পারো */
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  display:flex;                   /* ইমেজকে মাঝখানে বসাতে */
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* ইমেজ কাটবে না, ফ্রেমের মধ্যে পুরোটা দেখাবে */
.row-grid .card-box img,
.image-card img{
  width:100%;
  height:100%;
  object-fit: contain !important;  /* ✅ no crop */
  background:#f3f5f7;              /* পাশের ফাঁকা জায়গায় হালকা ব্যাকগ্রাউন্ড */
  display:block;
}

/* রেসপন্সিভ গ্রিড (ডেস্কটপ=৩, ট্যাব=২, মোবাইল=১) */
.row-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .row-grid{ grid-template-columns: 1fr; }
}
/* ==== NO CROP: নিচটা আর কাটবে না ==== */
.row-grid .card-box img,
.image-card img,
.frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;   /* পুরো ইমেজ দেখাও, crop নয় */
  object-position: center top;      /* উপরে অ্যাঙ্কর করলে নিচে কাটা পড়ে না */
  background: #f3f5f7;              /* ফাঁকা জায়গায় হালকা ব্যাকগ্রাউন্ড */
  display: block;
}

/* যেথায় ফ্রেম ফিক্সড হাইট আছে, ওখানে কাটাছেঁড়া ঠেকাতে */
.row-grid .card-box,
.image-card,
.frame {
  overflow: visible;                 /* প্যারেন্টে হাইড থাকলে কাটে; তাই visible */
}

/* কার্ডগুলো সমান হাইট চাইলে – ফ্রেম দিন (ইমেজ তবু কাটা হবে না) */
.row-grid .card-box { aspect-ratio: 10/ 4; }   /* পোর্ট্রেট ডকুমেন্টে সুন্দর লাগে */
/* চাইলে 4/3 বা 1/1 দিতে পারেন */


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

/* Navigation Arrows */
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  display: none; /* Initially hide all arrows */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
  font-size: 24px;
}

.arrow-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* Show arrows based on radio button state */
#p1:checked ~ .arrow-btn.a1, #p2:checked ~ .arrow-btn.a2, #p3:checked ~ .arrow-btn.a3 {
  display: flex;
}

/* Dots for pagination */
.dot-wrap {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot-btn {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Highlight active dot */
#p1:checked ~ .dot-wrap .dot-btn:nth-child(1), #p2:checked ~ .dot-wrap .dot-btn:nth-child(2), #p3:checked ~ .dot-wrap .dot-btn:nth-child(3) {
  background-color: #000;
}

/* Page transitions based on radio button state */
#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%);
}

/* Responsive design for mobile view */
@media (max-width: 768px) {
  .row-grid {
    grid-template-columns: repeat(2, 1fr); /* On mobile, show 2 images for better viewing */
    gap: 10px;
  }
}
    /* ===== Bigger carousel cards (desktop & mobile) ===== */
#official-website .officials-section { padding: 20px 0 8px; }

.carousel-container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 24px 42px;
  position: relative;
}

.carousel-wrapper{
  display: flex;
  gap: 32px;                 /* space between cards */
  scroll-behavior: smooth;
  will-change: transform;
}
/* ============ THEME & SCALES ============ */


/* Section header – like screenshot */
#official-website.officials-section{ padding: 14px 12px 0; background:var(--bg); }
#official-website .header-bar{
  max-width:1400px;margin:0 auto 14px;background:var(--brand);color:#fff;
  padding:14px 18px;border-radius:10px;text-align:center;
  font-weight:900;font-size:24px;letter-spacing:.3px;
}

/* ============ CAROUSEL LAYOUT ============ */
#official-website .carousel-container{
  max-width:1400px;margin:0 auto;position:relative;padding:4px 0 10px;overflow:visible;
}

/* Desktop default: 3-up with small gaps (like your screenshot) */
#official-website .carousel-wrapper{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: calc((100% - (2 * var(--gap))) / 3);
  column-gap: var(--gap); gap: var(--gap);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
}
#official-website .carousel-wrapper::-webkit-scrollbar{ display:none; }
#official-website .carousel-wrapper{ scrollbar-width:none; }

#official-website .carousel-item{
  width:auto;margin:0;padding:0;scroll-snap-align:start;transform:translateZ(0);
}

/* Tablet: 2-up */
@media (max-width:1199.98px){
  #official-website .carousel-wrapper{
    grid-auto-columns: calc((100% - var(--gap)) / 2);
  }
}
/* Mobile: 1-up */
@media (max-width:767.98px){
  #official-website .carousel-wrapper{
    grid-auto-columns: 100%;
    column-gap: 0; gap:0;           /* tighter on mobile */
    padding-inline: 16px; scroll-padding-inline: 16px;
  }
}

/* ============ CARD ============ */
#official-website .image-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:#eee; box-shadow:var(--shadow);
}
#official-website .image-card img{
  width:100%; aspect-ratio:20/9; object-fit:cover; display:block;
}
/* ===== Assurance Beyond Admission (responsive) ===== */
#Assurance.rv-reviews{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  background: #f5f9f7;
  border: 1px solid #e6efe9;
  border-radius: 14px;
}

#Assurance .rv-heading{
  margin: 0 0 10px;
  font-weight: 900;
  color: #f9fbf9;                 /* brand green */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .2px;
}

#Assurance p{
  margin: 0;
  color: #080808;
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.7;
}

/* Tablet+ gets a touch more breathing room */
@media (min-width: 768px){
  #Assurance.rv-reviews{ padding: 32px 28px; }
}

/* Optional: full-bleed (edge-to-edge on mobile) */
@media (max-width: 600px){
  #Assurance.rv-reviews{
    border-radius: 10px;
    padding: 18px 16px;
  }
}

/* Footer overlay on the image (as in screenshot) */
#official-website .card-footer{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff; display:flex; align-items:center; justify-content:flex-start;
  gap:18px; padding:10px 14px; font-weight:800;
  font-size:clamp(12px,1.05vw,15px); line-height:1.2;
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
}
#official-website .card-footer span::before{ content:"📞"; margin-right:8px; }
#official-website .card-footer a{
  color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.95);
  white-space:nowrap;
}
#official-website .card-footer a::before{ content:"🌐"; margin-right:6px; }

/* ============ ARROWS ============ */




/* ============ DOTS (tight under images) ============ */
#official-website .carousel-dots{
  display:flex; gap:12px; justify-content:center; align-items:center; margin-top:10px;
}
#official-website .carousel-dots button{
  width:10px; height:10px; border-radius:50%; border:0; background:#cfcfcf; cursor:pointer;
}
#official-website .carousel-dots button[aria-current="true"]{ background:var(--brand); }

/* Base card width: big, but responsive */
.carousel-item{
  flex: 0 0 clamp(340px, 36vw, 520px);
}

.image-card{
  background: #0b5e3a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

/* Make images fill the card nicely and look large */
.image-card img{
  width: 100%;
  aspect-ratio: 16 / 9;      /* tall enough visuals */
  object-fit: cover;
  display: block;
}

/* Footer text larger */
.card-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #0b5e3a;
  color: #fff;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.25;
}
.card-footer a{ color:#fff; text-decoration: underline; white-space: nowrap; }

/* Bigger arrows so layout feels balanced with larger cards */


/* ===== Tablet ===== */
@media (max-width:1199px) and (min-width:768px){
  .carousel-item{ flex-basis: clamp(420px, 48vw, 520px); }
}



    /* ====== Officials carousel (website + mobile) ====== */
.officials-section{ max-width:1360px; margin:0 auto; padding:24px 18px 0; }

.carousel-container{
  --gap:18px;
  --perView:3;                /* desktop: 3 cards */
  max-width:100%;
  margin:12px auto 0;
  position:relative;
  padding:0 12px 32px;        /* space for dots */
}

/* breakpoints */
@media (max-width:1200px){ .carousel-container{ --perView:2; } }
@media (max-width:700px){  .carousel-container{ --perView:1; } }

/* track */
.carousel-wrapper{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--gap)*(var(--perView)-1))/var(--perView));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-wrapper::-webkit-scrollbar{ display:none; }
.carousel-item{ scroll-snap-align:start; }

/* card */
.image-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.image-card img{
  width:100%; height:auto;
  display:block;
  aspect-ratio:16 / 9;        /* wide like screenshot */
  object-fit:cover;
}

/* green footer strip (inside the image) */
.card-footer{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:#075b38;
  color:#fff; font-weight:700; line-height:1.35; font-size:14px;
}
.card-footer a{ color:#fff; text-decoration:none; }
.card-footer a:hover{ text-decoration:underline; }

/* arrows */


/* dots */
.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; }
.carousel-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#cfd7dd; cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#075b38; }

     body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            margin: 0;
        }

        .officials-section {
            padding: 2rem 1rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .header-bar {
            background-color: #004d40;
            color: #fff;
            padding: 1.5rem;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .carousel-container {
            position: relative;
            width: 100%;
            margin-top: 2rem;
            overflow: hidden;
        }

        .carousel-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
            height: auto;
            align-items: center;
        }

        .carousel-item {
            flex: 0 0 100%;
            padding: 100px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
        }

        .image-card {
            max-width: 320px;
            width: 100%;
            background-color: #fff;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
        }
.image-card {
  width: 300px; /* Adjust the card's width as needed */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-card img {
  width: 100%; /* Ensures the image fills the card's width */
  height: 200px; /* Sets a fixed height for the image */
  object-fit: cover; /* This is the key property. It crops the image to fit the container without distortion. */
  display: block;
}

        .card-footer {
            padding: 1rem;
            background-color: #00695c;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .card-footer span, .card-footer a {
            display: block;
            font-size: 0.9rem;
        }

        .card-footer a {
            color: #fff;
            text-decoration: underline;
        }

      

        .carousel-prev {
            left: 1rem;
        }

        .carousel-next {
            right: 1rem;
        }

        .carousel-dots {
            text-align: center;
            margin-top: 1rem;
        }

        .dot {
            height: 12px;
            width: 12px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .dot.active {
            background-color: #004d40;
        }

        /* Responsive adjustments */
        @media (min-width: 768px) {
            .carousel-item {
                flex: 0 0 50%; /* Show two cards on tablets */
            }
        }

        @media (min-width: 1024px) {
            .carousel-item {
                flex: 0 0 33.333%; /* Show three cards on desktops */
            }
        }
    /* ====== Container ====== */
.carousel-container{
  --gap:16px;
  --perView:4;               /* xl default */
  max-width:1200px;
  margin:0 auto;
  position:relative;
  padding:8px 12px 28px;     /* bottom space for dots */
}

/* breakpoints: 3 → 2 → 1 */
@media (max-width:1200px){ .carousel-container{ --perView:3; } }
@media (max-width:900px){  .carousel-container{ --perView:2; } }
@media (max-width:600px){  .carousel-container{ --perView:1; } }

/* ====== Track (scroll-snap grid) ====== */
.carousel-wrapper{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--gap) * (var(--perView) - 1)) / var(--perView));
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox hide */
}
.carousel-wrapper::-webkit-scrollbar{ display:none; } /* WebKit hide */

.carousel-item{ scroll-snap-align:start; }

/* ====== Card ====== */
.image-card{
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  background:#fff;
  display:flex;
  flex-direction:column;
  height:100%;
}
.image-card img{
  width:100%; height:auto;
  display:block;
  aspect-ratio: 4 / 3;            /* uniform tiles; change to 16/9 if you prefer */
  object-fit:cover;
}

/* Footer bar under each image */
.card-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#075b38;
  color:#fff;
  font-size:14px; line-height:1.35; font-weight:700;
}
.card-footer a{ color:#fff; text-decoration:none; word-break:break-word; }
.card-footer a:hover{ text-decoration:underline; }

/* ====== Arrows ====== */




/* ====== Dots ====== */
.carousel-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:10px;
}
.carousel-dots button{
  width:8px; height:8px; border-radius:50%;
  border:0; background:#cfd7dd; cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#075b38; }

    /* Container */
.officials-section{
  max-width:1360px;
  margin:0 auto;
  padding:24px 18px 0;
}

/* Green heading bar */
.header-bar{
  background:#02522d;
  color:#fff;
  text-align:center;
  padding:8px 12px;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.3;
  -webkit-text-fill-color:#fff;
  font-size:10px; /* responsive size */
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Slightly tighter on small phones */
@media (max-width:768px){
  .officials-section{ padding:20px 14px 0; }
  .header-bar{ padding:6px 10px; }
}

/* OPTIONAL: force single line + swipe (no scrollbar shown)
.header-bar{
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.header-bar::-webkit-scrollbar{ display:none; }
*/

    /* ===== Container ===== */
.sectionyt{

}
/* ===== Responsive wrapper ===== */
.wrap1{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 3.5vw, 32px) clamp(12px, 4vw, 28px);
  box-sizing: border-box;
  overflow-x: hidden;              /* prevent side scroll on mobile */
}
.wrap1 *, .wrap1 *::before, .wrap1 *::after{ box-sizing: inherit; }

/* Text scales nicely */
.wrap1 h1{ font-size: clamp(20px, 4.2vw, 34px); margin: 0 0 10px; }
.wrap1 h2{ font-size: clamp(18px, 3.6vw, 28px); margin: 0 0 8px; }
.wrap1 p { font-size: clamp(14px, 2.6vw, 16px); line-height: 1.7; }

/* Media fits container */
.wrap1 img, .wrap1 video, .wrap1 canvas, .wrap1 svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Long content won't break layout */
.wrap1{ word-break: break-word; }

/* Optional: grid helpers for inner layouts */
.wrap1 .row{
  display: grid;
  grid-template-columns: 1fr;      /* mobile: single column */
  gap: 16px;
}
@media (min-width: 600px){
  .wrap1 .row.two   { grid-template-columns: 1fr 1fr; }
  .wrap1 .row.three { grid-template-columns: repeat(3, 1fr); }
  .wrap1 .row       { gap: 18px; }
}
@media (min-width: 1024px){
  .wrap1 .row       { gap: 22px; }
}

/* Tables: make scrollable on small screens */
.wrap1 .table-scroll{ overflow-x: auto; }
.wrap1 .table-scroll table{ min-width: 600px; border-collapse: collapse; }


/* ===== Top: YouTube grid ===== */
.yt-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* desktop: 3 */
}

@media (max-width: 992px){
  .yt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* tablet: 2 */
}
@media (max-width: 640px){
  .yt-grid{ grid-template-columns: 1fr; gap:12px; } /* mobile: 1 */
}

.yt-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Responsive 16:9 frame */
.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 ===== */
.promo-row{
  display:grid;
  grid-template-columns: 1.2fr .8fr;  /* image larger */
  gap:16px;
  align-items:center;
  margin-top:18px;
}
@media (max-width: 768px){
  .promo-row{ grid-template-columns:1fr; gap:12px; }
}

.promo-img{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.promo-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;     /* consistent banner height */

}

.promo-text{
  background:#035332;
  color:#fff;
  border-radius:12px;
  padding:16px;
  text-align:center;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  text-wrap:balance;
}
/* hide <br class="small"> on desktop; show on mobile for nicer breaks */
.small{ display:none; }
@media (max-width: 640px){
  .promo-text{ padding:14px; }
  .small{ display:inline; }
}

    /* Wrapper: a little higher + mobile swipe */
.table-scroll{
  max-width:1200px;
  margin:-8px auto 0;                /* ⬆️ ekto upore uthlo */
  padding:0 12px;
  overflow-x:auto;                   /* mobile swipe */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* hide scrollbar (Firefox) */
}
.table-scroll::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit) */

/* Table base */
.table-scroll table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;                /* predictable column widths */
  min-width:780px;                   /* keeps columns readable; swipes on phones */
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}

/* Head */
.table-scroll thead th{
  background:#155c3b;
  color:#fff;
  text-align:left;
  padding:12px 10px;
  font-weight:700;
  font-size:clamp(13px,1.6vw,15px);
  position:sticky; top:0; z-index:1; /* sticky header on scroll */
}

/* Cells */
.table-scroll td{
  padding:10px;
  font-size:clamp(13px,1.6vw,15px);
  color:#111;
  vertical-align:top;
  border-bottom:1px solid #eef1f4;
  word-break:break-word;             /* long text wraps nicely */
}

/* Zebra rows */
.table-scroll tbody tr:nth-child(odd){ background:#fafcfd; }

/* Emphasis cells */
.table-scroll .phase{ font-weight:700; color:#155c3b; }
.table-scroll .subject{ font-weight:600; }

/* Tighten on very small phones */
@media (max-width:400px){
  .table-scroll{ margin:-6px auto 0; padding:0 10px; }
  .table-scroll thead th, .table-scroll td{ padding:8px 8px; }
}

    /* light push-down for both mobile & desktop */
/* Container */
.study-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px;
  font-family: Arial, sans-serif;
  color:#111;
}

/* Paragraphs */
.study-content p{
  margin: 0 0 12px;
  font-size: 21px;  /* scales nicely on phones */
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;               /* better mobile wrapping */
  overflow-wrap: anywhere;     /* prevent overflow on tiny screens */
}

/* Underlined section titles */
.study-content .uline{
  font-weight: 700;
  color: #155c3b;
  padding-bottom: 6px;
  position: relative;
  font-size: 15px;
}

.study-content .uline::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;                 /* underline length */
  height: 3px;

  border-radius: 2px;
}

/* Slightly tighter on small phones */
@media (max-width: 480px){
  .study-content{ padding: 10px 14px; }
  .study-content p{ line-height: 1.7; }
}

/* a little more room on larger screens (optional) */
@media (min-width: 768px){
  .rich-copy{ margin-top: -47px; }
}

    .rich-copy{
  font-family: Arial, sans-serif;
  color:#111;
  margin:0;
  line-height:1.75;
  font-size:clamp(14px, 1.9vw, 16px); /* scales nicely on phones */
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;               /* cleaner breaks on mobile */
  overflow-wrap:anywhere;     /* prevent overflow */
}

.rich-copy b{ color:#155c3b; }

/* Optional container if you want page padding */
.wrap-1360{ max-width:1360px; margin:0 auto; padding:16px 18px; }
@media (max-width:768px){ .wrap-1360{ padding:14px 14px; } }

    /* ============ Layout ============ */
.two-col{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:16px 12px;
}

.card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Keep both sides the same height */
.frame{
  position:relative;
  aspect-ratio: 16 / 9;   /* equal height for img & video */
  background:#f5f7fa;     /* subtle backdrop for portrait cert */
}

/* Certificate image */
/* Frame: portrait box so certificate nicely fits */
.frame{
  position: relative;
  aspect-ratio: 3 / 4;   /* portrait; change if needed */
  background: #f5f7fa;   /* light backdrop for empty space */
  overflow: hidden;
}

/* Certificate image: fully visible, centered */
.frame img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;        /* ✅ show full certificate (no crop) */
  object-position: center;    /* center it */
  display: block;
  margin: 0;                  /* remove negative offset */
}
/* Will fill the frame but may crop edges */
.frame img{
  object-fit: contain;      /* fill + crop */
  object-position: center;

}
/* ===== FAQ (responsive) ===== */
#faq.rv-reviews{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 36px) clamp(16px, 4vw, 28px);
  background: #f7faf9;
  border: 1px solid #e6efe9;
  border-radius: 14px;
  text-align: left;
}

#faq .rv-heading{
  margin: 0 0 12px;
  font-weight: 900;
  color:white;                    /* brand green */
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: .2px;
}

#faq p{
  margin: 0;
  color: #173042;
  font-size: clamp(14px, 2.6vw, 17px);
  line-height: 1.7;
}

/* Anchor scroll fix: if you click a link to #faq-section,
   keep the heading visible below a sticky header */
#faq-section{
  scroll-margin-top: var(--anchor-offset, 84px);
}

/* Mobile tweak */
@media (max-width: 600px){
  #faq.rv-reviews{
    border-radius: 10px;
    padding: 18px 16px;
  }
}


/* Responsive YouTube */
.frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

/* ============ Mobile ============ */
@media (max-width: 768px){
  .two-col{ grid-template-columns:1fr; gap:12px; padding:14px 12px; margin-top:  5px; }
}
.two-col .card:first-child .frame{ aspect-ratio: 3 / 4; } /* optional */

    /* Container (optional if wrapped elsewhere) */
#certificate{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 12px;
}

/* Responsive grid */
.certificate-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Card */
.certificate-item{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 10px;
  display: grid;
  place-items: center;
}

/* Uniform portrait frame */
.certificate-item img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;   /* portrait look */
  object-fit: contain;   /* show full certificate */
  display: block;
}

/* Tablet tweaks */
@media (max-width: 992px){
  .certificate-grid{ gap:14px; }
}

/* Phones */
@media (max-width: 640px){
  .certificate-grid{
    grid-template-columns: repeat(2, 1fr);  /* 2 per row on phones */
    gap:12px;
  }
}

/* Very small phones */
@media (max-width: 380px){
  .certificate-grid{ grid-template-columns: 1fr; } /* single column */
}

   /* shared container */
.wrap-1360{
  max-width:1360px;
  margin:0 auto;
  padding:24px 18px 0;
}

/* ribbon = same look as before */
.ribbon{
  background:#02522d;
  text-align:center;
  padding:8px 12px;          /* compact like before */
  border-radius:6px;
}
.ribbon h1{
  margin:0;
  font-weight:800;
  color:#fff; -webkit-text-fill-color:#fff;
  letter-spacing:.3px;
  line-height:1.3;
  font-size:clamp(18px, 2.2vw, 28px);  /* responsive, balanced */
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* text block (website-like) */
.why-copy{
  line-height:1.7;
  font-size:clamp(14px,1.9vw,16px);
  color:#111;
  font-family:Arial, sans-serif;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  margin:20px 0 0;
}

/* small screens: a bit tighter */
@media (max-width:768px){
  .wrap-1360{ padding:20px 14px 0; }
  .ribbon{ padding:6px 10px; }
}

/* Responsive green ribbon */
.ribbon{
  background:#02522d;          /* same green as your bar */
  text-align:center;
  padding:10px 14px;           /* comfy on desktop */
  border-radius:6px;
}

/* Title inside the ribbon */
.ribbon h1{
  margin:0;
  font-weight:800;
  color:#fff;
  -webkit-text-fill-color:#fff;
  line-height:1.3;
  letter-spacing:.3px;
  font-size:clamp(18px, 2.2vw, 28px);  /* scales for mobile/desktop */
  text-wrap:balance;                    /* prettier line breaks */
  overflow-wrap:anywhere;               /* no overflow on tiny phones */
}

/* Tighter padding on small screens */
@media (max-width: 768px){
  .ribbon{ padding:8px 12px; }
}
@media (max-width: 400px){
  .ribbon{ padding:6px 10px; }
}
/* Base styles for all screen sizes */
.ribbon h1 {
  font-size: 24px; /* A good starting font size */
  text-align: center;
}

/* Media query for screens smaller than 768px (common breakpoint for tablets/mobile) */
@media (max-width: 767px) {
  section {
    padding: 12px 10px 0; /* Reduce padding for smaller screens */
    margin-top: 20px;
  }

  .ribbon h1 {
    font-size: 18px; /* Make the font size smaller on mobile */
    /* You can add more styles here, like line-height, to improve readability */
  }
}
.section-title{ margin:0; font-weight:800; color:#fff; line-height:1.3; letter-spacing:.3px; font-size:24px; }

    /* same container look as your Admission Procedure bar */
.heading-bar{
  max-width:2000px;
  margin:0 auto;
  padding:0 7px;
}
.heading-bar{
  background:#02522d;
  text-align:center;
  padding:7px;
  border-radius:6px;
}
.heading-bar1{
  max-width:2000px;
  margin:0 auto;
  padding:0 8px;
}
.heading-bar1{
  background:#02522d;
  text-align:center;
  padding:12px;
  border-radius:6px;
}
/* title styling (matches your section-title behavior) */
.heading-title{
  margin:0;
  font-weight:800;
  color:#f9f7f7;
  -webkit-text-fill-color:rgb(20, 20, 20)a0a;
  letter-spacing:.3px;
  line-height:1.3;
  font-size:11px;
}

    /* Ribbon: same look on all screens */
.ribbon{
  background:#155c3b;
  color:#fff;
  margin:24px auto 18px;
  padding:10px 7px;
  border-radius:999px;    /* pill */
  width:fit-content;      /* shrink to content */
  max-width:100%;
  text-align:center;
  overflow-x:auto;        /* allow swipe on tiny phones */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;   /* hide scrollbar (Firefox) */
}
.ribbon::-webkit-scrollbar{ display:none; } /* hide scrollbar (WebKit) */

.ribbon h1{
  margin:0;
  font-family:Oswald, sans-serif;
  font-weight:800;
  font-size:28px;         /* same size on mobile & desktop */
  line-height:1.25;
  letter-spacing:.3px;
  white-space:nowrap;     /* keep one line */
  -webkit-text-fill-color:#fff;
}

    /* Wrapper */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}

/* Responsive grid */
.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}

/* Card */
.doc-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Clickable area */
.doc-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Figure frame */
.doc-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;           /* document-like portrait */
  background:linear-gradient(180deg,#f7f9fb,#eef3f7);
  overflow:hidden;
}

/* Image */
.doc-frame img{
  width:100%;
  height:100%;
  object-fit:cover;           /* fill nicely; use 'contain' if you prefer full page inside */
  display:block;
  transition:transform .25s ease;
}

/* Hover / focus effect */
.doc-card:hover img,
.doc-link:focus img{ transform:scale(1.02); }

.doc-link:focus-visible{
  outline:2px solid #155c3b;
  outline-offset:4px;
  border-radius:10px;
}

/* Optional watermark via data-watermark */
.doc-frame.watermark::after{
  content:attr(data-watermark);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:700 26px/1.1 system-ui, sans-serif;
  color:#155c3b;
  opacity:.08;
  transform:rotate(-18deg);
  pointer-events:none;
}

/* Tighter on tablets */
@media (max-width: 992px){
  .wrap{ padding:18px 14px; }
  .doc-grid{ gap:16px; }
}

/* Phones: single column, comfy padding */
@media (max-width: 640px){
  .wrap{ padding:16px 12px; }
  .doc-grid{
    grid-template-columns:1fr;   /* mobile = single column */
    gap:14px;
  }
  .doc-frame{ aspect-ratio: 3/4; }
}

/* Very small phones */
@media (max-width: 380px){
  .doc-frame.watermark::after{ font-size:22px; }
}
/* Row-wise list (desktop + mobile: 1 item per row) */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px 16px;
}

.doc-grid{
  display:grid;
  grid-template-columns: 1fr;   /* ✅ row-wise: single column */
  gap:16px;
}

.doc-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.section-title{
  margin:0;
  font-weight:800;
  color:#fff;
  -webkit-text-fill-color:#fff;
  letter-spacing:.3px;
  line-height:1.3;
  text-align:center;
  padding:8px 12px;

  /* desktop = same size as site */
  font-size:28px;
}

/* phones: keep one line, allow swipe, hide scrollbar */
@media (max-width: 768px){
  .section-title{
    font-size:28px;               /* same size on mobile */
    white-space:nowrap;           /* single line */
    overflow-x:auto;              /* swipe horizontally if needed */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;   
        /* Firefox hide */
  }
  .section-title::-webkit-scrollbar{ display:none; } /* Chrome/Safari hide */
}

/* OPTIONAL: if instead you want auto-wrap (no swipe), comment the block above
   and use this smaller mobile size:
@media (max-width: 768px){
  .section-title{ font-size:22px; white-space:normal; overflow-x:visible; }
}
*/

.doc-frame{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  background:#f5f7fa;
}
.doc-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Narrower container */
.wrap{
  max-width: 1000px;   /* choto width */
  margin: 0 auto;
  padding: 16px 12px;
}

/* Column layout */
.doc-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;            /* mobile: 1 column */
}

/* Tablet: 2 columns */
@media (min-width: 600px){
  .doc-grid{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

/* Desktop: 3 columns */
@media (min-width: 1100px){
  .doc-grid{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

/* Cards (optional polish) */
.doc-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  overflow:hidden;
}

.doc-frame{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  background:#f5f7fa;
}
.doc-frame img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Container: full or comfy width (choose one) */
.wrap{
  /* Option 1: full width */
  max-width: 100%;
  /* Option 2: fixed comfy width (uncomment if you want) */
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 20px 16px;
}

/* GRID: no empty columns, no big white gap */
.doc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* ✅ auto-fit collapses empties */
  gap: 16px;
  grid-auto-flow: dense;      /* fill holes between rows */
  align-items: stretch;
}

/* Card + image */
.doc-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); height:100%; }
.doc-frame{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#f5f7fa; }
.doc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Phones: single column */
@media (max-width: 640px){
  .doc-grid{ grid-template-columns: 1fr; }
}
/* Container */
.wrap{
  max-width: 1280px;    /* 4 column comfortably fits */
  margin: 0 auto;
  padding: 16px 12px;
}

/* Grid: default 1 col */
.doc-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;                 /* mobile: 1 */
}

/* ≥600px: 2 cols */
@media (min-width: 600px){
  .doc-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

/* ≥900px: 3 cols */
@media (min-width: 900px){
  .doc-grid{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}

/* ≥1200px: 4 cols ✅ */
@media (min-width: 1200px){
  .doc-grid{ grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}

/* Card + image (same as before) */
.doc-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.doc-frame{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#f5f7fa; }
.doc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

    .fees-section{
  max-width:1360px;
  margin:20px auto;
  padding:0 18px;
  font-family: Arial, sans-serif;
  color:#111;
}

.fees-copy{
  line-height:1.7;
  font-size:clamp(14px, 1.9vw, 16px); /* desktop→mobile scale */
  text-align:justify;                 /* website-like */
  text-justify:inter-word;            /* better spacing when justified */
  hyphens:auto;                       /* allow soft hyphenation on mobile */
  overflow-wrap:anywhere;             /* prevent overflow on tiny screens */
}

.fees-copy strong{ color:#155c3b; }

/* Tablet */
@media (max-width: 768px){
  .fees-section{ padding:0 14px; }
  .fees-copy{ line-height:1.75; }
}

/* Small phones */
@media (max-width: 400px){
  .fees-section{ padding:0 12px; }
  .fees-copy{ font-size:15px; }
}

    /* Top green ribbon (responsive) */
.ribbon{
  background: var(--green, #155c3b);
  color:#fff;
  margin:24px auto 18px;
  padding:10px 16px;
  border-radius:999px;          /* pill look */
  width: fit-content;           /* shrink to content */
  max-width: min(100%, 720px);  /* don't overflow */
  text-align:center;
}

.ribbon h1{
  margin:0;
  letter-spacing:.3px;
  font-family: Oswald, sans-serif;
  font-weight:800;
  font-size: clamp(18px, 4.2vw, 28px); /* scales on mobile */
  line-height:1.25;
  overflow-wrap:anywhere;       /* prevent overflow on tiny phones */
  text-wrap: balance;           /* nicer line breaks (modern browsers) */
}

/* Tablet */
@media (max-width: 768px){
  .ribbon{ padding:10px 14px; }
}

/* Small phones: make it feel wider without breaking layout */
@media (max-width: 480px){
  .ribbon{
    width:92%;                  /* nearly full width on small screens */
    border-radius:10px;         /* softer */
  }
  .ribbon h1{
    font-size: clamp(16px, 5.4vw, 22px);
  }
}

    .section-title{
  margin:0;
  font-weight:800;
  font-size:40px; /* responsive size */
  line-height:1.3;
  letter-spacing:.3px;
  color:#fff;
  -webkit-text-fill-color:#fff;

  text-align:center;        /* desktop + mobile */
  padding:8px 12px;         /* mobile breathing room */
  max-width:100%;
  overflow-wrap:anywhere;   /* prevent overflow */
  text-wrap:balance;        /* nicer line breaks (modern browsers) */
}

/* Small tablets/phones */
@media (max-width:768px){
  .section-title{ font-size:clamp(17px, 4vw, 24px); padding:6px 10px; }
}

/* Very small phones */
@media (max-width:400px){
  .section-title{ font-size:15px; letter-spacing:.2px; }
}

    .steps {
  max-width: 900px;         /* center block on large screens */
  margin: 0 auto;
  padding: 20px;
  background: #fff;         /* optional white background */
  border-radius: 8px;       /* smooth card look */
}

.steps p {
  margin: 0 0 12px;
  font-size: clamp(14px, 2vw, 16px); /* responsive font */
  line-height: 1.6;
  color: #222;
  position: relative;
  padding-left: 8px;
}

.steps b {
  color: #155c3b;           /* highlight steps in green */
}

/* Tablet */
@media (max-width: 768px) {
  .steps {
    padding: 16px;
  }
  .steps p {
    font-size: 15px;
    margin-bottom: 10px;
  }
}

/* Mobile */
@media (max-width: 500px) {
  .steps {
    padding: 12px;
  }
  .steps p {
    font-size: 14px;
    line-height: 1.5;
  }
}

    /* Base title */
.section-title{
  margin:0;
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 28px); /* auto scales */
  line-height:1.3;
  letter-spacing:.3px;
  color:#fff;
  -webkit-text-fill-color:#fff;

  /* Mobile-resilience */
  text-align:center;           /* center on all screens */
  max-width: 100%;
  overflow-wrap:anywhere;      /* prevent overflow on tiny screens */
  word-break:normal;
  hyphens:auto;
  text-wrap:balance;           /* nicer line breaks (supported modern browsers) */
  padding:8px 12px;            /* breathing room on mobiles */
}

/* Optional: if the title sits on dark green bar, keep spacing tight */
@media (min-width: 768px){
  .section-title{ padding:10px 16px; }
}

/* Very small phones: slightly tighter */
@media (max-width:360px){
  .section-title{
    font-size:clamp(16px, 5.2vw, 22px);
    letter-spacing:.2px;
  }
}

/* Remove default page gap so header full-width dikhe */
html, body { margin: 0; }

/* Full-bleed green bar */
.top-header{
  background:#155c3b;
  color:#fff;
  padding:10px 0;
  opacity:1;
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  width:100vw;
  z-index: 5;
  overflow-x:hidden;  /* parent pe overflow band */
}

/* Inner wrapper (centers content on large screens) */
.header-content{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Text + phone in one line */
.header-left{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  white-space:nowrap;
  flex-wrap:nowrap;
  min-height:40px;
}

/* Message */
.header-left span{
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.2;
  font-size:15px;
}

/* Phone */
.header-left a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  line-height:1.2;
  font-size:15px;
}

/* Tablet tweaks */
@media (max-width: 768px){
  .top-header{ padding:10px 0; }
  .header-content{ padding:0 12px; }
  .header-left{ gap:10px; }
}

/* Very small phones — force scroll without showing bar */
@media (max-width: 480px){
  .header-content{
    overflow-x:auto;               /* swipe enable */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;          /* Firefox hide */
  }
  .header-content::-webkit-scrollbar{
    display:none;                  /* Chrome/Safari hide */
  }

  .header-left{
    display:inline-flex;           /* ek hi line */
    width:max-content;             /* apne content ke hisaab se width */
  }
}
/* Container width + padding */
.wrap-1360{
  max-width:1360px;
  margin:0 auto;
  padding:20px 18px;
}



/* Slightly tighter on phones */
@media (max-width: 768px){
  .wrap-1360{ padding:16px 14px; }
}

@media (max-width: 400px){
  .wrap-1360{ padding:14px 12px; }
  .rich-copy{ font-size: 15px;  margin-top: -47px;}
}

.benefits{
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 7px;
  background:#fff;       /* optional background */
  border-radius:8px;     /* optional rounded look */
}

.benefits ul{
  list-style:disc inside;    /* bullets neatly inside */
  margin:0;
  padding:0;
}

.benefits li{
  margin-bottom:12px;
  font-size:clamp(14px, 2vw, 16px);  /* responsive font size */
  line-height:1.5;
  color:#222;
}

.benefits b{
  color:#155c3b;   /* highlight keywords in green */
}

/* Tablet */
@media (max-width: 768px){
  .benefits{ padding:14px 16px; }
  .benefits li{ font-size:15px; }
}

/* Mobile phones */
@media (max-width: 480px){
  .benefits{ padding:12px 14px; }
  .benefits li{
    font-size:14px;
    line-height:1.6;
    margin-bottom:10px;
  }
}
.section-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px); /* responsive scaling */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #fff;
  -webkit-text-fill-color: #fff;

  text-indent: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  mix-blend-mode: normal;

  text-align: center;        /* mobile & desktop me center */
  max-width: 100%;
  padding: 8px 12px;         /* mobile ke liye breathing space */
  overflow-wrap: anywhere;   /* break if needed */
  text-wrap: balance;        /* modern balanced wrapping */
}


@media (max-width: 768px){
  .section-title {
    font-size: 10px;
    padding: 0px 0px;
  }
}

/* Very small phones */
@media (max-width: 400px){
  .section-title{
    font-size: 21px;
    letter-spacing: .2px;

    /* wrap allow */
    white-space: normal;
    overflow-wrap: anywhere;   /* long word/URL হলেও ভাঙবে */
    word-break: break-word;

    /* সর্বোচ্চ ২ লাইনে সীমাবদ্ধ */
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* 2-line clamp */
    overflow: hidden;          /* 2 লাইনের বাইরে কাটবে */
  }
}

/* Wrapper grid */
.elig-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Left list */
.elig-list ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.elig-list li {
  margin-bottom: 12px;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
  color: #222;
}

.elig-list b {
  color: #155c3b; /* highlight */
}

/* Right image */
.elig-visual figure {
  margin: 0;
}

.elig-visual img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Tablet */
@media (max-width: 992px) {
  .elig-wrap {
    gap: 20px;
    padding: 20px 16px;
  }
}
.heading-wrap {
  /* Change this value to whatever you need */
  padding: 0px !important;
}
/* Mobile */
@media (max-width: 768px) {
  .elig-wrap {
    grid-template-columns: 1fr; /* stack */
    text-align: center;
  }
  .elig-list ul {
    text-align: left;
    display: inline-block; /* keep bullets neat */
  }
  .elig-visual {
    order: -1; /* image upar aa jaye, optional */
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .elig-list li {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.row-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  max-width:1200px;
  margin:0 auto;
  padding:12px;
}

.card-box{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.card-box a{ display:block; }

/* Uniform thumbnail frames */
.card-box img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 4 / 3;      /* consistent tile shape */
  object-fit: cover;        /* fill nicely (may crop a bit) */
}

/* Tablet */
@media (max-width: 900px){
  .row-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px){
  .row-grid{ grid-template-columns: 1fr; }
  .row-grid{ padding:10px; gap:10px; }
}


 .section-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px);  /* responsive size */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #fff;
  -webkit-text-fill-color: #fff;

  text-align: center;          /* center for all screens */
  padding: 8px 12px;
  text-wrap: balance;          /* balanced line breaks (modern browsers) */
  overflow-wrap: anywhere;     /* prevent cut text */
}

/* Tablet */
@media (max-width: 768px) {
  .section-title {
    font-size: 10px;
    padding: 0px 0px;
  }
}

/* base: এক লাইনের ellipsis যেন না থাকে */
.section-title{
  display:block;
  max-width:100%;
  white-space: normal !important;   /* nowrap override */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 1) base: এক লাইনের ellipsis/nowrap জোর করে অফ করুন */
.section-title{
  display:block;
  max-width:100%;
  white-space: normal !important;  /* nowrap override */
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip !important;  /* single-line ellipsis থাকলে কেটে দিন */
}

/* 2) mobile: ২ লাইনে ক্ল্যাম্প করুন (webkit) */
@media (max-width: 400px){
  .section-title{
    font-size:17px;
    letter-spacing:.2px;

    line-height:1.25;
    display:-webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* সর্বোচ্চ ২ লাইন */
    overflow:hidden;         /* ২ লাইনের পর লুকাবে */
  }

  /* parent যদি flex হয়, wrap কাজের জন্য এটা সহায়ক */
  .section-title, .section-title * { min-width:0; }
}




  .section-heading {
  margin: 0;
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px); /* responsive size */
  line-height: 1.3;
  letter-spacing: .3px;
  color: #090909;

  text-align: center;         /* center for all screens */
  padding: 8px 12px;
  text-wrap: balance;         /* balanced line breaks */
  overflow-wrap: anywhere;    /* prevent overflow */
}

/* Tablet */
@media (max-width: 768px) {
  .section-heading {
    font-size: 10px;
    padding: 6px 10px;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .section-heading {
    font-size: clamp(16px, 4.5vw, 20px);
    letter-spacing: .2px;
  }
}