/* ============================================================
   GoAgile Custom Styles
   Add all site-wide CSS overrides here.
   ============================================================ */


/* ----------------------------------------------------------
   Mega Menu — normalize linked headings (h6.custom_heading a)
   so they match plain text headings (color, size, weight).
   Needs !important to beat the high-specificity inline <style>
   generated by the theme's dynamic CSS.
   ---------------------------------------------------------- */
#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a,
#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a:hover,
#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a:focus {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    text-decoration: none !important;
    line-height: inherit !important;
}

/* Heading links: suppress the nav-item hover effects (dash prefix, left-shift).
   Apply a subtle opacity dip instead so it reads as interactive without moving. */
#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a:hover,
#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a:focus {
    opacity: 0.75 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    transform: none !important;
}

#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a::before,
#site-header-menu #site-navigation .mega-menu-wrap h6.custom_heading a::after {
    display: none !important;
    content: none !important;
}


/* ----------------------------------------------------------
   Footer — general improvements
   ---------------------------------------------------------- */

/* Main footer top/bottom breathing room */
#second-footer .tm-container-for-footer {
    padding-top: 60px;
    padding-bottom: 50px;
}

/* Fix column width imbalance at the md breakpoint (992–1199px):
   col-md-3 + col-md-4 + col-md-4 + col-md-4 adds to 15, causing wrapping.
   Force all four widget areas to equal 25% quarters. */
@media (min-width: 992px) and (max-width: 1199px) {
    #second-footer .row.multi-columns-row .widget-area {
        width: 25% !important;
        float: left;
    }
}

/* Tablet (768–991px): 2×2 grid instead of mixed 50%/100% columns */
@media (min-width: 768px) and (max-width: 991px) {
    #second-footer .row.multi-columns-row .widget-area {
        width: 50% !important;
        float: left;
        margin-bottom: 35px;
    }
    #second-footer .tm-container-for-footer {
        padding-top: 45px;
        padding-bottom: 35px;
    }
}

/* Mobile (<768px): single column, uniform spacing */
@media (max-width: 767px) {
    #second-footer .row.multi-columns-row .widget-area {
        width: 100% !important;
        float: none;
        margin-bottom: 30px;
    }
    #second-footer .tm-container-for-footer {
        padding-top: 35px;
        padding-bottom: 25px;
    }
}

/* ----------------------------------------------------------
   Footer — Logo + description column
   ---------------------------------------------------------- */

/* Strip the inline padding so the logo aligns with the other columns */
#custom_html-16 .logo-and-description-container {
    padding: 0 !important;
}

#custom_html-16 .logo-and-description-container img {
    margin-bottom: 18px !important;
    max-width: 140px !important;
}

#custom_html-16 .logo-and-description-container p {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------
   Footer — Widget section headings (h3.widget-title)
   ---------------------------------------------------------- */
#second-footer .widget .widget-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

/* ----------------------------------------------------------
   Footer — Navigation menu links
   ---------------------------------------------------------- */
#second-footer .widget_nav_menu ul.menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

#second-footer .widget_nav_menu ul.menu li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#second-footer .widget_nav_menu ul.menu li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#second-footer .widget_nav_menu ul.menu li a {
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

#second-footer .widget_nav_menu ul.menu li a:hover {
    color: #ffffff !important;
    padding-left: 5px;
}

/* ----------------------------------------------------------
   Footer — Office contact details column
   ---------------------------------------------------------- */

/* Remove the inline left-padding that misaligns the column */
.footer-contact-details {
    padding-left: 0 !important;
}

.footer-contact-details .office-heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #f7931e !important;
    margin-bottom: 10px !important;
}

.footer-contact-details .office-address,
.footer-contact-details .contact-info {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0 0 4px !important;
}

.footer-contact-details .contact-divider {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin: 18px 0 !important;
    width: 100% !important;
}

/* ----------------------------------------------------------
   Footer — Background: dim mesh graphic + fade top edge + top border
   ---------------------------------------------------------- */

/* Stack a gradient overlay on top of the background image:
   - Near-solid at top (0% = hard edge hidden, seamless into section above)
   - Fades to ~18% transparent at bottom (subtle texture, not competing with text)
   - 1px top border creates intentional boundary with the preceding section     */
.footer {
    background-image:
        linear-gradient(
            to bottom,
            rgba(5, 10, 30, 0.96) 0%,
            rgba(5, 10, 30, 0.82) 100%
        ),
        url('https://goagiletechnologies.com/wp-content/uploads/2024/08/3d-abstract-polygonal-blue-background-gradient-1-scaled.jpg') !important;
    background-size: 100% 100%, cover !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, no-repeat !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ----------------------------------------------------------
   Footer — Bottom copyright bar
   ---------------------------------------------------------- */
#bottom-footer-text .bottom-footer-inner {
    padding: 14px 0;
}

#bottom-footer-text .tm-footer2-left {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
    width: 100% !important;
}

#bottom-footer-text .tm-footer2-left a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600;
    text-decoration: none !important;
}

#bottom-footer-text .tm-footer2-left a:hover {
    color: #f7931e !important;
}