* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Serif Bengali', serif;
    line-height: 1.4;   /* লাইন হাইট কমানো */
  }
  
  body {
    background: #f5f5f5;
    font-size: 16px;    /* ফন্ট সাইজ চাইলে ঠিক করা যাবে */
  }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #217F7C; /* সুন্দর নীল-কালো গ্র্যাডিয়েন্ট */
      color: white;
      padding: 10px 20px;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    
    .menu-icon i,
    .login-icon i {
      font-size: 22px;
      cursor: pointer;
      color: white;
    }
    
  
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left; /* হেডলাইন ও সাবটাইটেল বাম থেকে শুরু হবে */
  }
  
  .logo img {
      width: 50px;
      height: 50px;
      object-fit: contain; /* পুরো লোগো দেখা যাবে, কোন অংশ কাটা যাবে না */
      border-radius: 50%;  /* রাউন্ড করার জন্য */
      flex-shrink: 0;      /* ছবিটি ছোট হবে না */
  }
  
  .logo .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  .logo .text h1 {
      font-size: 25px;              /* সামান্য বড় করা হলো */
      font-weight: 700;             /* bold ক্যালিগ্রাফি */
      line-height: 1.4;
      font-family: 'Amiri', serif;  /* আরবি ক্যালিগ্রাফি ফন্ট */
      margin: 0;
  }
  
  
  .logo .text p {
    font-size: 18px;
    margin: 3px 0 0 0;
    font-family: 'Noto Serif Bengali', serif; /* সুন্দর বাংলা ক্যালিগ্রাফি */
    font-weight: 700; /* একটু গাঢ় হলে বেশি ক্যালিগ্রাফিক লাগবে */
  }
  
  
  /* মোবাইল ভিউ */
  @media (max-width: 600px) {
      .logo img {
          width: 35px;
          height: 35px;
      }
  
      .logo .text h1 {
          font-size: 10px;
          font-family: 'Amiri', serif;  /* আরবি ক্যালিগ্রাফি ফন্ট */
      }
  
      .logo .text p {
        font-size: 7px;
        font-family: 'Noto Serif Bengali', serif;
    }
  }
  
   
     
  /* 📌 content-section কে মাঝখানে আনার জন্য CSS */
  .content-center {
      padding: 20px;
      display: flex;
      justify-content: center; /* horizontally center */
      align-items: center;     /* vertically center */
      text-align: center;      /* center text content */
      flex-direction: column;  /* একাধিক আইটেম উপরে নিচে রাখতে */
    }
    
    @media (max-width: 480px) {
      /* মূল div এর প্যাডিং ও ম্যাক্স-উইথ কমিয়ে দেওয়া */
      div[style*="max-width: 500px"] {
        max-width: 100% !important;
        padding: 12px !important;
        box-shadow: none !important;
        border-radius: 6px !important;
      }
    
      /* ইনপুট, সিলেক্ট বক্সের প্যাডিং ও ফন্ট সাইজ ছোট করা */
      input#studentId,
      select#studentClass,
      select#examType {
        padding: 6px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
      }
    
      /* বাটনের প্যাডিং ও ফন্ট সাইজ ছোট করা */
      button {
        padding: 8px !important;
        font-size: 14px !important;
      }
    
      /* লেবেল ফন্ট সাইজ ছোট করা */
      label {
        font-size: 14px !important;
      }
    
      /* রেজাল্ট আউটপুট টেক্সট ছোট করা */
      #resultOutput {
        font-size: 14px !important;
      }
    }
    
  
  
   /* নোটিশ টিকার স্টাইল */
.notice-bar {
  background: #dff0ff;
  color: #004e92;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  border-bottom: 1px solid #b0d4f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-wrapper {
  overflow: hidden;
  width: 100%;
}

