/* মোবাইল এবং ছোট স্ক্রিনের জন্য প্রিসাইজ ভার্টিক্যাল লেআউট */
@media screen and (max-width: 768px) {
  
  /* প্যারেন্ট কন্টেইনারকে জোরপূর্বক সিঙ্গেল কলাম ভার্টিক্যাল গ্রিডে রূপান্তর */
  .edu-subcards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important; 
    grid-template-rows: auto !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* প্রতিটি কার্ডের হাইট অটো করা হলো যেন ভেতরের টেক্সট অনুযায়ী হাইট বাড়ে এবং ওভারল্যাপ না হয় */
  .edu-subcard {
    width: 100% !important;
    height: auto !important; 
    min-height: min-content !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* ভেতরের উপাদান বাইরে ছিটকে যাওয়া রোধ করতে */
  }

  /* ম্যাথ ইকুয়েশন যেন কার্ডের বর্ডার ভেঙে বাইরে না যায় */
  .edu-math-example {
    width: 100% !important;
    white-space: nowrap !important;
    overflow-x: auto !important; /* ইকুয়েশন বড় হলে কার্ডের ভেতরেই স্ক্রল হবে, লেআউট ভাঙবে না */
    font-size: 1.2rem !important;
    margin: 10px 0 !important;
  }

  /* প্যারাগ্রাফের টেক্সট র‍্যাপ নিশ্চিত করা */
  .edu-subcard p {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
  }
}

/* Base styles for desktop / large screens */
.heading-section {
  font-size: 1.65rem; 
  color: #000000; 
  font-weight: 800; 
  margin: 0;
}

/* Tablets and small laptops (max-width: 768px) */
@media screen and (max-width: 768px) {
  .heading-section {
    font-size: 1.45rem;
  }
}

/* Mobile devices in landscape and larger phones (max-width: 576px) */
@media screen and (max-width: 576px) {
  .heading-section {
    font-size: 1.25rem;
  }
}

/* Small mobile devices (max-width: 375px) */
@media screen and (max-width: 375px) {
  .heading-section {
    font-size: 1.1rem;
  }
}