/*==================================================
 AL FAJR FOUNDATION
 PREMIUM HERO 5.0
 PART 1
==================================================*/

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/amiri/Amiri-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Amiri';
    src: url('../fonts/amiri/Amiri-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('../fonts/jameel-noori/JameelNooriNastaleeq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*==============================
 HERO SECTION
==============================*/
/*====================================================
 MORNING LIGHT SYSTEM
 Premium Hero V6
====================================================*/

.home-hero{

    position:relative;
    overflow:hidden;

}

/*---------------------------
 Golden Sunrise
---------------------------*/

.home-hero::before{

    content:"";

    position:absolute;

    left:-15%;

    top:-20%;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,220,120,.22) 0%,

            rgba(255,210,90,.12) 18%,

            rgba(255,215,100,.04) 42%,

            transparent 75%

        );

    filter:blur(35px);

    animation:

        sunriseGlow 14s ease-in-out infinite;

    pointer-events:none;

}

/*---------------------------
 Light Rays
---------------------------*/

.home-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        repeating-linear-gradient(

            -28deg,

            rgba(255,235,170,.08) 0px,

            rgba(255,235,170,.08) 3px,

            transparent 3px,

            transparent 110px

        );

    opacity:.12;

    animation:

        raysMove 28s linear infinite;

    pointer-events:none;

}
/*====================================================
 Floating Lights
====================================================*/

.hero-light{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.55;

    pointer-events:none;

}

.hero-light.one{

    width:260px;
    height:260px;

    background:#ffe59d;

    left:12%;

    top:18%;

    animation:floatLight1 18s ease-in-out infinite;

}

.hero-light.two{

    width:180px;
    height:180px;

    background:#fff2c4;

    right:8%;

    top:30%;

    animation:floatLight2 22s ease-in-out infinite;

}

.hero-light.three{

    width:220px;
    height:220px;

    background:#fff6da;

    bottom:8%;

    left:45%;

    animation:floatLight3 20s ease-in-out infinite;

}
/*====================================================
 Premium Animation
====================================================*/

@keyframes sunriseGlow{

0%,100%{

transform:

translate(0,0)
scale(1);

opacity:.55;

}

50%{

transform:

translate(35px,20px)
scale(1.08);

opacity:.72;

}

}

@keyframes raysMove{

from{

background-position:0 0;

}

to{

background-position:700px 0;

}

}

@keyframes floatLight1{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-28px);

}

}

@keyframes floatLight2{

0%,100%{

transform:translateX(0);

}

50%{

transform:translateX(-35px);

}

}

@keyframes floatLight3{

0%,100%{

transform:translate(0,0);

}

50%{

transform:translate(18px,-22px);

}

}

.home-hero{

    position:relative;

    overflow:hidden;

    min-height:90vh;

    display:flex;

    align-items:center;

    background:
        radial-gradient(circle at top left,
        rgba(201,162,39,.12),
        transparent 28%),

        radial-gradient(circle at bottom right,
        rgba(7,26,54,.08),
        transparent 35%),

        linear-gradient(
            135deg,
            #fffefc 0%,
            #fbf7ef 45%,
            #f6efe2 100%
        );

}

/*==============================
 BACKGROUND
==============================*/

.hero-background{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.022; /* 2.2% visibility */

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' stroke='%23C9A227' stroke-width='0.8' fill='none'/%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30 Z' stroke='%23C9A227' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23C9A227'/%3E%3C/svg%3E");

    background-repeat: repeat;

}

/*==============================
 OVERLAY
==============================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at center,
        transparent 30%,
        rgba(255,255,255,.25));

    pointer-events:none;

}

/*==============================
 CONTAINER
==============================*/

.hero-container{

    position:relative;

    z-index:5;

    width:min(94%,1400px);

    margin:auto;

    padding-top:140px;

    padding-bottom:90px;

}

/*==============================
 GRID
==============================*/

.hero-grid{

    display:grid;

    grid-template-columns:

        1fr
        0.95fr;

    gap:90px;

    align-items:center;

}

/*==============================
 LEFT
==============================*/

.hero-content{

    max-width:680px;

}

/*==============================
 BADGE
==============================*/

.hero-badge{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:24px;

}

