/* ============================================
   Responsive Styles - Bootstrap 5 Breakpoints
   Mobile-first approach
   ============================================ */

/* Base mobile styles (< 576px) */
.hidden-xs { }

.footer { width: 100%; margin: 0 auto; }
.copyright { width: 100%; margin: 0 auto; text-align: center; }

.section1 { width: 100%; padding: 0 15px; }
.section2 { width: 100%; padding: 0 15px; }
.rightsidearea { width: 100%; padding-top: 0 !important; }
.notifationarea { width: 100%; margin: 0 auto; }

.form-control1 { width: 100% !important; }

#search_ques_textarea { font-size: 16px !important; }

.storiesarea { padding: 0; }
.storiesarea > ul { gap: 4px; padding: 10px 12px; }
.storiesarea > ul > li a { padding: 6px 10px; font-size: 12px; min-height: 36px; }
.new-class-first { padding: 12px 12px 0 12px; }
.to-besidediv { padding: 34px 12px 4px 12px; }
.para-div { margin: 6px 12px 10px 12px; padding: 10px 14px; }
.storiesarea .clearfix + ul { padding: 8px 12px 12px 12px; }

.new-class-first a,
.storiesarea a.no_views { font-size: 16px; }

.dp_image_profile { width: 70px; height: 70px; margin-right: 16px; }

.top.left-area { padding: var(--space-4); }

.notification-list { width: 250px; right: 0 !important; left: initial !important; }

.social-icon { float: none; text-align: center; margin-top: 16px; }
.social-icon ul { justify-content: center; }

.pager li { display: block; margin-bottom: 4px; }

/* Navbar mobile */
.navbar-form { margin: 0 auto; margin-left: 8px; padding: 0 !important; }
#search_ques { margin-left: 10px; }

/* Mobile sidebar toggles */
.leftsidebar-btn { float: left; }
.leftsidebar-a { float: left; position: relative; }
.leftsidebar-a b { font-size: 10px; color: var(--accent); }
.leftside-icon-span { background-color: var(--accent); font-size: 10px; }
.bodybar-btn { float: left; }
.bodybar-a { float: left; position: relative; }
.bodybar-a b { font-size: 10px; color: var(--accent); }
.body-icon-span { background-color: var(--accent-light); font-size: 10px; }

/* Mobile nav row */
.mobile-row,
.mobile-row .notifationarea,
.mobile-row .notifationarea ul li a {
  color: var(--accent) !important;
  background: #f5f5f5 !important;
}

.mobile-row .notifationarea ul li { margin: 0; }
.mobile-row .notifationarea { padding: 0 !important; margin: 0 !important; }
.mobile-row .notifationarea ul { margin: 0; padding: 10px; }

.mobile-row .navbar-form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.mobile-row .navbar-form > .col-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
.mobile-row .navbar-form > .col-6:last-child {
  flex-wrap: nowrap !important;
}
.mobile-row #search-xs {
  height: 44px !important;
  width: 100% !important;
  border-radius: 0 !important;
}
.mobile-row .btn-header {
  height: 44px !important;
  flex: 1 !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
}

#search-xs {
  height: 100%;
  margin: 0 !important;
  background: #f5f5f5;
  border: none;
}

.stories-section h1,
.stories-section h2 { font-size: 16px; }

/* ============================================
   Small devices (>= 576px)
   ============================================ */
@media (min-width: 576px) {
  .footer { width: 80%; margin: 0 auto; }
}

/* ============================================
   Medium devices (>= 768px)
   ============================================ */
@media (min-width: 768px) {
  .hidden-xs { display: block; }
  span.hidden-xs, label .hidden-xs { display: inline; }

  .section1 { width: 100%; }
  .section2 { width: 100%; }
  .rightsidearea { width: 100%; padding-top: 0 !important; }
  .notifationarea { width: 66%; }

  .social-icon { float: right; text-align: right; }
  .social-icon ul { justify-content: flex-end; }

  .topsarea1 { height: 14em; position: relative; }

  .storiesarea { padding: 0; }
  .new-class-first { padding: 16px 20px 0 20px; }
  .to-besidediv { padding: 36px 20px 6px 20px; }
  .para-div { margin: 6px 20px 12px 20px; padding: 14px 20px; }
  .storiesarea .clearfix + ul { padding: 10px 20px 14px 20px; }
  .new-class-first a,
  .storiesarea a.no_views { font-size: 18px; }

  .dp_image_profile { width: 100px; height: 100px; }

  .stories-section h1,
  .stories-section h2 { font-size: 18px; }
}

