/* ============================================================
   DUA AFTER PRAYER — Main Stylesheet  (home.css)
   Author   : Dua After Prayer Team
   Version  : 1.0.0

   TABLE OF CONTENTS
   ─────────────────
   01. Global / Reset
   02. Navbar
   03. Mobile Sidebar (Offcanvas)
   04. Hero Section
   05. Why Dua Matters Section
   06. About This Collection Section
   07. Available Languages Section
   08. Language Image Popup
   09. Download Options Section
   10. Blog Section
   11. Partner Projects Section
   12. Footer
   13. Responsive — Mobile (≤ 767px)
   ============================================================ */


/* ============================================================
   01. GLOBAL / RESET
   ============================================================ */

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}


/* ============================================================
   02. NAVBAR
   ─ Full-width black bar with logo, nav links, and social icons.
   ============================================================ */

.navbar {
  background-color: black;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.162);
}

.navbar-brand img {
  width: 76px;
}

/* Desktop nav wrapper — holds links + social icons side by side */
.nav__desktop-wrapper {
  gap: 120px;
}

/* Nav link styles */
.nav-link {
  font-family: Manrope;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0%;
  color: white !important;
  transition: color 0.2s;
  padding: 0 !important;
}

/* Social icon cluster */
.nav__social-icons {
  gap: 16px;
}

.nav__social-icons a img {
  width: 22px;
}

/* Hamburger button — white pill on black bar */
.navbar-toggler {
  border: none;
  padding: 8px;
  border-radius: 4px;
  background-color: white;
}

.navbar-toggler:focus {
  box-shadow: none;
}


/* ============================================================
   03. MOBILE SIDEBAR (OFFCANVAS)
   ─ Dark-themed sidebar matching the black navbar aesthetic.
   ─ Slides in from the right on mobile breakpoints.
   ============================================================ */

/* Dark backdrop overlay */
.sidebar__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1040;
  transition: opacity 0.3s;
}

.sidebar__overlay.active {
  display: block;
}

/* Sidebar panel */
.sidebar__panel {
  position: fixed;
  top: 0;
  right: -100%; /* off-screen by default */
  width: 75%;
  max-width: 300px;
  height: 100vh;
  background: #000000;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  padding: 28px 36px 40px;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.2);
}

.sidebar__panel.open {
  right: 0; /* slide into view */
}

/* Close (×) button — top-right corner */
.sidebar__close-btn {
  position: absolute;
  top: 34px;
  right: 24px;
  background: none;
  border: none;
  font-size: 26px;
  color: white;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}

/* Navigation links list */
.sidebar__nav-list {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar__nav-list li a {
  display: block;
  font-family: Manrope;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: white;
  text-decoration: none;
  padding: 20px 0;
  border-bottom: 1px solid #afafaf;
  transition: color 0.2s;
}

.sidebar__nav-list li:last-child a {
  border-bottom: none;
}

/* Social icons — pushed to the bottom of the panel */
.sidebar__socials {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__social-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: Manrope;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: white;
  transition: color 0.2s;
}

.sidebar__social-item img {
  flex-shrink: 0;
  margin-top: 1px;
  width: 18px;
}


/* ============================================================
   04. HERO SECTION
   ─ Full-viewport mosque background image with a left-to-right
     dark gradient overlay. Left-aligned headline and CTA.
   ============================================================ */

.hero-section {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 0.15) 65%,
      rgba(0, 0, 0, 0) 100%
    ),
    url('./Images/imgi_2_mosque.webp') no-repeat right center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 86px 40px 100px;
}

/* Hero headline */
.hero__content h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 28px;
}

/* Hero descriptive paragraphs */
.hero__content p {
  font-family: Poppins;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  text-align: justify;
  margin-bottom: 14px;
  font-weight: 300;
}

/* Primary CTA button */
.hero__content .btn {
  margin-top: 22px;
  padding: 12px 30px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  text-align: center;
}


/* ============================================================
   05. WHY DUA MATTERS SECTION
   ─ Two-column layout: image (left) + copy and Quranic quotes.
   ============================================================ */

.why-dua {
  padding: 84px 40px;
  background: #ffffff;
}

.why-dua .container {
  max-width: 1020px;
}

/* Image wrapper — hover shadow effect */
.dua__image {
  position: relative;
  border-radius: 14px;
}

.dua__image img {
  border-radius: 14px;
  transition: transform 0.5s ease;
}

/* Drop shadow layer behind the image */
.dua__image::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  z-index: -1;
  transition: all 0.4s ease;
}

/* Hover — subtle zoom + shadow shift */
.dua__image:hover img {
  transform: scale(1.04);
}

.dua__image:hover::after {
  bottom: -18px;
  right: -18px;
  background: rgba(0, 0, 0, 0.15);
}

/* Section heading */
.dua__content h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 42px;
  color: #000000;
  margin-bottom: 20px;
}

/* Body copy */
.dua__main-text {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 28px;
  color: #000000;
  font-weight: 300;
  margin-bottom: 25px;
}

