/* --- Global Theme Settings --- */
:root {
    /* Color Palette */
    --brand-gold: #CCA169;
    --brand-red: #c22b2b;
    --brand-red-10: #c22b2b30;
}

.hero-bg {
    background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)),
        url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
}

.text-brand-gold {
    color: var(--brand-gold);
}

.text-brand-red {
    color: var(--brand-red);
}

.bg-brand-gold {
    background-color: var(--brand-gold);
}

.bg-brand-red {
    background-color: var(--brand-red);
}

.border-brand-red {
    border-color: var(--brand-red-10);
}

.bg-buildings-pattern {
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('./assets/images/buildings.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.subtle-arch-pattern {
    background-color: #ffffff;
    background-image: radial-gradient(#c22b2b08 1px, transparent 1px);
    background-size: 30px 30px;
}

.gradient-brand-gold {
    color: var(--brand-gold);
    background-image: -webkit-linear-gradient(90deg, rgba(237, 218, 194, 1), rgb(188, 155, 94, 1), rgba(237, 218, 194, 1), rgba(191, 148, 92));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-image {
    background-image: url(./assets/images/whiteBackground.webp);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

/* Gold Border with Red Gradient Background */
.gold-border-card {
    border: 2px solid transparent;
    /* First layer is the red background, second layer is the golden border */
    background: linear-gradient(to left, #dc2626, #991b1b) padding-box,
        linear-gradient(90deg, rgba(237, 218, 194, 1), rgb(188, 155, 94, 1), rgba(237, 218, 194, 1), rgba(191, 148, 92)) border-box;
    position: relative;
    transition: all 0.3s ease;
}

/* Gold Hover */
.gold-border-card:hover {
    box-shadow: 0 10px 20px -10px rgba(184, 134, 11, 0.4);
    transform: translateY(-2px);
}

.faded {
    /* אפקט דהייה מלבני מושלם */
    mask-image:
        linear-gradient(to bottom, transparent, black 5%, black 95%, transparent),
        linear-gradient(to right, transparent, black 5%, black 95%, transparent);

    /* שילוב המסכות כדי שיפעלו יחד */
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    /* תמיכה בדפדפני ספארי וכרום ישנים */

    /* גרסת וובקיט לספארי */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent, black 5%, black 95%, transparent),
        linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.faded-y {
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

/* Targets the div inside the group when the group is hovered */
.group:hover .group-hover\:bg-brand-red {
    background-color: var(--brand-red) !important;
}

/* Targets the svg inside the group when the group is hovered */
.group:hover .group-hover\:text-white {
    color: #ffffff !important;
}

@keyframes custom-ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.animate-aura {
    animation: custom-ping 3s infinite;
}