/* =================================================================
   Main Stylesheet for Nur al-Anbiya
   Naya Theme: Serene Teal & Beige
   ================================================================= */

/* ======== Base & Typography ======== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: #fdfaf6; /* Soft Beige */
    color: #333333;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

/* ======== Navigation Bar ======== */
.navbar {
    transition: background-color 0.4s ease-in-out, padding 0.4s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: transparent;
}

.navbar.scrolled {
    background-color: #ffffff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    font-size: 1.6rem;
    color: #008080 !important; /* Teal */
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    width: 40px;
    margin-right: 12px;
    border-radius: 50%;
    border: 2px solid #008080;
}

/* Nav links color change based on scroll */
.nav-link {
    color: #ffffff; /* White on hero */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

.navbar.scrolled .nav-link {
    color: #333333; /* Dark text on white navbar */
}

.nav-link:hover, .nav-link.active {
    color: #c5a47e; /* Gold on hover/active */
}
.navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link.active {
    color: #008080; /* Teal on hover/active when scrolled */
}


/* ======== Dropdown Menu Styling ======== */
.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border-radius: 0.5rem;
    margin-top: 10px;
}

.dropdown-item {
    color: #333333;
    padding: 0.7rem 1.2rem;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #008080;
    color: #ffffff;
}

.dropdown-divider {
    border-color: #f0f0f0;
}


/* ======== Hero Section ======== */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0 15px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/jpeg;base64,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') no-repeat center center/cover;
}

.hero-content {
    max-width: 800px;
}

.hero-section h1 {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    font-size: 4rem;
}

.hero-section .lead {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
}

/* Hero Text Animation */
.animated-title { animation: fadeInDown 1s ease-out forwards; }
.animated-lead { animation: fadeInUp 1s ease-out 0.5s forwards; opacity: 0; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ======== Custom Buttons ======== */
.btn-custom {
    background-color: #c5a47e; /* Gold */
    border: 2px solid #c5a47e;
    color: #ffffff;
    padding: 14px 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.4s ease;
    border-radius: 50px;
}

.btn-custom:hover {
    background-color: #008080; /* Teal */
    border-color: #008080;
    color: #ffffff;
    transform: translateY(-3px);
}

/* ======== Featured Prophets & Gallery Section ======== */
.prophets-gallery-section {
    background-color: #fdfaf6; /* Soft Beige */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.prophet-card {
    border: none;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0; /* Start hidden for animation */
    animation: fadeIn-card 0.7s ease-out forwards;
}

/* This is the hover effect you wanted */
.prophet-card:hover {
    transform: scale(1.03) translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* Staggered animation delays - UPDATED SELECTORS FOR RELIABILITY */
.prophets-gallery-section .row > div:nth-child(1) .prophet-card { animation-delay: 0.1s; }
.prophets-gallery-section .row > div:nth-child(2) .prophet-card { animation-delay: 0.2s; }
.prophets-gallery-section .row > div:nth-child(3) .prophet-card { animation-delay: 0.3s; }
.prophets-gallery-section .row > div:nth-child(4) .prophet-card { animation-delay: 0.4s; }
.prophets-gallery-section .row > div:nth-child(5) .prophet-card { animation-delay: 0.5s; }
.prophets-gallery-section .row > div:nth-child(6) .prophet-card { animation-delay: 0.6s; }
.prophets-gallery-section .row > div:nth-child(7) .prophet-card { animation-delay: 0.7s; }
.prophets-gallery-section .row > div:nth-child(8) .prophet-card { animation-delay: 0.8s; }
.prophets-gallery-section .row > div:nth-child(9) .prophet-card { animation-delay: 0.9s; }
.prophets-gallery-section .row > div:nth-child(10) .prophet-card { animation-delay: 1.0s; }

@keyframes fadeIn-card { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.prophet-card .card-img-top {
    height: 220px;
    object-fit: cover;
}

.prophet-card .card-body {
    padding: 1.75rem;
}

.prophet-card .card-title {
    color: #333333;
}

.btn-outline-custom {
    color: #008080;
    border-color: #008080;
    border-width: 2px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-radius: 50px;
    padding: 8px 20px;
}

.btn-outline-custom:hover {
    background-color: #008080;
    color: #ffffff;
}

/* ======== Footer ======== */
.footer-section {
    background-color: #333333; /* Dark Charcoal */
    color: rgba(255, 255, 255, 0.7);
}

.footer-section p {
    margin: 0;
}

/* ======== CSS FOR CONTENT PAGES (like prophets.html) ======== */
.page-header {
    padding: 7rem 0;
    margin-top: 0;
    text-align: center;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
}

.page-header h1 {
    color: #333333;
    font-size: 3.5rem;
}
.page-header .lead {
    font-size: 1.25rem;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
}
/* ======== Styling for Images within Content Pages ======== */
.content-page-image {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #eee;
}


/* ======== 99 Names Page Styling ======== */
.arabic-name {
    font-family: 'Amiri', serif;
    font-size: 1.75rem;
    color: #008080; /* Deep Teal */
    text-align: right;
}

.list-group-item {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: transparent;
}

/* Styling for images inside content pages */
.content-page-image {
    max-width: 45%; /* Controls the size of the image relative to the column */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    padding: 5px;
    background-color: #fff;
}

/* Styling for images inside content pages */
.content-page-image {
    max-width: 45%; /* Controls the size of the image */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    padding: 5px;
    background-color: #fff;
}