@charset "utf-8";
/* CSS Document */

/* ==============================
   Navigation
============================== */
      /* Navbar social icons */
      .nav-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        color: white;
        font-size: 18px;
        margin: 0 5px;
        text-decoration: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

.nav-icon:hover {
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 5px 10px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(255,255,255,0.15);
      }

.nav-icon i {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3), -1px -1px 1px rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}
	
.nav-icon::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%);
    transform: rotate(-25deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-icon:hover::after {
    opacity: 1;
}
/* Brand Gradients */
.nav-icon.facebook { background: linear-gradient(145deg, #1877f2, #0a3dc4) !important; }
.nav-icon.instagram { background: linear-gradient(145deg, #f58529, #dd2a7b, #8134af) !important; }
.nav-icon.youtube { background: linear-gradient(145deg, #ff0000, #cc0000) !important; }
.nav-icon.twitter-x { background: linear-gradient(135deg, #141414, #2b2b2b) !important; } /* changed for x colors */
.nav-icon.tiktok { background: linear-gradient(145deg, #69c9d0, #010101) !important; }
.nav-icon.whatsapp { background: linear-gradient(145deg, #25d366, #128c3e) !important; }
.nav-icon.yelp { background: linear-gradient(145deg, #d32323, #a61f1f) !important; }
.nav-icon.nextdoor { background: linear-gradient(145deg, #00a680, #007754) !important; }
.nav-icon.birdeye { background: linear-gradient(145deg, #ffb400, #cc8f00) !important; }
.nav-icon.reviewsio { background: linear-gradient(145deg, #C5EBD9, #FFF900) !important; }
.nav-icon.phone { background: linear-gradient(135deg, #6f0bb3, #0dcaf0) !important; }
.nav-icon.contact { background: linear-gradient(135deg, #007bff, #00c6ff) !important; }
.nav-icon.wordpress { background: linear-gradient(45deg, #21759b, #1e73be, #74b9ef) !important; } /* WordPress gradient */ 

/* ===============================
General Social Media Changes
=================================*/
/* Social Icons - default (desktop) */
.social-wrap {
    gap: 6px; /* space between icons */
}


/* ==============================
   Bottom Social Media Bar
============================== */
.d-flex.justify-content-center.flex-wrap.gap-3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(255,255,255,0.1);
    color: #fff;
    isolation: isolate;
    background-color: unset !important; /* override bootstrap */
}
.social-icon i {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3), -1px -1px 1px rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}
.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 15px rgba(0,0,0,0.3), inset 0 -3px 6px rgba(255,255,255,0.15);
}
.social-icon::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%);
    transform: rotate(-25deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.social-icon:hover::after {
    opacity: 1;
}
/* Brand Gradients */
.social-icon.facebook { background: linear-gradient(145deg, #1877f2, #0a3dc4) !important; }
.social-icon.instagram { background: linear-gradient(145deg, #f58529, #dd2a7b, #8134af) !important; }
.social-icon.youtube { background: linear-gradient(145deg, #ff0000, #cc0000) !important; }
.social-icon.twitter-x { background: linear-gradient(135deg, #141414, #2b2b2b) !important; } /* changed for x colors */
.social-icon.tiktok { background: linear-gradient(145deg, #69c9d0, #010101) !important; }
.social-icon.whatsapp { background: linear-gradient(145deg, #25d366, #128c3e) !important; }
.social-icon.yelp { background: linear-gradient(145deg, #d32323, #a61f1f) !important; }
.social-icon.nextdoor { background: linear-gradient(145deg, #00a680, #007754) !important; }
.social-icon.birdeye { background: linear-gradient(145deg, #ffb400, #cc8f00) !important; }
.social-icon.reviewsio { background: linear-gradient(145deg, #C5EBD9, #FFF900) !important; }
.social-icon.phone { background: linear-gradient(135deg, #6f0bb3, #0dcaf0) !important; }
.social-icon.contact { background: linear-gradient(135deg, #007bff, #00c6ff) !important; }
.social-icon.wordpress { background: linear-gradient(45deg, #21759b, #1e73be, #74b9ef) !important; } /* WordPress gradient */