/* Left-bordered quote block */
.dua__quote {
  border-left: 4px solid #000;
  padding-left: 20px;
}

.dua__quote p {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #000000;
  font-weight: 300;
  margin-bottom: 10px;
}


/* ============================================================
   06. ABOUT THIS COLLECTION SECTION
   ─ Background image section with three columns:
     title · vertical divider · description + feature grid.
   ============================================================ */

.about-collection {
  position: relative;
  padding: 84px 40px;
  overflow: hidden;
}

/* Background image layer */
.about-collection::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('./Images/collection.jpg') no-repeat center;
  background-size: cover;
  z-index: 0;
}

/* Keep content above the background */
.about-collection .container {
  position: relative;
  z-index: 2;
}

/* Section title */
.collection__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1.3;
  color: #000;
}

/* Thin vertical divider between title and content */
.collection__divider {
  width: 1px;
  height: 300px;
  background: #000;
}

/* Right-side content wrapper */
.collection__content {
  padding-left: 10px;
}

/* Full-width description paragraph */
.collection__desc {
  font-family: Poppins;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 35px;
  font-weight: 500;
}

/* 2×2 feature items grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 50px;
  place-content: center;
  place-items: center;
}

/* Feature item — black bar accent above text */
.feature-item span {
  display: block;
  width: 50px;
  height: 4px;
  background: #000;
  margin-bottom: 10px;
  border-radius: 4px;
}

.feature-item p {
  font-family: Poppins;
  font-size: 15px;
  line-height: 26px;
  color: #000000;
  max-width: 320px;
}


/* ============================================================
   07. AVAILABLE LANGUAGES SECTION
   ─ 4-column responsive grid of language SVG cards.
   ─ Each card is clickable and opens a full-screen popup.
   ============================================================ */

.languages-section {
  padding: 80px 40px 90px;
  background: #ffffff;
}

/* Section heading */
.languages__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: #000000;
  margin-bottom: 60px;
}

/* Language card */
.lang-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.lang-card:hover {
  transform: translateY(-4px);
  transition: 0.3s ease;
}

/* SVG image container */
.lang-card__img-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #fff;
  padding: 22px 30px;
  overflow: hidden;
  height: 260px;
}

.lang-card__img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Frosted glass label overlay at the bottom of each card */
.lang-card__label {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 14px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(60, 60, 60, 0.85);
  backdrop-filter: blur(6px);
}

/* 
============================================================
   08. LANGUAGE IMAGE POPUP
   ─ Full-screen dark overlay triggered when a language card
     is clicked. Displays the card's SVG at large scale.
   ============================================================ -- */

.lang__popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

/* Popup image */
.lang__popup img {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: 0.3s ease;
}

.lang__popup.show img {
  transform: scale(0.98);
}

/* Close button */
.lang__popup-close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}


/* ============================================================
   09. DOWNLOAD OPTIONS SECTION
   ─ Two download format cards on a dark overlay background.
   ============================================================ */

.download-section {
  position: relative;
  padding: 80px 40px 70px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('./Images/printbg.jpg') no-repeat center;
  background-size: cover;
}

.download-section .container {
  max-width: 960px;
}

/* Section heading */
.download__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 44px;
  color: #fff;
  margin-bottom: 50px;
  letter-spacing: 2px;
}

/* Download card link wrapper */
.download-card {
  text-decoration: none;
  display: block;
}

/* Card image box */
.download-card__image {
  border-radius: 18px;
  padding: 20px;
  transition: 0.3s ease;
  overflow: hidden;
}

.download-card__image img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* Hover — subtle zoom on image */
.download-card:hover .download-card__image img {
  transform: scale(1.04);
}

/* Card label text */
.download-card__label {
  font-family: Montserrat;
  font-weight: 700;
  font-size: 22px;
  line-height: 34px;
  color: white;
  letter-spacing: 0%;
  text-align: center;
  margin-top: 14px;
}


/* ============================================================
   10. BLOG SECTION
   ─ Three latest blog post cards in a responsive grid.
   ============================================================ */

.blog-section {
  padding: 84px 40px 60px;
}

/* Section heading */
.blog__section-title {
  font-family: Montserrat;
  font-weight: 800;
  font-size: 42px;
  line-height: 56px;
  letter-spacing: 0%;
  text-align: center;
  color: #000000;
  text-transform: uppercase;
}

.blog-section .container .row {
  margin-top: 30px;
}

.blog-section .container .row .col-lg-4 {
  padding: 24px 28px 0;
}

/* Blog card image container */
.blog-card__image {
  min-height: 220px;
  max-height: 220px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-card__image img {
  border-radius: 16px;
  object-fit: cover;
  min-width: 100%;
  height: 220px;
}

/* Blog card text body */
.blog-card__body {
  padding: 22px 14px 0;
}

.blog-card__body h3 {
  font-family: Montserrat;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  color: black;
  margin-bottom: 0 !important;
}


/* ============================================================
   11. PARTNER PROJECTS SECTION
   ─ Two external partner link buttons.
   ============================================================ */

.partner-section {
  padding: 70px 40px 80px;
}

/* Section heading */
.partner__header h2 {
  font-family: Montserrat;
  font-weight: 800;
  font-size: 40px;
  line-height: 54px;
  letter-spacing: 0%;
  text-align: center;
  color: black;
}

.partner__header p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 0%;
  text-align: center;
  color: #000000;
  margin-top: 30px;
}