/*==============================
 BRAND
==============================*/

.hero-brand{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-brand-name{

    font-family: 'Inter', sans-serif;

    font-size:.92rem;

    letter-spacing:.4em;

    font-weight:500;

    color:var(--gold);

    text-transform:uppercase;

    opacity:.9;

}
/*==================================================
 PART 2
 HERO TYPOGRAPHY
==================================================*/

/*==============================
 ARABIC HADITH & TRANSLATION
==============================*/
.hadith-container {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(201, 162, 39, 0.12);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 45px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    max-width: 560px;
}

.hadith-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
}

.hadith-ornament {
    width: 26px;
    height: 26px;
    opacity: 0.55;
    flex-shrink: 0;
}

.hero-hadith {
    margin: 0;
    direction: rtl;
    text-align: center;
    font-family: "Amiri", serif;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    line-height: 1.4;
    font-weight: 500;
    color: var(--navy);
}

.hero-urdu {
    margin: 12px 0 6px;
    direction: rtl;
    text-align: center;
    font-family: "Jameel Noori Nastaleeq", serif;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #333333; /* Dark charcoal grey */
    letter-spacing: 0;
}

.urdu-caption {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
}

.hadith-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 15px auto 5px;
}

.hadith-divider .divider-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.3), transparent);
}

.hadith-divider .divider-star {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/*==============================
 MAIN TITLE
==============================*/

#hero-title{

    margin:0 0 24px;

    font-family:

        "Playfair Display",
        serif;

    font-size:clamp(2.8rem,4.5vw,4.5rem);

    line-height:1.15;

    font-weight:700;

    color:var(--navy);

    letter-spacing:-.02em;

}

#hero-title span{

    position:relative;

    color:var(--gold);

}

#hero-title span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:100%;

    height:3px;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

}

/*==============================
 DESCRIPTION
==============================*/

.hero-description{

    max-width:600px;

    margin:0 0 36px;

    font-size:1.08rem;

    line-height:1.8;

    color:var(--muted);

}

/*==============================
 BUTTON AREA
==============================*/

.hero-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 26px; /* equal spacing between CTAs */
    margin-bottom: 75px; /* transition space below row */
}

/* Base button properties for typography sharing */
.hero-actions .btn-primary,
.hero-actions .btn-secondary,
.hero-actions .btn-outline {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px; /* equal height / baseline alignment */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Primary CTA: Support Our Mission */
.hero-actions .btn-primary {
    background: linear-gradient(135deg, #d8b54a, #c49b22);
    color: #071A36 !important;
    border: none;
    min-width: 200px;
    padding: 0 32px;
    border-radius: 99px;
    box-shadow: 0 10px 25px rgba(201, 162, 39, 0.15);
}

.hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(201, 162, 39, 0.28);
    color: #071A36 !important;
}

/* Secondary CTA: Explore Our Work */
.hero-actions .btn-secondary {
    background: transparent;
    border: 2px solid var(--gold);
    color: #071A36 !important; /* Dark navy text */
    min-width: 180px;
    padding: 0 32px;
    border-radius: 99px;
    box-shadow: none;
}

.hero-actions .btn-secondary:hover {
    background: var(--gold);
    color: #ffffff !important; /* White text on hover gold */
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(201, 162, 39, 0.18);
}

/* Tertiary CTA: See Our Impact */
.hero-actions .btn-outline {
    background: transparent;
    border: none;
    color: #071A36 !important;
    min-width: auto;
    padding: 0;
    box-shadow: none;
}

.hero-actions .btn-outline .cta-arrow {
    color: var(--gold);
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.hero-actions .btn-outline:hover {
    background: transparent;
    color: var(--gold) !important;
    transform: none;
}

.hero-actions .btn-outline:hover .cta-arrow {
    transform: translateX(4px);
}




/*==================================================
 PART 3
 HERO IMAGE • FLOATING CARDS • RESPONSIVE
==================================================*/

/*==============================
 RIGHT COLUMN
==============================*/

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==============================
 HERO IMAGE CARD
==============================*/

.hero-image-card{

    position:relative;

    width:min(100%,620px);

    aspect-ratio:4/5;

    overflow:hidden;

    border-radius:34px;

    background:#fff;

    box-shadow: 0 25px 70px rgba(7, 26, 54, 0.18);

    border: 1px solid rgba(201, 162, 39, 0.15);

}

.hero-image-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(7,26,54,.08),
            transparent 45%
        );

    pointer-events:none;

    z-index:2;

}

