/* ====================================================================
   MOBILE RESPONSIVE OPTIMIZATION
   Fix for mobile display issues including:
   - Logo visibility in navbar
   - Navigation responsiveness
   - Section cards adaptation
   - General mobile optimization
   ==================================================================== */

/* ═══════════════════════════════════════════════════════════════════
   01. HEADER & NAVBAR MOBILE FIXES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  /* Hide desktop grid layout */
  .tj-header-area.header-2 .header-wrapper {
    grid-template-columns: auto auto;
    column-gap: 0;
    padding: 0;
  }

  .tj-header-area.header-2 .mainmenu {
    width: auto;
    justify-content: flex-start;
  }

  /* Ensure logo is visible */
  .site-logo {
    display: flex !important;
    align-items: center;
    padding: 10px 0;
  }

  .site-logo .logo img {
    height: 40px;
    width: auto;
  }

  /* Mobile menu logo */
  .hamburger_logo {
    display: flex !important;
    align-items: center;
  }

  .mobile_logo img {
    height: 35px;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* Very small screens */
  .tj-header-area.header-2 .header-wrapper {
    grid-template-columns: auto 1fr;
    gap: 0;
  }

  .tj-header-area.header-2 .mainmenu {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }

  .site-logo .logo img {
    height: 35px;
  }

  .hamburger_logo {
    order: 1;
  }

  .mobile_logo img {
    height: 30px;
  }

  .tj-header-area.header-2 .header_right_info {
    order: 2;
    gap: 8px !important;
  }

  .mainmenu ul:not(.sub-menu) > li > a {
    font-size: 14px;
    padding: 16px 8px;
  }

  .header-signin {
    padding: 6px 12px;
    font-size: 12px;
  }

  .lang-toggle span {
    padding: 5px 10px;
    font-size: 10px;
  }
}

