/*# sourceMappingURL=custom.min.css.map */
/* ***********************
HERO SECTION
*********************** */
.caption-hero{
    bottom: 10rem;
}

/* ***********************
NAVIGATION SECTION
*********************** */
/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove extra spacing */
}

/* Make the toggle look active on hover */
.nav-item.dropdown:hover > .nav-link {
    color: #000;
}

.contact-link{
    font-size: 16px;
}

.contact-link:hover{
    color: var(--vz-church-accent) !important;
}


.mx-auto-right{
    margin-right: auto !important;
}

/* ***********************
GIVING BUTTON
*********************** */
.giving-btn {
    position: relative;
    overflow: hidden;
}

/* container for individual stars */
.giving-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%; /* left half */
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

/* show container on hover */
.giving-btn:hover::before {
    opacity: 1;
}

/* create individual stars with ::after pseudo-elements */
.giving-btn span.star {
    position: absolute;
    font-size: 12px;
    background: linear-gradient(90deg, #FFD700, #FFB300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.2;
    pointer-events: none;
    animation: twinkle 1.6s infinite;
}

/* twinkle animation */
@keyframes twinkle {
    0%   { opacity: 0.2; transform: scale(0.9); }
    50%  { opacity: 1;   transform: scale(1.15); }
    100% { opacity: 0.2; transform: scale(0.9); }
}

/* ***********************
OVERIDE CONTAINER SIZE
*********************** */
.navbar .container {
    max-width: 95% !important;
}
.hero-section .container {
    max-width: 100% !important;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* optional depending on what you want */
}


/* ***********************
upcoming events and ongoing projects card designs
*********************** */
.project-card {
    /* Light sky blue gradient */
    background: linear-gradient(135deg, #EBF8FF, #ffffff);
}

.events-card {
    /* Light sky blue gradient */
    background: linear-gradient(135deg, #ffffff, #EBF8FF);
}


/* ***********************
Social media hover
*********************** */
/** instagram */
.instagram-hover {
    background: #e7e7e7; /* default background */
    transition: background 0.4s ease, transform 0.3s ease;
}

.instagram-hover:hover {
    background: linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    );
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(214, 41, 118, 0.5);
}

/** whatsapp */
.whatsapp-hover {
    background: #e7e7e7; /* default background */
    transition: background 0.4s ease, transform 0.3s ease;
}

.whatsapp-hover:hover {
    background: linear-gradient(
        135deg,
        #25d366,
        #128c7e
    );
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
}

/** tiktok */
.tiktok-hover {
    background: #e7e7e7; /* default background */
    transition: background 0.4s ease, transform 0.3s ease;
}

.tiktok-hover:hover {
    background: linear-gradient(
        135deg,
        #25f4ee,  /* TikTok cyan */
        #fe2c55   /* TikTok pink */
    );
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(254, 44, 85, 0.5);
}

/** facebook */
.facebook-hover {
    background: #e7e7e7; /* default background */
    transition: background 0.4s ease, transform 0.3s ease;
}

.facebook-hover:hover {
    background: linear-gradient(
        135deg,
        #1877f2,  /* Facebook blue */
        #145dbf   /* Darker Facebook blue */
    );
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(24, 119, 242, 0.5);
}

/** youtube */
.youtube-hover {
    background: #e7e7e7; /* default background */
    transition: background 0.4s ease, transform 0.3s ease;
}

.youtube-hover:hover {
    background: linear-gradient(
        135deg,
        #ff0000,  /* YouTube red */
        #cc0000   /* darker red */
    );
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
}