.ticker-content {
  display: inline-block;
  padding-left: 100%;
  animation: scrollNotice 60s linear infinite;
  white-space: nowrap;
}

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

  /* বৈশিষ্ট্য সেকশনের শিরোনাম স্টাইল */
  .section-title {
    text-align: center;
    color: #1a5f7a;
    margin-bottom: 1px;
    font-size: 2rem;
    font-weight: 700;
    grid-column: 1 / -1;
  }
  
  .features-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ডেস্কটপে ৪টি কার্ড */
    gap: 25px;
    padding: 10px 20px;
    background-color: #f8f9fa;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .feature-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s;
  }
  
  .feature-card:hover {
    transform: translateY(-5px);
  }
  
  .feature-card i {
    font-size: 2.5rem;
    color: #1a5f7a;
    margin-bottom: 15px;
  }
  
  .feature-card h3 {
    color: #1a5f7a;
    margin-bottom: 10px;
  }
  
  .feature-card p {
    color: #666;
    line-height: 1.5;
  }
  
  /* ট্যাবলেট ডিভাইসের জন্য রেসপনসিভ */
  @media (max-width: 1024px) {
    .features-section {
      grid-template-columns: repeat(2, 1fr); /* ট্যাবলেটে ২টি কার্ড */
      gap: 20px;
      padding: 5px 15px;
    }
  }
  
  /* মোবাইল ডিভাইসের জন্য রেসপনসিভ */
  @media (max-width: 768px) {
    .features-section {
      grid-template-columns: repeat(2, 1fr); /* মোবাইলে ২টি কার্ড */
      gap: 15px;
      padding: 30px 10px;
    }
    
    .feature-card {
      padding: 20px 15px;
    }
    
    .feature-card i {
      font-size: 2rem;
      margin-bottom: 12px;
    }
    
    .feature-card h3 {
      font-size: 1.1rem;
      margin-bottom: 8px;
    }
    
    .feature-card p {
      font-size: 0.9rem;
      line-height: 1.4;
    }
  }
  
  /* একদম ছোট মোবাইলের জন্য */
  @media (max-width: 480px) {
    .features-section {
      grid-template-columns: repeat(2, 1fr); /* ছোট মোবাইলেও ২টি কার্ড */
      gap: 12px;
      padding: 5px 10px;
    }
    
    .feature-card {
      padding: 15px 10px;
    }
    
    .feature-card i {
      font-size: 1.8rem;
      margin-bottom: 10px;
    }
    
    .feature-card h3 {
      font-size: 1rem;
    }
    
    .feature-card p {
      font-size: 0.8rem;
    }
  }
  
  /* একদম ছোট ডিভাইসের জন্য (350px এর নিচে) */
  @media (max-width: 350px) {
    .features-section {
      grid-template-columns: 1fr; /* একদম ছোট স্ক্রিনে ১টি কার্ড */
    }
  }
  
    
    .mission-section {
      padding: 40px 20px;
      background-color: white;
      text-align: center;
    }
    
    .mission-section h2 {
      color: #1a5f7a;
      margin-bottom: 3px;
      font-size: 2rem;
    }
    
    .mission-content {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 10px;
    }
    
    .mission-item {
      padding: 20px;
    }
    
    .mission-item h3 {
      color: #159895;
      margin-bottom: 15px;
    }
    
    .mission-item p {
      line-height: 1.6;
      color: #555;
    }
    
    /* নতুন গ্যালারি স্টাইল - সাইড স্ক্রল সিস্টেম (সব ডিভাইসে) */
    .gallery-section {
      padding: 10px 0;
      background-color: #f8f9fa;
      overflow: hidden;
    }
    
    .gallery-section h2 {
      text-align: center;
      color: #1a5f7a;
      margin-bottom: 40px;
      font-size: 2rem;
      padding: 0 20px;
    }
    
    /* গ্যালারি কন্টেইনার - সব ডিভাইসে সাইড স্ক্রল */
    .gallery-scroll-container {
      overflow-x: auto;
      padding: 0 20px 20px;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
    }
    
    .gallery-scroll-container:active {
      cursor: grabbing;
    }
    
    .gallery-scroll-wrapper {
      display: flex;
      gap: 20px;
      padding-bottom: 15px;
      width: max-content;
    }
    
    .gallery-item {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      flex-shrink: 0;
      position: relative;
    }
    
    .gallery-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .gallery-item img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }
    
    .gallery-item:hover img {
      transform: scale(1.05);
    }
    
    /* ডেস্কটপ এবং মোবাইল ভিউতে গ্যালারি আইটেম সাইজ */
    .gallery-scroll-container .gallery-item {
      width: 300px;
    }
    
    /* মোবাইল ভিউতে সামান্য ছোট */
    @media (max-width: 768px) {
      .gallery-scroll-container .gallery-item {
        width: 280px;
      }
      
      .gallery-scroll-wrapper {
        gap: 15px;
      }
      
      .gallery-item img {
        height: 200px;
      }
      .gallery-section h2 {
        font-size: 1rem;
   
      }
      
    }
    
    /* স্ক্রলবার স্টাইলিং */
    .gallery-scroll-container::-webkit-scrollbar {
      height: 10px;
    }
    
    .gallery-scroll-container::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
      margin: 0 20px;
    }
    
    .gallery-scroll-container::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #1a5f7a 0%, #159895 100%);
      border-radius: 10px;
      border: 2px solid #f1f1f1;
    }
    
    .gallery-scroll-container::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #159895 0%, #1a5f7a 100%);
    }
    
    /* স্ক্রল ইন্ডিকেটর */
    .gallery-scroll-indicator {
      text-align: center;
      margin-top: 15px;
      color: #666;
      font-size: 0.9rem;
    }
    
    .gallery-scroll-indicator i {
      margin: 0 5px;
      color: #1a5f7a;
    }
    
  
  
  
    /* আমাদের বিভাগ সমূহ সেকশনের স্টাইল */
  .departments-section {
    padding: 60px 20px;
    background-color: #f8f9fa;
    text-align: center;
  }
  
  .departments-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ডেস্কটপে ৪টি কার্ড */
    gap: 30px;
    max-width: 1200px;
    margin: 25px auto 0;
  }
  
  .department-card {
    background: #fff;
    padding: 40px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  .department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    color: inherit;
  }
  
  .department-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1a5f7a, #2d8da1);
    transition: left 0.3s ease;
  }
  
  .department-card:hover::before {
    left: 0;
  }
  
  .department-icon {
    font-size: 2.5rem;
    color: #1a5f7a;
    margin-bottom: 20px;
    transition: color 0.3s ease;
  }
  
  .department-card:hover .department-icon {
    color: #2d8da1;
  }
  
  .department-card h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.4rem;
    transition: color 0.3s ease;
  }
  
  .department-card:hover h3 {
    color: #1a5f7a;
  }
  
  .department-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .department-link {
    color: #1a5f7a;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  
  .department-card:hover .department-link {
    color: #2d8da1;
    transform: translateX(5px);
  }
  
  .department-link i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
  }
  
  .department-card:hover .department-link i {
    transform: translateX(3px);
  }
  
  /* ট্যাবলেট ডিভাইসের জন্য রেসপনসিভ */
  @media (max-width: 1024px) {
    .departments-container {
      grid-template-columns: repeat(2, 1fr); /* ট্যাবলেটে ২টি কার্ড */
      gap: 25px;
      padding: 0 15px;
    }
  }
  
  /* মোবাইল ডিভাইসের জন্য রেসপনসিভ */
  @media (max-width: 768px) {
    .departments-section {
      padding: 40px 15px;
    }
    
    .departments-container {
      grid-template-columns: repeat(2, 1fr); /* মোবাইলে ২টি কার্ড */
      gap: 20px;
      margin: 10px auto 0;
    }
    
    .department-card {
      padding: 30px 15px;
    }
    
    .department-icon {
      font-size: 2rem;
      margin-bottom: 15px;
    }
    
    .department-card h3 {
      font-size: 1.2rem;
      margin-bottom: 12px;
    }
    
    .department-card p {
      font-size: 0.9rem;
      margin-bottom: 15px;
    }
  }
  
  /* খুব ছোট মোবাইলের জন্য - এখন ২টি কার্ডই দেখাবে */
  @media (max-width: 480px) {
    .departments-container {
      grid-template-columns: repeat(2, 1fr); /* খুব ছোট স্ক্রিনেও ২টি কার্ড */
      gap: 15px;
    }
    
    .department-card {
      padding: 25px 10px; /* প্যাডিং একটু কমিয়ে দেওয়া */
    }
    
    .department-icon {
      font-size: 1.8rem;
      margin-bottom: 12px;
    }
    
    .department-card h3 {
      font-size: 1.1rem;
      margin-bottom: 10px;
    }
    
    .department-card p {
      font-size: 0.8rem;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    
    .department-link {
      font-size: 0.9rem;
    }
  }
  
  /* একদম ছোট ডিভাইসের জন্য (350px এর নিচে) */
  @media (max-width: 350px) {
    .departments-container {
      grid-template-columns: 1fr; /* একদম ছোট স্ক্রিনে ১টি কার্ড */
      gap: 12px;
    }
    
    .department-card {
      padding: 20px 10px;
    }
  }