/* ============================================================
   DEOBAND ISLAMIC INSTITUTE
   PREMIUM DESIGN SYSTEM
============================================================ */

/* ============================================================
   LOCAL URDU FONT
============================================================ */

@font-face {
    font-family: 'JameelNoori';
    src: url('../fonts/JameelNooriNastaleeq.ttf')
         format('truetype');

    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   ROOT VARIABLES
============================================================ */

:root {
    --institute: #114b38;
    --institute-dark: #071f17;
    --institute-light: #0a7a54;

    --gold: #D4AF37;
    --gold-light: #ead68a;

    --cream: #faf9f5;
    --white: #ffffff;
    --ink: #17231e;

    --muted: #64748b;

    --border-light: rgba(17, 75, 56, 0.10);
}


/* ============================================================
   GLOBAL RESET
============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

button,
a,
input,
textarea,
select {
    font-family: inherit;
}

a {
    text-decoration: none;
}

::selection {
    background: var(--gold);
    color: var(--institute);
}


/* ============================================================
   RTL / URDU
============================================================ */

[dir="rtl"] body {
    font-family: 'JameelNoori', serif;
}

[dir="rtl"] .latin-font {
    font-family: 'Poppins', sans-serif;
}

[dir="rtl"] .urdu-relaxed {
    font-family: 'JameelNoori', serif;
    line-height: 2.15;
}


/* ============================================================
   PREMIUM HERO BACKGROUND
============================================================ */

.hero-bg {
    position: relative;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(212, 175, 55, 0.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(10, 122, 84, 0.24),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            var(--institute-dark) 0%,
            var(--institute) 55%,
            var(--institute-light) 100%
        );

    background-color: var(--institute);
}


/* ============================================================
   DOT PATTERN
============================================================ */

.pattern {
    background-image:
        radial-gradient(
            rgba(212, 175, 55, 0.10) 1px,
            transparent 1px
        );

    background-size: 28px 28px;
}


/* ============================================================
   GOLD LINE
============================================================ */

.gold-line {
    height: 3px;
    width: 90px;

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


/* ============================================================
   GLASS EFFECT
============================================================ */

.glass {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ============================================================
   SHADOWS
============================================================ */

.premium-shadow {
    box-shadow:
        0 25px 70px rgba(17, 75, 56, 0.14);
}

.gold-shadow {
    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.20);
}


/* ============================================================
   FLOATING DECORATIVE ORBS
============================================================ */

.floating-orb {
    position: absolute;

    border-radius: 999px;

    pointer-events: none;

    filter: blur(1px);
}


/* ============================================================
   SECTION GLOW
============================================================ */

.section-glow {
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 999px;

    background:
        rgba(212, 175, 55, 0.08);

    filter: blur(80px);

    pointer-events: none;
}


/* ============================================================
   PREMIUM CARDS
============================================================ */

.course-card,
.feature-card,
.testimonial-card,
.premium-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* ============================================================
   COURSE CARD
============================================================ */

.course-card:hover {
    transform: translateY(-9px);

    box-shadow:
        0 30px 70px rgba(17, 75, 56, 0.14);

    border-color:
        rgba(212, 175, 55, 0.45);
}


/* ============================================================
   FEATURE CARD
============================================================ */

.feature-card:hover {
    transform: translateY(-6px);
}


/* ============================================================
   FEATURE ICON
============================================================ */

.feature-icon {
    transition:
        all 0.35s ease;
}

.feature-card:hover .feature-icon {
    transform:
        rotate(-5deg)
        scale(1.08);
}


/* ============================================================
   FOUNDER / GREEN VISUAL PANEL
============================================================ */

.founder-photo {
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(212, 175, 55, 0.25),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            var(--institute-light),
            var(--institute)
        );
}


/* ============================================================
   PREMIUM BUTTON
============================================================ */

.btn-premium {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    border-radius: 1rem;

    font-weight: 800;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.btn-premium:hover {
    transform: translateY(-2px);
}


/* ============================================================
   GOLD BUTTON
============================================================ */

.btn-gold {
    background: var(--gold);

    color: var(--institute);

    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.20);
}

.btn-gold:hover {
    background: var(--gold-light);

    color: var(--institute);

    box-shadow:
        0 18px 45px rgba(212, 175, 55, 0.30);
}


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

.mobile-menu {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height 0.35s ease;
}

.mobile-menu.open {
    max-height: 600px;
}


/* ============================================================
   AOS SAFETY
   Content remains visible if AOS JavaScript fails.
============================================================ */

/*
   AOS normally controls visibility through its own CSS.
   We intentionally do NOT hide important page content here.
*/


/* ============================================================
   MOBILE BODY SPACE
   Prevents fixed mobile CTA from covering content.
============================================================ */

@media (max-width: 767px) {

    body {
        padding-bottom: 76px;
    }

}


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

@media (min-width: 768px) {

    body {
        padding-bottom: 0;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}