/* ============================================
   Homepage - CSS
   ============================================ */

@media (max-width: 767px) {
  .flag-section { padding: 30px 0 !important; }
  .flag-section .section-title h2 { font-size: 1.4rem !important; }
  .flag-section .col-md-3 { width: 50% !important; padding: 5px; }
  .flag-sec { padding: 15px 10px; margin-bottom: 10px; }
  .flag-1 { width: 50px; height: 50px; }
  .flag-1 img { width: 100%; height: 100%; object-fit: cover; }
  .name { font-size: 13px; padding-left: 10px; }
  .flag-section .row.mt-4 p { font-size: 14px; line-height: 1.7; text-align: justify; }
}

@media (max-width: 480px) {
  .flag-section .section-title h2 { font-size: 1.2rem !important; }
  .flag-section .col-md-3 { width: 100% !important; }
  .flag-sec { padding: 12px; }
  .flag-1 { width: 45px; height: 45px; }
  .name { font-size: 14px; }
  .flag-section .row.mt-4 p { font-size: 13px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .flag-section .col-md-3 { width: 33.333%; }
}