/* -------- Always Two Column Layout -------- */
.two-col-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* সবসময় ২ কলাম */
  gap: 20px;
  margin-top: 20px;
}

.two-col-item {
  display: flex;
  align-items: stretch;
}

.two-col-item .left {
  flex: 0 0 100px; /* ইমেজ ছোট */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.two-col-item .left img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 4px;
}

.two-col-item .title {
  font-size: 14px; /* টাইটেল ছোট */
  font-weight: bold;
  margin-top: 6px;
  text-align: center;
}

.two-col-item .desc {
  flex: 1; /* ডান দিক বড় জায়গা নেবে */
  padding-left: 20px;
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: center;
  line-height: 1.5;
}

/* মোবাইলেও ২টা পাশাপাশি থাকবে */
@media (max-width: 767px) {
  .two-col-section {
    grid-template-columns: 1fr 1fr;
  }
}

:root {
  --green-bg: #e9f5e9; /* variable name ঠিকভাবে */
  --grey-text:#2b2b2b;
  --green-text:#139E13;
  
  
  
}

* { margin:0; padding:0; box-sizing:border-box; }
body, html { font-family: Arial, sans-serif; }

/* Header wrapper */
.header-wrapper {
  width:100%;
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:999;
  background:#f8f9fb;
}

/* Header */
.header-inner {
  display:flex;
  flex-direction: column;
  border-bottom: 4px solid #004d00;
}
.header-upper { display:flex; align-items:center; padding:15px; }
.logo { flex:0 0 110px; height:110px; background:white; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:15px; overflow:hidden; }
.logo img { width:100%; height:100%; object-fit:cover; }
.header-text { font-weight:500; display:flex; flex-direction: column; justify-content:center; }
.header-text p:first-child { font-size:45px!important; margin-bottom: 10px; line-height: 1.1; color:#2e7d3c; }
.header-text p:last-child { font-size:14px!important; line-height:2.2; color:#8C8C8C; }
.header-lower { padding:5px 5px; }
.menu-btn {
    width: 60px;
    height: 40px;
    background: none;
    border: none;
    color: #006400;
    box-shadow: 0 0 0 1px #d6d6d6;
    font-size: 28px;
    border-radius: 8px;   
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.menu-btn:hover {
    background: none;
    border-radius: 8px;
    box-shadow: 0 0 0 4px #000;
}
.menu-list { display:none; text-decoration:none; flex-direction: column; }
.menu-list a,
.menu-list a:hover,
.menu-list a:focus,
.menu-list a:active {
    padding: 8px 15px 10px 20px;
    text-decoration: none;
    color: #006400;
}
.menu-list a:hover { background:#f1f1f1; }

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px;
}

   
   
   
   
   /* -------- Left / Notice Section -------- */

.notice-section {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  max-height: 500px;
  overflow: hidden;
  box-sizing: border-box;
  color: green !important;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 12px;
}

.notice-header a {
  text-decoration: none;
  font-size: 14px;
  color: #007B55;
  font-weight: 500;
}

.notice-header a:hover {
  color: #004d00;
}

.notice-list {
  max-height: 430px;
  overflow: hidden;
  position: relative;
}

.notice-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  animation: scrollNotice 25s linear infinite;
}

@keyframes scrollNotice {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.notice-list li {
  background: #e9f5e9; /* subtle green */
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.notice-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

.notice-list li a {
  text-decoration: none;
  color: #006400;
  font-size: 15px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.notice-list li a:hover {
  color: #004d00;
}

.notice-date {
  display: flex;
  align-items: center; /* vertical center icon & text */
  font-size: 13px;
  color: #555;
  margin-top: 2px;
}

.notice-date .date-icon {
  margin-right: 6px;
  font-size: 14px;
}

.notice-list li + li {
  border-top: 1px solid #b2d8b2; /* horizontal line between notices */
}

/* Responsive */
@media(max-width: 767px){
  .notice-section {
    max-height: 300px;
    padding: 10px;
  }
  .notice-header {
    font-size: 14px;
  }
  .notice-list li {
    font-size: 13px;
    padding: 8px 10px;
  }
}

   
   
   
   
   



/* -------- Right Section -------- */
.right img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  display: block;
}



.right  {
  margin-bottom: 15px;
  font-size: 14px;
}

.right p {
    color: #696969;
    font-size: 10px!important;
}


.right p.heading {
  margin-bottom: 8px;
  margin-top: 30px;
  font-size: 20px!important;
  font-weight: normal;
  color: #006400;
}

.right .number-list {
  margin: 0 0 15px 25px;
  padding: 0;
  font-size: 10px;
  color: #333;
}

.right .number-list li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Mobile */
@media(max-width:767px){
  .header-upper { padding:10px; }
  .header-lower { padding:10px; }
  .logo { flex:0 0 80px; height:80px; }
  .header-text p:first-child { font-size:35px; }
  .header-text p:last-child { font-size:18px; line-height:2.5; }
}

/* -------- Desktop View -------- */
 

@media (min-width: 768px) {
.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 135px;
  }
  
  .main-bottom-section {
    margin: 0 135px;
}
  .right {
    max-width: 800px;
  }
  
  .notice-list {
  max-height: 500px!important;
  
}
  .menu-btn {
    display: none !important;
  }

  /* Show menu items horizontally */
  .menu-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    background: none;
    padding: 0 30px;
  }

  .menu-list a {
    padding: 10px 0;
    color: #006400;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .menu-list a:hover {
    color: #004d00;
    background: none !important;
  }

  /* Adjust lower header alignment */
  .header-lower {
    padding: 10px 30px;
  }
}












.main-bottom-section {
  
  padding: 15px;
  box-sizing: border-box;
}

/* Heading part */
.main-bottom-section .section-heading {
  background: #e0f2e0; /* ইচ্ছামতো heading color */
  color: #00a000;
  padding: 15px;
  text-align: left;
  font-size: 20px;
  font-weight: normal;
}

/* Body part */
.main-bottom-section .section-body {
  background: #00a000; /* ইচ্ছামতো body color */
  padding: 20px 15px;
  font-size: 10px;
  color:#fff;
  margin: 0 auto;
  box-sizing: border-box;
}


/* Custom Table Style */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 6px;
  overflow: hidden;
}

.custom-table th {
  background: #e0f2e0;   /* heading bg */
  color: #006400;
  text-align: left;
  padding: 10px;
  font-weight: bold;
  font-size: 15px;
}

.custom-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  color: #333;
}

