/* =====================================================================
   MAURADIAN GUTTERS
   R11-R13

   APPROVED CHANGES ONLY:
   - brighter hero
   - H1-size overlay titles
   - actual-color social badges
   ===================================================================== */


/* =====================================================================
   HERO BRIGHTNESS
   Reduce only darkening layers.
   Do NOT alter image, crop, geometry, header, logo or navigation.
   ===================================================================== */

.hero::before,
.hero-section::before,
.service-area-hero::before,
.mg-hero::before,
.page-hero::before,
.hero-overlay,
.service-area-hero-overlay,
.mg-hero-overlay,
.page-hero-overlay {
    background-color: rgba(0,0,0,.12) !important;
    opacity: 1 !important;
}


/* =====================================================================
   H1-SIZE OVERLAY TITLES
   ===================================================================== */

.city-overlay-title,
.city-title,
.map-city-title,
.mg-city-title,
.presentation-title,
.overlay-title,
.benefit-page-title,
.benefit-hero-title {
    font-size: clamp(3rem, 5vw, 5.5rem) !important;
    line-height: .96 !important;
    font-weight: 800 !important;
}


/* =====================================================================
   SOCIAL BRAND BADGES
   ===================================================================== */

.mg-r13-social-badges {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: 10px !important;
}

.mg-r13-social-badge {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    flex: 0 0 38px !important;
}

.mg-r13-social-badge svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.mg-r13-facebook {
    border-radius: 50% !important;
    background: #1877F2 !important;
}

.mg-r13-instagram {
    border-radius: 11px !important;
    background:
        radial-gradient(
            circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%
        ) !important;
}

.mg-r13-google {
    border-radius: 50% !important;
    background: #ffffff !important;
}

.mg-r13-youtube {
    width: 43px !important;
    border-radius: 10px !important;
    background: #FF0000 !important;
}