/* islami-elegan visual identity. */


/* 9. Islami Elegan */
.theme-islami-elegan {
    --bs-light: #f0f7f4;
    --bs-white: #ffffff;
    --bs-dark: #123524;
    --bs-gray-100: #e2efea;
    color: var(--bs-dark);
}


/* 4. Islami Elegan: Swinging Lanterns & Moon */
.lantern {
    position: absolute;
    top: -30px;
    font-size: 4rem;
    color: rgba(18, 53, 36, 0.4);
    transform-origin: top center;
    animation: swingLantern 3.5s infinite ease-in-out alternate;
}

.lantern.left { left: 15%; animation-delay: 0s; }

.lantern.right { right: 15%; animation-delay: -1.5s; font-size: 5rem; }

.lantern::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 60vh;
    background: linear-gradient(to bottom, rgba(18, 53, 36, 0.3), transparent);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}


.theme-islami-elegan .bg-light-dark,
.theme-islami-elegan .bg-white-black {
    background-image:
        radial-gradient(circle at 50% 0, rgba(12, 112, 78, .14), transparent 21rem),
        linear-gradient(135deg, rgba(18, 53, 36, .055) 25%, transparent 25%),
        linear-gradient(225deg, rgba(18, 53, 36, .045) 25%, transparent 25%),
        linear-gradient(45deg, rgba(18, 53, 36, .04) 25%, transparent 25%),
        linear-gradient(315deg, rgba(18, 53, 36, .04) 25%, transparent 25%);
    background-size: auto, 34px 34px, 34px 34px, 34px 34px, 34px 34px;
}


.theme-islami-elegan .bg-theme-auto,
.theme-islami-elegan .border.rounded-5.shadow,
.theme-islami-elegan .border.rounded-pill.shadow {
    background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(240, 247, 244, .86)) !important;
    border-color: rgba(18, 83, 58, .25) !important;
    box-shadow: 0 18px 42px rgba(18, 53, 36, .12) !important;
}


.theme-islami-elegan .font-esthetic,
.theme-islami-elegan .text-theme-auto {
    color: #0f6b4a !important;
}


.islamic-arch-pattern {
    position: absolute;
    inset: 0;
    opacity: .12;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 44%, rgba(18, 83, 58, .65) 45% 47%, transparent 48%) 0 0 / 96px 120px;
    animation: motifSlideX 48s linear infinite;
}


.islamic-star-ring {
    position: absolute;
    top: 12%;
    left: 50%;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(18, 83, 58, .18);
    transform: translateX(-50%) rotate(45deg);
    animation: rotateCircle 34s linear infinite;
}


.islamic-star-ring::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(18, 83, 58, .18);
}


/* 9. Islami Elegan */
.theme-islami-elegan { font-family: "Amiri", serif; }

.theme-islami-elegan h1, .theme-islami-elegan h2, .theme-islami-elegan h3, .theme-islami-elegan h4, .theme-islami-elegan h5, .theme-islami-elegan h6 { font-family: "Aref Ruqaa", serif; }

.theme-islami-elegan .font-esthetic { font-family: "Great Vibes", cursive; }


body.theme-islami-elegan #theme-ornaments::before {
    opacity: .24;
    background:
        linear-gradient(45deg, transparent 46%, rgba(18, 53, 36, .12) 48%, transparent 50%),
        linear-gradient(-45deg, transparent 46%, rgba(18, 53, 36, .1) 48%, transparent 50%);
    background-size: 92px 92px;
    animation: islamicPatternSlide 30s linear infinite;
}


body.theme-islami-elegan #theme-ornaments::after {
    opacity: .2;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 0 34%, rgba(18, 53, 36, .14) 35% 36%, transparent 37%);
    background-size: 150px 92px;
    animation: archPatternFloat 24s ease-in-out infinite alternate;
}