/* custom_styles.css - Add your custom styles here */

/* =========================================================
   MOBILE ONLY: CENTER AND SPACE FOOTER ROW 2 CONTENT

   Applies only to Footer Row 2 (#footerRow2) on screens
   smaller than 768px.

   Centers:
   - Contact information
   - Search form
   - Social media icons

   Also adds vertical spacing between each footer widget
   so the stacked mobile layout does not feel crowded.

   Desktop layout remains unchanged.
   ========================================================= */

@media (max-width: 767.98px) {

    /* Center all Footer Row 2 columns */
    #footerRow2 .col-md-4 {
        text-align: center !important;
    }

    /* Add spacing between stacked footer columns */
    #footerRow2 .col-md-4 {
        margin-bottom: 24px;
    }

    /* Remove extra margin after the final widget */
    #footerRow2 .col-md-4:last-child {
        margin-bottom: 0;
    }

    /* Center Contact Info widget */
    #footerRow2 .i4a-contact-info {
        text-align: center !important;
    }

    /* Center Search widget */
    #footerRow2 .widget-search {
        text-align: center !important;
    }

    #footerRow2 .widget-search .form-inline {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center Social Media widget */
    #footerRow2 .widget-social-media {
        text-align: center !important;
    }

}

/* =========================================================
   MOBILE ONLY: REDUCE HERO HEIGHT

   Applies only to the main hero section (#heroSection)
   on screens smaller than 768px.

   Reduces the overall hero height on phones while keeping
   the desktop hero unchanged.

   The hero image continues to fill the available area and
   the existing overlay/content remain centered.
   ========================================================= */

@media (max-width: 767.98px) {

    #heroSection {
        min-height: 260px !important;
        height: 260px !important;
    }

    #heroSection .hero-image-container,
    #heroSection .hero-overlay {
        min-height: 260px !important;
        height: 260px !important;
    }

}