.custom-table tr:last-child td {
  border-bottom: none;  /* শেষ row তে border থাকবে না */
}

.custom-table tr:hover {
  background: #f9f9f9; /* hover effect */
}

/* Mobile Responsive */
@media(max-width: 600px) {
  .custom-table thead {
    display: none; /* ছোট স্ক্রিনে heading hide */
  }
  .custom-table tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
  }
  .custom-table td {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
  }
  .custom-table td:last-child {
    border-bottom: none;
  }
  .custom-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #006400;
  }
}



.custom-table td a {
  
  color: #006400;          /* ডিফল্ট সবুজ */
  font-weight: 500;
}

.custom-table td a:hover {
  color: #004d00;          /* hover এ গাঢ় সবুজ */
    /* underline আসবে না */
}
  

/* Mobile Responsive */
@media(max-width: 600px) {
  .custom-table thead {
    display: none;
  }
  .custom-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }
  .custom-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
  }
  .custom-table td:last-child {
    border-bottom: none;
  }
  .custom-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #006400;
  }
}





.footer-section ul li { margin: 6px 0; }
.footer-section ul li a {
  text-decoration: none;
  color: gray;
  font-size: 14px;
  font-weight: 400;
}


/* Desktop Footer */
@media(min-width: 768px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 40px 80px;
  }
  .footer-left,
  .footer-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .footer-left { padding-right: 40px; }
  .footer-right span {
    font-size: 22px;
    color: #00DE00;
    font-weight: 500;
    margin-bottom: 12px;
  }
  .footer-section ul li a {
    font-size: 15px;
    color: #555;
  }
}

























/* Slideshow */
.slideshow-wrapper {
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;
  /*border-bottom:4px solid #004d00;*/
}
.slide { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition: opacity 1s ease-in-out; }
.slide.active { opacity:1; z-index:1; }
.slide img { width:100%; height:100%; object-fit:cover; display:block; }






.item-section {
  display: grid;
  grid-template-columns: 1fr; /* mobile: এক কলাম */
  gap: 20px;
  max-width: 800px;
  margin: 40px auto;
  padding: 0 10px;
}

@media(min-width: 768px) {
  .item-section {
    grid-template-columns: 1fr 1fr; /* desktop: ২টা কলাম */
  }
}






.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.item-card:hover {
  transform: translateY(-5px);
}



.item-title {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 6px 12px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
}