@media (max-width: 575px) {
  /* Mobile phones */
  .tj-header-area.header-2 .header-wrapper {
    grid-template-columns: 1fr;
    padding: 8px 12px;
  }

  .tf-header-area.header-2 {
    padding: 0;
  }

  .site-logo {
    flex-shrink: 0;
  }

  .site-logo .logo img {
    height: 32px;
  }

  .hamburger_logo {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }

  .mobile_logo img {
    height: 28px;
  }

  .mainmenu {
    width: 100% !important;
  }

  .mainmenu ul:not(.sub-menu) > li > a {
    font-size: 13px;
    padding: 12px 6px;
  }

  .header-signin {
    padding: 5px 10px;
    font-size: 11px;
  }

  .lang-toggle {
    padding: 4px 8px;
  }

  .lang-toggle span {
    padding: 4px 8px;
    font-size: 9px;
  }

  .header-signin-sm {
    padding: 5px 10px;
    font-size: 10px;
  }

  .header_right_info {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   02. TOP ANNOUNCEMENT BAR MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .top-announcement-bar {
    height: auto;
    flex-wrap: wrap;
  }

  .topbar-left,
  .topbar-right {
    border: none;
    padding: 6px 12px;
    height: auto;
    flex-basis: 100%;
    justify-content: center;
  }

  .topbar-ticker-wrap {
    flex-basis: 100%;
    padding: 6px 12px;
    height: auto;
  }

  .topbar-socials {
    justify-content: center;
  }

  .topbar-email {
    font-size: 11px;
  }

  .lang-toggle-topbar span {
    padding: 2px 8px;
    font-size: 10px;
  }
}

@media (max-width: 575px) {
  .top-announcement-bar {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   03. GRID COLUMNS - MOBILE ADAPTATION
   ═══════════════════════════════════════════════════════════════════ */

/* Make all 6-column grids stack on mobile */
@media (max-width: 991px) {
  .col-lg-6 {
    width: 100% !important;
  }

  .row.rg-40 > .col-lg-6 {
    margin-bottom: 20px;
  }
}

/* Medium screens - 2 columns */
@media (max-width: 767px) {
  .col-md-6,
  .col-lg-6 {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .col-sm-6 {
    width: 100% !important;
  }

  /* Initiatives and programs sections */
  [class*="col-md-6"] {
    flex: 0 0 100% !important;
  }
}

/* Small phones - full width */
@media (max-width: 575px) {
  .col-lg-6,
  .col-md-6,
  .col-sm-6,
  [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  .row {
    margin-right: 0;
    margin-left: 0;
  }

  .row > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   04. CARDS & SECTIONS MOBILE ADAPTATION
   ═══════════════════════════════════════════════════════════════════ */

/* Generic card adaptation */
@media (max-width: 767px) {
  /* Reduce padding on cards */
  [style*="padding:24px"] {
    padding: 16px !important;
  }

  [style*="padding:28px"] {
    padding: 18px !important;
  }

  [style*="padding:36px"] {
    padding: 20px !important;
  }

  [style*="gap:16px"] {
    gap: 12px !important;
  }

  [style*="margin-bottom:52px"] {
    margin-bottom: 32px !important;
  }

  [style*="margin-bottom:36px"] {
    margin-bottom: 24px !important;
  }
}

@media (max-width: 575px) {
  /* Very small padding for phones */
  [style*="padding:24px"] {
    padding: 12px !important;
  }

  [style*="padding:28px"] {
    padding: 14px !important;
  }

  [style*="padding:36px"] {
    padding: 16px !important;
  }

  [style*="gap:16px"] {
    gap: 8px !important;
  }

  /* Flex items - make them column on mobile */
  [style*="display:flex"] {
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   05. TYPOGRAPHY MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  h1, .tj-section-title, [style*="font-size:3"] {
    font-size: 1.75rem !important;
    line-height: 1.3;
  }

  h2, .sec-title {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  h4, h5 {
    font-size: 1rem !important;
  }

  p {
    font-size: 14px !important;
  }
}

@media (max-width: 575px) {
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  h4, h5 {
    font-size: 0.95rem !important;
  }

  p {
    font-size: 13px !important;
  }

  .sub-title {
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   06. FEATURE SECTION MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .h8-feature-item.style-4 {
    padding: 20px 16px !important;
  }

  .h8-feature-item.style-4 .feature-content .number {
    font-size: 2.2rem;
    margin-bottom: 8px;
  }

  .h8-feature-item.style-4 .feature-content .title {
    font-size: 0.9rem;
  }

  .h8-feature-item.style-4 .feature-content .desc p {
    font-size: 0.8rem;
  }

  .h8-feature .row.rg-30 {
    row-gap: 16px;
  }
}

@media (max-width: 575px) {
  .h8-feature-item.style-4 {
    padding: 16px 12px !important;
  }

  .h8-feature-item.style-4 .feature-content .number {
    font-size: 1.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   07. ACCORDION MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .adn-header {
    gap: 16px;
    padding: 18px 0;
  }

  .adn-num {
    font-size: 2rem;
    width: 50px;
  }

  .adn-title-text {
    font-size: 1.1rem;
  }

  .adn-panel-inner {
    padding: 0 0 24px 0;
  }

  .adn-btn {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }
}

@media (max-width: 575px) {
  .tj-adn-section {
    padding: 60px 0 40px;
  }

  .adn-accordion {
    margin-top: 32px;
  }

  .adn-header {
    gap: 12px;
    padding: 14px 0;
  }

  .adn-num {
    font-size: 1.5rem;
    width: 40px;
  }

  .adn-cat {
    font-size: 9px;
  }

  .adn-title-text {
    font-size: 1rem;
  }

  .adn-btn {
    width: 32px;
    height: 32px;
  }

  /* Vision quote on mobile */
  .vision-quote {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .vq-bar {
    height: 3px;
    width: 40px;
    align-self: flex-start;
  }

  .vision-quote blockquote {
    font-size: 1rem;
  }

  /* Engagement cards */
  .engagement-card {
    padding: 16px 14px;
  }

  .ec-num {
    font-size: 2rem;
  }

  .ec-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .engagement-card h4 {
    font-size: 13px;
  }

  .engagement-card p {
    font-size: 12px;
  }

  /* Principle cards */
  .principe-card {
    padding: 16px 14px;
  }

  .pr-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .principe-card h5 {
    font-size: 13px;
  }

  .principe-card p {
    font-size: 11.5px;
  }

  /* Mission cards */
  .mission-card {
    padding: 14px 12px;
  }

  .mission-card h5 {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   08. INITIATIVES & PROGRAMS CARDS MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .initiative-card,
  .program-card,
  [class*="initiative"],
  [class*="program"] {
    width: 100%;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Service/Initiative cards in row/grid */
  .row > [class*="col"] {
    width: 100%;
    flex: 0 0 100%;
  }

  /* Cards with display:flex that should responsive */
  [style*="display:flex"][style*="gap:16px"] {
    flex-direction: column;
    gap: 12px !important;
  }

  /* Ensure card images are responsive */
  [class*="card"] img,
  [style*="border-radius"] img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 575px) {
  /* Force single column for all card sections */
  .container > .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .container > .row > [class*="col"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Cards - reduce all gaps */
  [style*="gap:20px"] {
    gap: 8px !important;
  }

  [style*="gap:14px"] {
    gap: 6px !important;
  }

  [style*="gap:10px"] {
    gap: 4px !important;
  }

  /* Initiative/Program card specific */
  [style*="border-radius:14px"] {
    border-radius: 8px !important;
  }

  [style*="border-radius:12px"] {
    border-radius: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   09. BUTTONS MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .tj-primary-btn,
  [class*="btn"] {
    padding: 10px 16px;
    font-size: 13px;
    width: 100%;
  }

  .btn_text span {
    font-size: 13px;
  }

  .btn_icon {
    font-size: 12px;
  }
}

@media (max-width: 575px) {
  .tj-primary-btn,
  [class*="btn"] {
    padding: 8px 12px;
    font-size: 12px;
  }

  .btn_text span {
    font-size: 12px;
  }

  .btn_inner {
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   10. SECTIONS SPACING MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .section-bottom-space {
    padding-bottom: 40px !important;
  }

  .section-top-space {
    padding-top: 40px !important;
  }

  [style*="padding:100px 0"] {
    padding: 50px 0 !important;
  }

  [style*="padding:80px 0"] {
    padding: 40px 0 !important;
  }

  [style*="padding:60px 0"] {
    padding: 35px 0 !important;
  }
}

@media (max-width: 575px) {
  [style*="padding:100px 0"] {
    padding: 35px 0 !important;
  }

  [style*="padding:80px 0"] {
    padding: 30px 0 !important;
  }

  [style*="padding:60px 0"] {
    padding: 25px 0 !important;
  }

  [style*="padding:50px 0"] {
    padding: 20px 0 !important;
  }

  [style*="padding:40px 0"] {
    padding: 18px 0 !important;
  }

  [style*="padding:90px 0"] {
    padding: 40px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   11. TEXT ALIGNMENT MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  [class*="text-lg-end"],
  [class*="text-lg-center"],
  [style*="text-align:right"],
  .text-lg-end {
    text-align: center !important;
  }

  [style*="text-align:center"] {
    text-align: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   12. CONTAINER & GRID ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }

  figure {
    margin: 0;
  }
}

@media (max-width: 575px) {
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13. STICKY HEADER MOBILE FIX
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .tj-header-area.sticky {
    padding: 8px 0;
  }

  .tj-header-area.header-duplicate {
    top: 0;
  }

  .tj-header-area.header-absolute {
    top: 0;
  }
}

@media (max-width: 767px) {
  .tj-header-area.sticky .header-bottom {
    padding: 12px 0 !important;
  }
}

@media (max-width: 575px) {
  .tj-header-area {
    z-index: 100 !important;
  }

  .tj-header-area.sticky {
    padding: 4px 0;
  }

  .tj-header-area.header-bottom {
    padding: 8px 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   14. SWIPER/SLIDER MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .swiper-slide {
    min-height: 300px;
  }

  .swiper-wrapper {
    padding-bottom: 20px;
  }
}

@media (max-width: 575px) {
  .swiper-slide {
    min-height: 250px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   15. ANIMATION DISABLE ON MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .wow {
    animation: none !important;
  }

  .animated {
    animation: none !important;
  }

  /* Reduce transition times */
  * {
    transition-duration: 0.15s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   16. HIDE DESKTOP-ONLY ELEMENTS ON MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .d-none-mobile {
    display: none !important;
  }

  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .d-none-mobile-sm {
    display: none !important;
  }

  /* Hide complex elements on very small screens */
  [style*="max-width:580px"] {
    max-width: 100% !important;
  }

  [style*="max-width:480px"] {
    max-width: 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   17. INITIATIVE PROGRAM CARDS - SPECIAL FIX
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .initiative-card,
  .program-card,
  .service-card {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin-bottom: 12px;
  }

  .initiative-card [style*="width:44px"],
  .program-card [style*="width:44px"],
  .service-card [style*="width:44px"] {
    flex-shrink: 0;
  }

  /* Service style 2 */
  .service-style-2 {
    padding: 30px 20px 35px;
  }

  .service-style-2 .service-icon {
    width: 75px;
    height: 75px;
    font-size: 50px;
    margin-bottom: 30px;
  }

  .service-style-2 .service-content .number {
    font-size: 14px;
  }

  .service-style-2 .service-content .title {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }

  .service-style-2 .service-content .desc p {
    font-size: 14px;
    line-height: 1.5;
  }

  .service-style-2 .service-button {
    font-size: 13px;
    margin-top: 15px;
  }
}

@media (max-width: 767px) {
  /* Service style 2 tablet */
  .tj-service-area {
    padding: 50px 0;
  }

  .service-style-2 {
    padding: 22px 16px 28px;
  }

  .service-style-2 .service-icon {
    width: 65px;
    height: 65px;
    font-size: 42px;
    margin-bottom: 20px;
  }

  .service-style-2 .service-content .number {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .service-style-2 .service-content .title {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .service-style-2 .service-content .title h4 {
    font-size: 1rem;
  }

  .service-style-2 .service-content .desc p {
    font-size: 13px;
    line-height: 1.4;
  }

  .service-style-2 .service-button {
    font-size: 12px;
    margin-top: 12px;
  }
}

@media (max-width: 575px) {
  /* Service style 2 phones */
  .tj-service-area {
    padding: 35px 0;
  }

  .service-style-2 {
    padding: 16px 12px 20px;
    border-radius: 8px;
  }

  .service-style-2 .service-icon {
    width: 55px;
    height: 55px;
    font-size: 36px;
    margin-bottom: 14px;
  }

  .service-style-2 .service-content .number {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .service-style-2 .service-content .title {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .service-style-2 .service-content .title h4 {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .service-style-2 .service-content .title br {
    display: none;
  }

  .service-style-2 .service-content .desc p {
    font-size: 12px;
    line-height: 1.35;
  }

  .service-style-2 .service-button {
    font-size: 11px;
    margin-top: 10px;
  }

  /* Grille service mobile */
  .tj-service-area .row.rg-30 {
    margin-left: -6px;
    margin-right: -6px;
  }

  .tj-service-area .row.rg-30 > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
  }
}

@media (max-width: 767px) {
  /* Cards with nested divs */
  [style*="border-radius:14px"][style*="padding:24px"] {
    padding: 16px 14px !important;
    display: block;
  }

  [style*="border-radius:14px"][style*="padding:24px"] div {
    width: 100%;
  }

  /* Ensure card content is readable */
  [style*="border-radius:14px"][style*="padding:24px"] h5 {
    font-size: 14px;
    margin-bottom: 6px;
  }

  [style*="border-radius:14px"][style*="padding:24px"] p {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 575px) {
  [style*="border-radius:14px"][style*="padding:24px"] {
    padding: 12px 10px !important;
  }

  [style*="border-radius:14px"][style*="padding:24px"] h5 {
    font-size: 13px;
  }

  [style*="border-radius:14px"][style*="padding:24px"] p {
    font-size: 11px;
  }

  /* Icon size */
  [style*="width:44px"][style*="height:44px"] {
    width: 36px !important;
    height: 36px !important;
  }

  [style*="width:44px"][style*="height:44px"] i {
    font-size: 16px;
  }

  [style*="font-size:20px"] {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   18. FORMATION CARDS MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .formation-card {
    border-radius: 10px;
  }

  .formation-card-img img {
    height: 180px;
  }

  .formation-card-body {
    padding: 16px 18px 18px;
  }

  .fc-category {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .fc-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .fc-desc {
    font-size: 13px;
  }

  .fc-badges-top {
    top: 10px;
    left: 10px;
  }

  .fc-badge-price {
    bottom: 10px;
    right: 10px;
    font-size: 11px;
    padding: 3px 10px;
  }
}

@media (max-width: 767px) {
  .formation-card {
    border-radius: 8px;
  }

  .formation-card-img img {
    height: 160px;
  }

  .formation-card-body {
    padding: 14px 14px 16px;
  }

  .fc-category {
    font-size: 9px;
    margin-bottom: 5px;
  }

  .fc-title {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .fc-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  .fc-badges-top,
  .fc-badge-price {
    font-size: 10px;
  }

  .fc-badge-duration,
  .fc-badge-level {
    font-size: 10px;
    padding: 2px 8px;
  }

  .fc-badge-price {
    padding: 2px 8px;
    font-size: 10px;
  }
}

@media (max-width: 575px) {
  .formation-card {
    border-radius: 8px;
  }

  .formation-card-img img {
    height: 140px;
  }

  .formation-card-body {
    padding: 12px 12px 14px;
  }

  .fc-category {
    font-size: 8px;
  }

  .fc-title {
    font-size: 0.9rem;
    margin-bottom: 5px;
  }

  .fc-desc {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  .fc-instructor,
  .fc-level {
    font-size: 10px;
  }

  .fc-badge-duration,
  .fc-badge-level {
    font-size: 9px;
    padding: 2px 6px;
  }

  .fc-badge-price {
    bottom: 8px;
    right: 8px;
    padding: 2px 6px;
    font-size: 9px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   19. BLOG CARDS & POSTS MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .blog-post-item {
    margin-bottom: 30px;
  }

  .blog-thumb img,
  .blog-image img {
    height: auto;
  }

  .blog-content {
    padding: 24px 20px;
  }

  .blog-meta {
    font-size: 13px;
    gap: 12px;
  }

  .blog-title {
    font-size: 1.15rem;
    margin-bottom: 10px;
  }

  .blog-desc {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .blog-post-item {
    margin-bottom: 24px;
  }

  .blog-content {
    padding: 18px 16px;
  }

  .blog-meta {
    font-size: 12px;
    gap: 10px;
    margin-bottom: 8px;
  }

  .blog-title {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .blog-desc {
    font-size: 13px;
    line-height: 1.5;
  }

  .blog-button,
  .blog-link {
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .blog-post-item {
    margin-bottom: 16px;
  }

  .blog-content {
    padding: 14px 12px;
  }

  .blog-meta {
    font-size: 11px;
    gap: 8px;
  }

  .blog-title {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .blog-desc {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
  }

  .blog-button,
  .blog-link {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   20. TESTIMONIALS & SLIDERS MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .testimonial-item {
    padding: 24px 18px;
    margin-bottom: 16px;
  }

  .testimonial-img {
    width: 60px;
    height: 60px;
  }

  .testimonial-content {
    font-size: 13px;
    line-height: 1.5;
  }

  .testimonial-author {
    font-size: 14px;
    margin-top: 12px;
  }

  .testimonial-author-role {
    font-size: 12px;
  }
}

@media (max-width: 575px) {
  .testimonial-item {
    padding: 16px 12px;
  }

  .testimonial-img {
    width: 50px;
    height: 50px;
  }

  .testimonial-content {
    font-size: 12px;
    line-height: 1.4;
  }

  .testimonial-author {
    font-size: 13px;
  }

  .testimonial-author-role {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   21. FAQ SECTION MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .faq-item {
    margin-bottom: 12px;
  }

  .faq-title {
    font-size: 1rem;
    padding: 16px 14px;
  }

  .faq-content {
    padding: 14px;
    font-size: 13px;
    line-height: 1.5;
  }

  .faq-button {
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .faq-item {
    border-radius: 6px;
  }

  .faq-title {
    font-size: 0.95rem;
    padding: 12px 10px;
  }

  .faq-content {
    padding: 12px;
    font-size: 12px;
  }

  .faq-button {
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   22. TEAM & CONTACT MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .team-member {
    margin-bottom: 24px;
  }

  .member-img {
    height: 250px;
  }

  .member-content {
    padding: 18px;
  }

  .member-name {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  .member-position {
    font-size: 13px;
  }

  /* Contact form */
  .contact-form {
    padding: 24px 18px;
  }

  .form-group {
    margin-bottom: 16px;
  }

  .form-control,
  .form-input {
    padding: 10px 12px;
    font-size: 14px;
  }

  .form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }
}

@media (max-width: 575px) {
  .team-member {
    margin-bottom: 18px;
  }

  .member-img {
    height: 200px;
  }

  .member-content {
    padding: 14px 12px;
  }

  .member-name {
    font-size: 0.95rem;
  }

  .member-position {
    font-size: 12px;
  }

  /* Contact form */
  .contact-form {
    padding: 16px 12px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-control,
  .form-input {
    padding: 8px 10px;
    font-size: 13px;
  }

  .form-label {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   END MOBILE RESPONSIVE OPTIMIZATION
   ==================================================================== */