.elementor-476 .elementor-element.elementor-element-ae0be14{--display:flex;--min-height:150px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-around;}.elementor-476 .elementor-element.elementor-element-ae0be14:not(.elementor-motion-effects-element-type-background), .elementor-476 .elementor-element.elementor-element-ae0be14 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-7ddeaa3 );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-476 .elementor-element.elementor-element-f0090fd{text-align:center;}.elementor-476 .elementor-element.elementor-element-f0090fd .elementor-heading-title{color:#FFFFFF;}.elementor-476 .elementor-element.elementor-element-38c559d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-476 .elementor-element.elementor-element-9cd8d27{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}/* Start custom CSS for shortcode, class: .elementor-element-9cd8d27 *//* --- FINAL REFINED CSS: Desktop 4, Mobile 2 --- */

/* Wrapper for the overall section */
.govt-departments-wrapper {
  padding: 20px 0;
}

/* 1. DESKTOP/LARGE SCREENS: 4 Columns */
.govt-departments-wrapper .govt-dept-grid {
  display: grid;
  /* Desktop layout: 4 columns */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

/* The box/card link style */
.govt-departments-wrapper .govt-dept-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 5px;
  text-align: center;
  position: relative;
  transition: all 0.22s ease;
  border: 1px solid #ccc; /* Light grey border */
  background: #ffffff;
  padding: 8px 12px;
  box-sizing: border-box;
  text-decoration: none;
  color: #333333;
}

/* Hide logo elements */
.govt-departments-wrapper .govt-dept-logo {
  display: none !important;
}

/* Text/Title styling */
.govt-departments-wrapper .govt-dept-title {
  display: block !important;
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  padding: 0;
  border-radius: 0;
  background: none;
  transform: none !important;
  opacity: 1 !important;
}

/* Hover effects */
@media (hover: hover) and (pointer: fine) {
  .govt-departments-wrapper .govt-dept-card-link:hover {
    background: #f0f0f0;
    border-color: #999;
    transform: none;
    box-shadow: none;
  }
}


/* 2. MOBILE / TABLET OPTIMIZATIONS */

/* Target all screen sizes up to 768px (standard phone/small tablet) */
@media (max-width: 768px) {
  /* THIS IS THE FIX: Set 2 columns for mobile phones */
  .govt-departments-wrapper .govt-dept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .govt-departments-wrapper .govt-dept-card-link {
    min-height: 36px;
    padding: 6px 10px;
  }
  .govt-departments-wrapper .govt-dept-title {
    font-size: 13px; /* Slightly smaller font to fit 2 columns */
  }
}

/* Optional: If 2 columns still look too crowded on very small screens, 
   you can use this to switch to 1 column, but it's often not needed. 
   I have commented it out. 
@media (max-width: 420px) {
  .govt-departments-wrapper .govt-dept-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
*//* End custom CSS */