.item-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* উপরের content + read-more নিচে */
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
  background: #AD723B;
  transition: transform 0.3s ease;
  padding: 12px; /* এখানে চারপাশে space দিলাম */
  margin: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.item-image {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.read-more {
  display: block;
  padding: 10px 12px;       /* লিংকের ভিতরের padding */
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  border-top: 2px solid #fff; /* উপরের white line */
  margin-top: 8px;           /* line এবং content-এর মধ্যে gap */
}



/* Mobile: rectangle look */
@media(max-width: 767px) {
  .item-image {
   /* height: 150px;  rectangle style for mobile */
  }
}







/* Green Section */
.green-section {
  background: var(--green-bg) !important;
  color:#4b4d4b;
  text-align:left;
  max-width:700px;
  padding:50px 10px 30px 10px;
  margin:5px;
  box-sizing:border-box;
}
.green-section span { font-size:23px; color:#000; font-weight:500; display:block; margin-bottom:15px; }
.green-section p { font-size:15px; line-height:1.8; margin-bottom:15px; }

/* White inner section inside green section */
.white-inner-section {
  background:#fff;
  padding:20px;
  margin:20px 0;
  border-radius:5px;
  text-align:left;
}

@media (min-width:500px){
    .green-section {
        margin: 0 auto;
    }
}

/* Desktop-specific margin */
@media(min-width: 1024px){
  
   .green-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    margin: 5px 80px;
  }

  .green-section > p,
  .green-section > span {
    flex: 2;
  }

  .green-section > div.white-inner-section {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin: 0; /* remove extra margin */
  }
  
  
  
  
  
  
  
  
}

/* Mobile */
@media(max-width:767px){
  .header-upper { padding:10px; }
  .header-lower { padding:10px; }
  .logo { flex:0 0 80px; height:80px; }
  .header-text p:first-child { font-size:35px; }
  .header-text p:last-child { font-size:18px; line-height:2.5; }
}


/* Footer */
.footer {
    border-top: 4px solid #004d00; /* green border */
    margin-top: 100px!important;
  background: var(--green-bg);
  color: #000;
  display: flex;
  flex-direction: column; /* mobile: vertical layout */
  align-items: flex-start; /* mobile: সব left-aligned */
  padding: 20px 15px;
  gap: 20px;
}

.footer-logo img {
  width: 120px;
  height: auto;
  object-fit: contain;
}

.footer-section .header-text {
    margin: 12px 0;
    font-weight: bold;
    font-size:16px;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin: 6px 0;
}

.footer-section ul li a {
  text-decoration: none;
  color: gray;   /* নিচের লিঙ্কগুলো gray */
  font-size: 14px;
  font-weight: 400;
}

.footer-section ul li a:hover {
  color: #006400;
}

.footer-section p {
    margin: 5px 0;
    font-size: 13px;
    color: var(--grey-text);
}

.footer .footer-section .uttam {
    font-size: 14px!important;
  line-height: 1.5;
}



/* Desktop View */
@media(min-width: 768px) {
  .footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 40px 80px;
  }

  .footer-left,
  .footer-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .footer-left { padding-right: 40px; }

  .footer-right span {
    font-size: 22px;   /* Information বড় */
    color: #00DE00;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .footer-section ul li a {
    font-size: 15px;   /* লিঙ্কগুলো ছোট */
    color: #555;       /* ধূসর রঙ */
  }
}
/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid #ccc;   /* Gray horizontal line */
  background: var(--green-bg);          /* হালকা ব্যাকগ্রাউন্ড */
  text-align: center;
  padding: 10px 5px;
}

.footer-bottom p {
  margin: 6px 0;
  font-size: 12px;
  color: #555;
}


 
/* ✅ Green Section Layout */
.green-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 40px auto;
  box-sizing: border-box;
}

/* 🟩 বাম দিক (Intro) */
.green-left {
  flex: 0 0 60%; /* 60% width fix for PC */
  max-width: 700px;
}

.green-left span {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: #004d00;
  margin-bottom: 10px;
}

.green-left p {
  line-height: 1.6;
  color: #333;
  white-space: pre-line;
}

/* 🟩 ডান দিক (Notice Section) */
.green-right {
  flex: 0 0 35%; /* 35% width fix */
  max-width: 400px;
}

/* Notice box look */
.notice-box {
  border: 1px solid #d0d0d0;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
}

/* 🔸 Responsive (Tablet & Mobile) */
@media (max-width: 900px) {
  .green-section {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }

  .green-left,
  .green-right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .green-right {
    margin-top: 20px;
  }
}