/* ============================================
   Below 768px (mobile overrides)
   ============================================ */
@media (max-width: 767px) {
  .hidden-xs { display: none !important; }

  .storiesarea ul { width: 100%; }
  .storiesarea ul li { margin-right: 0; }
  .storiesarea ul li a.active { padding: 6px 10px; }

  #search_ques_textarea { margin-top: 16px; }
  .expert_img { float: none !important; text-align: center; margin-bottom: 10px; }
  .text-center-xs { text-align: center !important; }
  .no-margin-xs { margin: 0 0 10px 0 !important; }

  .stories-section h2 { text-align: center; margin-left: 0; }

  .topsarea1 { height: 5em; position: relative; }

  .newclass textarea { width: 100% !important; }
}

/* ============================================
   Below large devices (< 992px) — stack sections
   ============================================ */
@media (max-width: 991px) {
  .background .row > .section1,
  .background .row > .section2,
  .background .row > .section1.section3,
  .background .row > .section2 ~ .section1 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .rightsidearea { width: 100% !important; }
}

/* ============================================
   Large devices (>= 992px)
   ============================================ */
@media (min-width: 992px) {
  .hidden-sm { display: block; }

  .section1 { flex: 0 0 240px !important; width: 240px !important; max-width: 240px !important; }
  .section2 { flex: 1 1 0% !important; width: auto !important; max-width: none !important; min-width: 0; }
  .section1.section3, .section2 ~ .section1 { flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; }
  .rightsidearea { width: 280px; flex-shrink: 0; margin-left: 0; }
  .notifationarea { width: 28%; }

  .section3 { margin-top: 0; }

  .new-class-first a,
  .storiesarea a.no_views { font-size: 20px; }
}

/* ============================================
   Extra large (>= 1200px)
   ============================================ */
@media (min-width: 1200px) {
  .hidden-md { display: block; }

  .section1.section3, .section2 ~ .section1 { flex: 0 0 300px !important; width: 300px !important; max-width: 300px !important; }
  .rightsidearea { width: 300px; }
}

/* ============================================
   XXL (>= 1400px)
   ============================================ */
@media (min-width: 1400px) {
  .section1.section3, .section2 ~ .section1 { flex: 0 0 320px !important; width: 320px !important; max-width: 320px !important; }
  .rightsidearea { width: 320px; }
  .notification-list { text-align: left; }
}

/* ============================================
   Specific range overrides
   ============================================ */

/* Between sm and md */
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
  .rightsidearea { width: 100%; padding-top: 0 !important; }
  .notifationarea { width: 66%; }
}

/* Between md and lg */
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
  .notifationarea { width: 66%; }
}

/* Between lg and xl */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hidden-lg { display: none !important; }
}

/* >= 1800px ultra-wide */
@media (min-width: 1800px) {
  .notification-list { width: 300px; z-index: 10000; right: 0; left: initial !important; }
}

/* ============================================
   Small mobile specifics
   ============================================ */
@media (max-width: 420px) {
  .notifationarea { width: 98%; margin: 10px auto; }
  .notifationarea ul li { padding-left: 8px; }
  .storiesarea h2 { font-size: 16px; }
  .footer ul li a { font-size: 13px; }
  .social-icon p { font-size: 13px; }
}

@media (max-width: 380px) {
  .btn-header { border-radius: 5px; }
  .form-control1 { float: none; width: 77% !important; }
  .notifationarea ul li { padding-left: 0; float: none; text-align: center; padding-top: 9px; }
  .newbtns { margin: 0 auto; }
  #search_ques { width: 80% !important; border-radius: 3px; margin: auto 30px; }
  .storiesarea h6 { font-size: 12px; }
}

@media (max-width: 320px) {
  .top-header ul li { position: relative; font-size: 13px; padding-left: 5px; }
  .newbtns { margin-left: 17%; }
  .footer ul li { padding-left: 5px; }
  .social-icon { width: 85%; }
  .rightsidearea { width: 100%; }
}

/* Tablet-specific search */
@media (max-width: 1024px) {
  .top-header { width: auto; }
  .notifationarea { width: 100%; }
}

/* ============================================
   Below 816px (tablet section3 offset)
   ============================================ */
@media (min-width: 816px) {
  .section3 { margin-top: 0; }
}

/* ============================================
   Below 600px (narrow mobile)
   ============================================ */
@media (max-width: 599px) {
  .rightsidearea { width: 100%; padding-top: 0 !important; }
}