* {
         font-family: 'Cairo', sans-serif;
    }

    html {
         scroll-behavior: smooth;
    }


    @keyframes twinkle {

         0%,
         100% {
              opacity: 0.3;
              transform: scale(0.8);
         }

         50% {
              opacity: 1;
              transform: scale(1.2);
         }
    }

    .star-anim {
         animation: twinkle 3s infinite ease-in-out;
    }

    .star-2 {
         animation-delay: 1s;
    }

    .star-3 {
         animation-delay: 2s;
    }

    @keyframes slow-rotate {
         from {
              transform: rotate(0deg);
         }

         to {
              transform: rotate(360deg);
         }
    }

    .rotate-glow {
         animation: slow-rotate 20s linear infinite;
    }


    /* ===== ISLAMIC PATTERNS ===== */

    /* SVG Geometric pattern background */
    .islamic-pattern {
         background-color: #2C221C;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23C4A484' stroke-width='0.4' stroke-opacity='0.18'%3E%3Cpolygon points='40,2 52,14 64,2 64,26 76,26 64,38 76,50 64,50 64,74 52,62 40,74 28,62 16,74 16,50 4,50 16,38 4,26 16,26 16,2 28,14'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cline x1='40' y1='2' x2='40' y2='78'/%3E%3Cline x1='2' y1='40' x2='78' y2='40'/%3E%3Cline x1='10' y1='10' x2='70' y2='70'/%3E%3Cline x1='70' y1='10' x2='10' y2='70'/%3E%3C/g%3E%3C/svg%3E");
    }

    .islamic-pattern-light {
         background-color: #FCFAF6;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23C4A484' stroke-width='0.4' stroke-opacity='0.15'%3E%3Cpolygon points='40,2 52,14 64,2 64,26 76,26 64,38 76,50 64,50 64,74 52,62 40,74 28,62 16,74 16,50 4,50 16,38 4,26 16,26 16,2 28,14'/%3E%3Ccircle cx='40' cy='40' r='14'/%3E%3Cline x1='40' y1='2' x2='40' y2='78'/%3E%3Cline x1='2' y1='40' x2='78' y2='40'/%3E%3Cline x1='10' y1='10' x2='70' y2='70'/%3E%3Cline x1='70' y1='10' x2='10' y2='70'/%3E%3C/g%3E%3C/svg%3E");
    }

    /* Arch shape top of cards */
    .arch-top {
         clip-path: ellipse(90% 100% at 50% 100%);
    }

    /* Islamic arch border */
    .arch-border {
         border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    }

    /* Gold ornamental divider */
    .ornament-divider {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 12px;
         margin: 12px 0;
    }

    .ornament-divider::before,
    .ornament-divider::after {
         content: '';
         flex: 1;
         max-width: 80px;
         height: 1px;
         background: linear-gradient(to var(--dir, right), transparent, #C4A484);
    }

    .ornament-divider::before {
         --dir: right;
    }

    .ornament-divider::after {
         --dir: left;
    }

    /* Star/diamond shape section header icon */
    .diamond-icon {
         width: 54px;
         height: 54px;
         background: linear-gradient(135deg, #C4A484, #A38465);
         transform: rotate(45deg);
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 8px;
         flex-shrink: 0;
    }

    .diamond-icon i {
         transform: rotate(-45deg);
         color: #fff;
         font-size: 1.3rem;
    }

    /* Card with Islamic arch top accent */
    .islamic-card {
         position: relative;
         background: white;
         border-radius: 0 0 16px 16px;
         overflow: hidden;
         transition: transform .3s ease, box-shadow .3s ease;
    }

    .islamic-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 5px;
         background: linear-gradient(90deg, #3D322A, #C4A484, #3D322A);
    }

    .islamic-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 20px 50px rgba(61, 50, 42, .12);
    }

    /* Medallion shape for stats */
    .medallion {
         width: 110px;
         height: 110px;
         background: radial-gradient(circle at 40% 40%, #5C4E43, #2C221C);
         border: 3px solid #C4A484;
         border-radius: 50%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
         position: relative;
    }

    .medallion::after {
         content: '';
         position: absolute;
         inset: 5px;
         border-radius: 50%;
         border: 1px dashed rgba(196, 164, 132, .4);
    }

    /* Islamic pointed arch for hero */
    .pointed-arch {
         clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    }

    /* Kufic border pattern */
    .kufic-border {
         border: 2px solid transparent;
         background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg, #3D322A 0%, #C4A484 50%, #3D322A 100%) border-box;
    }

    /* Lantern/mosque shape clip */
    .lantern-shape {
         clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    }

    /* Shimmer on gold elements */
    @keyframes shimmer {
         0% {
              background-position: -200% center;
         }

         100% {
              background-position: 200% center;
         }
    }

    .gold-shimmer {
         background: linear-gradient(90deg, #A38465 0%, #C4A484 40%, #FCFAF6 60%, #A38465 100%);
         background-size: 200% auto;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         animation: shimmer 4s linear infinite;
    }

    /* WhatsApp pulse */
    @keyframes wa-pulse {
         0% {
              box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
         }

         70% {
              box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
         }

         100% {
              box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
         }
    }

    .wa-btn {
         animation: wa-pulse 2s infinite;
    }

    /* Scroll reveal */
    .reveal {
         opacity: 0;
         transform: translateY(28px);
         transition: opacity .65s ease, transform .65s ease;
    }

    .reveal.visible {
         opacity: 1;
         transform: translateY(0);
    }

    /* FAQ */
    .faq-body {
         max-height: 0;
         overflow: hidden;
         transition: max-height .35s ease;
    }

    .faq-body.open {
         max-height: 300px;
    }

    .faq-open .faq-icon {
         transform: rotate(45deg);
    }

    .faq-icon {
         transition: transform .3s;
    }

    /* Section title font */
    .title-arabic {
         font-family: 'Cairo', sans-serif;
    }

    /* Rope/tassel ornament */
    .rope-line {
         height: 3px;
         background: repeating-linear-gradient(90deg,
                   #C4A484 0px, #C4A484 6px,
                   transparent 6px, transparent 10px);
         border-radius: 99px;
         width: 80px;
         margin: 8px auto;
    }

    /* 3D Hero Image styling and animations */
    @keyframes float3d {
         0%, 100% {
              transform: translateY(0) rotate(0deg);
         }
         50% {
              transform: translateY(-10px) rotate(0.5deg);
         }
    }

    .hero-img-3d {
         animation: float3d 5s ease-in-out infinite;
         filter: drop-shadow(0 20px 25px rgba(61, 50, 42, 0.15));
         transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
         will-change: transform, filter;
    }

    .hero-img-3d:hover {
         transform: perspective(1000px) scale(1.05) rotateY(-8deg) rotateX(6deg) translateY(-8px);
         filter: drop-shadow(0 35px 35px rgba(61, 50, 42, 0.28));
    }