/* Partner link buttons group */
.partner__btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
}

/* Individual partner button */
.partner-btn {
  border: 1px solid black;
  color: black;
  font-family: Poppins;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  padding: 13px 36px;
  background-color: transparent;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
}

.partner-btn:hover {
  border: 1px solid black;
  color: white;
  background-color: black;
}


/* ============================================================
   12. FOOTER
   ─ Black footer with logo, divider, and copyright notice.
   ============================================================ */

.site-footer {
  background-color: black;
  padding: 40px 40px 26px;
  border-top: 1px solid black;
}

.site-footer .container {
  width: 88%;
}

.footer__logo img {
  width: 100px;
}

/* Horizontal rule between logo and copyright */
.footer__divider {
  height: 1px;
  min-width: 100%;
  background-color: white;
  margin-top: 32px;
  margin-bottom: 26px;
}

.site-footer p {
  font-family: Montserrat;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  text-align: center;
  color: white;
}


/* ============================================================
   13. RESPONSIVE — MOBILE (≤ 767px)
   ─ Adjusts padding, font sizes, and layouts for small screens.
   ============================================================ */

@media (max-width: 767px) {

  /* ── Navbar ── */
  .navbar {
    padding: 15px 18px 13px;
  }

  .navbar-brand img {
    width: 70px;
  }

  /* ── Hero ── */
  .hero-section {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0) 100%
      ),
      url('./Images/imgi_2_mosque.webp') no-repeat;
    background-position: 70% center;
    padding: 70px 18px;
  }

  .hero__content h1 {
    font-size: 30px;
    line-height: 42px;
    text-align: left;
  }

  .hero__content p {
    font-size: 15px;
    line-height: 26px;
    text-align: left;
  }

  .hero__content .btn {
    margin-top: 22px;
    display: inline-block;
  }

  /* ── Why Dua Matters ── */
  .why-dua {
    padding: 50px 18px;
  }

  .dua__content {
    margin-top: 16px;
  }

  .dua__content h2 {
    font-size: 29px;
    line-height: 40px;
    margin-bottom: 16px;
  }

  .dua__main-text {
    font-size: 15px;
    line-height: 26px;
  }

  .dua__image img {
    height: 260px;
  }

  /* ── About Collection ── */
  .about-collection {
    padding: 52px 20px;
  }

  .collection__title {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .collection__content {
    padding-left: 0;
  }

  .collection__desc {
    font-size: 16px;
  }

  /* Stack feature items into single column on mobile */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* ── Available Languages ── */
  .languages-section {
    padding: 50px 18px 60px;
  }

  .languages__title {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 36px;
  }

  .lang-card {
    border-radius: 8px;
  }

  .lang-card__label {
    padding: 8px;
  }

  .lang-card__img-box {
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    height: 180px;
  }

  .lang-card__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .lang__popup img {
  transform: scale(0.8);
}

  .lang__popup.show img {
    transform: scale(0.9);
  }

  /* ── Download Options ── */
  .download-section {
    padding: 50px 18px;
  }

  .download__title {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 38px;
  }

  .download-card__image {
    padding: 10px;
  }

  .download-card__label {
    font-size: 20px;
  }

  /* ── Blog ── */
  .blog-section {
    padding: 50px 14px;
  }

  .blog__section-title {
    font-size: 32px;
    line-height: 42px;
  }

  .blog-section .container .row {
    margin-top: -8px;
  }

  .blog-section .container .row .col-lg-4 {
    padding: 44px 18px 0;
  }

  .blog-card__body {
    padding: 20px 10px 0;
  }

  .blog-card__body h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 27px;
  }

  /* ── Partner Projects ── */
  .partner-section {
    padding: 48px 15px 70px;
  }

  .partner__header h2 {
    font-size: 32px;
    line-height: 42px;
  }

  .partner__header p {
    font-size: 15px;
    line-height: 25px;
    margin-top: 26px;
  }

  .partner__btn-group {
    flex-direction: column;
    gap: 20px;
    margin-top: 36px;
  }

  .partner-btn {
    font-size: 16px;
    line-height: 26px;
    padding: 14px 30px;
    min-width: 100%;
  }

  /* ── Footer ── */
  .site-footer {
    padding: 40px 20px 26px;
  }

  .site-footer .container {
    width: 100%;
  }

  .footer__logo img {
    width: 100px;
  }

  .footer__divider {
    margin-top: 30px;
    margin-bottom: 26px;
  }

  .site-footer p {
    font-size: 15px;
    line-height: 24px;
  }

} /* END: @media (max-width: 767px) */