.hero-image-asset{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    background:#FAF5EB;

    display:block;

    transition:transform .8s ease;

}

.hero-image-card:hover .hero-image-asset{

    transform:scale(1.04);

}

/*==============================
 FLOATING CARDS
==============================*/
.floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 250px;
    padding: 18px 24px;
    border-radius: 20px;
    background: rgba(7, 26, 54, 0.95); /* Deep navy theme */
    border: 1px solid rgba(201, 162, 39, 0.25);
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-card:hover {
    transform: translateY(-5px) scale(1.03);
}

.card-top {
    top: 35px;
    left: -15px;
}

.card-bottom {
    bottom: 45px;
    right: -15px;
}

.floating-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 162, 39, 0.15);
    color: var(--gold);
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 1.5px solid var(--gold);
}

.floating-card-body strong {
    display: block;
    color: #ffffff; /* Contrast on navy */
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.floating-card-body small {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
}

/*==============================
 SCROLL INDICATOR
==============================*/

.scroll-indicator{

    margin-top:70px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:var(--muted);

    font-size:.85rem;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.scroll-arrow{

    font-size:1.4rem;

    color:var(--gold);

    animation:heroBounce 2s infinite;

}

@keyframes heroBounce{

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(8px);

}

}

/*==============================
 HERO ENTRANCE
==============================*/

.hero-content>*{

    opacity:0;

    transform:translateY(22px);

    animation:heroFade .8s forwards;

}

.hero-content>*:nth-child(1){animation-delay:.05s;}
.hero-content>*:nth-child(2){animation-delay:.12s;}
.hero-content>*:nth-child(3){animation-delay:.20s;}
.hero-content>*:nth-child(4){animation-delay:.28s;}
.hero-content>*:nth-child(5){animation-delay:.36s;}
.hero-content>*:nth-child(6){animation-delay:.44s;}
.hero-content>*:nth-child(7){animation-delay:.52s;}

.hero-image-card{

    opacity:0;

    transform:translateX(30px);

    animation:heroImage .9s .35s forwards;

}

@keyframes heroFade{

to{

    opacity:1;

    transform:none;

}

}

@keyframes heroImage{

to{

    opacity:1;

    transform:none;

}

}

/*==============================
 TABLET
==============================*/

@media(max-width:1100px){

.hero-grid{

    grid-template-columns:1fr;

    gap:70px;

}

.hero-content{

    max-width:100%;

    text-align:center;

}

.hero-hadith,
.hero-urdu{

    text-align:center;

}

.hero-badge,
.hero-actions,
.hero-stats{

    justify-content:center;

}

.hero-image-card{

    max-width:560px;

    margin:auto;

}

.card-top{

    left:20px;

}

.card-bottom{

    right:20px;

}

}

/*==============================
 MOBILE
==============================*/

@media(max-width:768px){

.home-hero{

    min-height:auto;

}

.hero-container{

    padding-top:120px;

    padding-bottom:70px;

}

#hero-title{

    font-size:2.6rem;

}

.hero-actions{

    flex-direction:column;
    align-items:stretch;
    gap:16px;

}

.hero-actions .btn-primary,
.hero-actions .btn-secondary,
.hero-actions .btn-outline{

    width:100% !important;
    min-width:auto !important;

}

.floating-card{

    display:none;

}

.hero-image-card{

    aspect-ratio:4/4.7;

}

}

/*==============================
 SCROLL REVEAL ANIMATIONS
==============================*/
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-item {
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-1 { animation-delay: 0.1s; }
.reveal-2 { animation-delay: 0.25s; }
.reveal-3 { animation-delay: 0.4s; }
.reveal-4 { animation-delay: 0.55s; }
.reveal-5 { animation-delay: 0.7s; }
.reveal-6 { animation-delay: 0.85s; }
.reveal-7 { animation-delay: 1.05s; }

/*==================================================
 END OF PREMIUM HERO
==================================================*/