/* ============================================================
   DUA BOOK — Main Stylesheet  (Home.css)
   Author   : Dua Book Team
   Version  : 1.0.0
   
   TABLE OF CONTENTS
   ─────────────────
   01. Custom Font Face
   02. Global / Reset
   03. Navbar
   04. Mobile Sidebar (Offcanvas)
   05. Hero Section
   06. About Section
   07. Features Section
   08. Sneak Peek Section
   09. Purchase Options Section
   10. Testimonials Section
   11. Blog Section
   12. Partner Projects Section
   13. Footer
   14. Shared Utilities
   15. Responsive — Tablet (≤ 991px)
   16. Responsive — Mobile (≤ 767px)
   ============================================================ */


/* ============================================================
   01. CUSTOM FONT FACE
   ─ Local decorative font used for section headings.
   ============================================================ */

@font-face {
  font-family: "WhiteAngelica";
  src: url("font/WhiteAngelica.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/* ============================================================
   02. GLOBAL / RESET
   ============================================================ */

a {
  text-decoration: none;
}


/* ============================================================
   03. NAVBAR
   ─ Sticky top navigation bar with logo, links, and social icons.
   ============================================================ */

.navbar {
  background-color: #e4dad6;
  border-bottom: 1px solid #ede6db;
  padding: 16px 40px;
}

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

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

/* Nav link styles */
.nav-link {
  font-family: Manrope, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #3d3d3d !important;
  transition: color 0.2s;
  padding: 0 !important;
}

.nav-link:hover,
.nav-link.active {
  color: #996a3c !important;
}

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

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

/* Hamburger button */
.navbar-toggler {
  border: none;
  padding: 4px 6px;
}

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


/* ============================================================
   04. MOBILE SIDEBAR (OFFCANVAS)
   ─ 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: #ffffff;
  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: #3d3d3d;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}

.sidebar__close-btn:hover {
  color: #996a3c;
}

/* 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, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #3b4a5a;
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid #afafaf;
  transition: color 0.2s;
}

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

.sidebar__nav-list li a:hover {
  color: #996a3c;
}

/* 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;
  color: #3d3d3d;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s;
}

.sidebar__social-item:hover {
  color: #996a3c;
}

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


/* ============================================================
   05. HERO SECTION
   ─ Full-width section with headline, copy, CTA, and book image.
   ============================================================ */

/* Gradient background wrapper — shared with About + Features */
.gradient-wrapper {
  background: linear-gradient(180deg, #e4dad6 10%, #ffffff 42.42%);
}

/* Decorative logo images (absolutely positioned, desktop only) */
.deco__logo-left {
  position: absolute;
  left: 0;
  top: 450px;
}

.deco__logo-left img {
  width: 580px;
}

.deco__logo-right {
  position: absolute;
  right: 0;
  top: 440%;
}

.deco__logo-right img {
  width: 580px;
}

/* Hero layout */
.hero-section {
  padding: 40px 40px;
  overflow: hidden;
  position: relative;
  z-index: 4;
}

/* Headline — gradient text */
.hero-section h1 {
  font-family: Playfair Display;
  font-weight: 800;
  font-size: 46px;
  line-height: 60px;
  letter-spacing: 0%;
  background: linear-gradient(to right, #334155, #475569, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Decorative script word ("Duas") */
.hero-section h1 span {
  font-family: WhiteAngelica;
  font-weight: 400;
  color: #996a3c !important;
  background: none !important;
  -webkit-text-fill-color: #996a3c;
}

.hero-section p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #000000;
  margin-top: 20px;
  margin-bottom: 34px;
}

/* Primary CTA button */
.hero__cta-btn {
  background: linear-gradient(90deg, #5c6c85 0%, #8e99a5 100%);
  font-family: Poppins;
  font-weight: 600;
  font-size: 16px;
  line-height: 50px;
  letter-spacing: 0%;
  text-align: center;
  padding: 12px 28px;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}


/* ============================================================
   06. ABOUT SECTION
   ─ Centred bordered card with mission statement.
   ============================================================ */

.about-section {
  padding: 50px 40px;
  z-index: 4;
  position: relative;
}

/* Inner card */
.about__card {
  background: radial-gradient(
      114.87% 113.36% at 40.95% -10.45%,
      #ffffff 32.81%,
      #f2f2f2 97.64%
  );
  padding: 40px 80px;
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
  border: 1.09px solid #996a3c;
  box-shadow: 1.7px 5.1px 11.89px 0px #0000000f;
  border-radius: 16px;
}

.about__card h2 {
  font-family: Playfair Display;
  font-weight: 800;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.about__card p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  text-align: center;
  color: #000000;
}


/* ============================================================
   07. FEATURES SECTION
   ─ Responsive 3-column grid of feature cards.
   ============================================================ */

.features-section {
  padding: 50px 40px;
  z-index: 4;
  position: relative;
}

/* Section heading — gradient text */
.features-section h2 {
  font-family: Playfair Display;
  font-weight: 800;
  font-size: 36px;
  line-height: 60px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

/* Decorative script word in heading */
.features-section h2 span {
  font-family: WhiteAngelica;
  font-weight: 400;
  color: #996a3c !important;
  background: none !important;
  -webkit-text-fill-color: #996a3c;
}

.features__subtitle {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  text-align: center;
  margin-top: 20px;
  color: #582c00;
}

/* Features card grid container */
.features-section .row {
  padding: 0;
  max-width: 1046px;
  row-gap: 30px;
  justify-content: center;
  margin-top: 52px;
}

/* Individual feature card */
.feature-card {
  background: linear-gradient(
    149.36deg,
    rgba(220, 190, 160, 0.3) 13.56%,
    rgba(220, 190, 160, 0.3) 107.99%
  );
  border: 1px solid #582c00;
  border-radius: 8px;
  padding: 20px 26px;
  height: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
  background-image: url(./Images/Group\ 50\ \(1\).png);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: -4.35px 4.35px 15.24px 0px #0000000f;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(44, 36, 22, 0.1);
}

.feature-card h5 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  color: #432302;
  margin-bottom: 14px;
}

.feature-card p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0%;
  text-align: center;
  color: #000000;
  margin: 0;
}


/* ============================================================
   08. SNEAK PEEK SECTION
   ─ Two-column layout: chapter list (left) + animated GIF (right).
   ============================================================ */

.sneak-peek-section {
  padding: 80px 40px;
}

/* Section heading — gradient text */
.sneak-peek-section h2 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 34px;
}

/* Script word in heading */
.sneak-peek-section h2 span {
  font-weight: 100 !important;
  color: #6b4723 !important;
  background: none !important;
  -webkit-text-fill-color: #6b4723;
}

.sneak-peek-section p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #000000;
}

/* Chapter list */
.sneak-peek-section ul {
  list-style: none;
  padding: 0;
  margin: 22px 0;
}

.sneak-peek-section ul li {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #000000;
  padding: 6px 0 6px 22px;
  position: relative;
}

/* Custom bullet dot */
.sneak-peek-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: black;
}

.sneak-peek-section ul li strong {
  color: black;
}

/* GIF / image wrapper */
.sneak-peek__gif-wrapper {
  padding: 0 20px;
}

.sneak-peek__gif-wrapper img {
  border-radius: 20px;
}


/* ============================================================
   09. PURCHASE OPTIONS SECTION
   ─ Three product format cards (Kindle, Digital, Print).
   ============================================================ */

.purchase-section {
  padding: 50px 40px;
  position: relative;
  z-index: 4;
}

.purchase-section .container {
  max-width: 1090px;
}

/* Section header */
.purchase__header h2 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 44px;
  line-height: 56px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.purchase__header p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0%;
  text-align: center;
  margin-top: 22px;
  color: #000000;
}

/* Individual product card */
.purchase-card {
  margin-top: 40px;
}

/* Card image container */
.purchase-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

.purchase-card__image img {
  border-radius: 20px;
  min-height: 320px;
}

.purchase-card__image img:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(44, 36, 22, 0.11);
}

/* Card text body */
.purchase-card__body {
  padding: 34px 16px 0;
}

.purchase-card__body h5 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0%;
  text-align: center;
  color: #000000;
}

.purchase-card__body p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  text-align: center;
  margin-top: 16px !important;
  color: black;
}


/* ============================================================
   10. TESTIMONIALS SECTION
   ─ Bootstrap carousel with two review cards per slide.
   ============================================================ */

.testimonials-section {
  background-color: #e4e4e4;
  padding: 60px 40px 40px;
  margin-top: 36px;
}

.testimonials-section .container {
  max-width: 1020px;
}

/* Section heading */
.testimonials-section h2 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0%;
  text-align: center;
}

/* Carousel spacing */
.carousel.slide {
  padding: 40px 0 80px;
}

/* Individual testimonial card */
.testimonials-section .carousel-inner .card {
  border: 1.09px solid #5e6e86;
  box-shadow: 1.7px 5.1px 11.89px 0px #00000013;
  border-radius: 8px;
  padding: 38px 36px 30px;
  position: relative;
  background: #ffffff;
}

/* Opening quotation mark icon */
.testimonial__quote-icon {
  position: absolute;
  top: -18px;
  left: 14px;
}

/* Review copy */
.card p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #3d3d3d;
  margin-bottom: 0 !important;
}

.card strong {
  display: block;
  margin-top: 10px;
  color: #222;
  margin-bottom: 0 !important;
}

/* Carousel indicator dots */
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #aaa;
  border: none;
  opacity: 1;
  margin-top: 50px;
}

.carousel-indicators .active {
  background-color: #64738a;
}

/* Carousel arrow buttons */
.carousel-control-prev,
.carousel-control-next {
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1.5px solid #64738a;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}

.carousel-control-prev {
  left: -10px;
}

.carousel-control-next {
  right: -10px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background: #64738a;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) sepia(1) saturate(5) hue-rotate(190deg);
  width: 18px;
  height: 18px;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  filter: brightness(10);
}

/* Slide inner padding */
.testimonials__slide-inner {
  padding: 20px 50px 10px;
}


/* ============================================================
   11. BLOG SECTION
   ─ Grid of blog cards with a "Check More / Show Less" toggle.
   ============================================================ */

.blog-section {
  padding: 100px 40px;
}

/* Section heading */
.blog__section-title {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 44px;
  line-height: 56px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

/* Script word in heading */
.blog__section-title span {
  font-family: WhiteAngelica;
  font-weight: 400;
  color: #996a3c !important;
  background: none !important;
  -webkit-text-fill-color: #996a3c;
}

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

.blog-section .container .row .col-lg-4 {
  padding: 36px 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: Playfair Display;
  font-weight: 700;
  font-size: 19px;
  line-height: 26px;
  letter-spacing: 0%;
  text-align: center;
  color: black;
}

/* Toggle button wrapper */
.blog__toggle-btn-wrapper {
  margin-top: 46px;
}

/* Outlined gold-toned toggle button */
.btn-outline-gold {
  border: 1px solid #5c6c85;
  color: #000000;
  font-family: Poppins;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  text-align: center;
  padding: 14px 30px;
  background-color: transparent;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s;
}

.btn-outline-gold:hover {
  border: 1px solid #5c6c85;
  color: white;
  background-color: #5c6c85;
}

/* Extra blog cards — hidden by default */
.blog-card--hidden {
  display: none;
}

/* Visible state with fade-in animation */
.blog-card--visible {
  display: block;
  animation: fadeInUp 0.4s ease forwards;
}

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


/* ============================================================
   12. PARTNER PROJECTS SECTION
   ─ Section with links to external partner websites.
   ============================================================ */

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

/* Section header */
.partner__header h2 {
  font-family: Playfair Display;
  font-weight: 700;
  font-size: 44px;
  line-height: 48px;
  letter-spacing: 0%;
  background: linear-gradient(90deg, #64738a 34.29%, #939da8 80.22%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

/* Script word in heading */
.partner__header h2 span {
  font-family: WhiteAngelica;
  font-weight: 400;
  color: #996a3c !important;
  background: none !important;
  -webkit-text-fill-color: #996a3c;
}

.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: 50px;
}

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

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

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


/* ============================================================
   13. FOOTER
   ─ Logo, horizontal divider, and copyright notice.
   ============================================================ */

.site-footer {
  background-color: #e4dad6;
  padding: 50px 40px 30px;
  border-top: 1px solid #ede6db;
}

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

.footer__logo img {
  width: 260px;
}

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

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


/* ============================================================
   14. SHARED UTILITIES
   ─ Reusable ornament / section-header pattern (unused inline
     but kept for reference).
   ============================================================ */

.section-header .ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.section-header .ornament-line {
  width: 40px;
  height: 1px;
  background: var(--sand);
}

.section-header .ornament-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}


/* ============================================================
   15. RESPONSIVE — TABLET (≤ 991px)
   ============================================================ */

@media (max-width: 991.98px) {
  /* Tablet-specific overrides can be added here as needed */
}


/* ============================================================
   16. RESPONSIVE — MOBILE (≤ 767px)
   ─ Adjusts padding, font sizes, layouts, and hides elements
     not suited to small screens.
   ============================================================ */

@media (max-width: 767px) {

  /* ── Navbar ── */
  .navbar {
    background-color: #e4dad6;
    border-bottom: 1px solid #ede6db;
    padding: 15px 10px;
  }

  .navbar-brand img {
    width: 220px;
    margin-top: 4px;
  }

  /* ── Gradient wrapper ── */
  .gradient-wrapper {
    background: linear-gradient(180deg, #e4dad6 10%, #ffffff 30.42%);
  }

  /* ── Hero ── */
  .hero-section {
    padding: 40px 15px;
  }

  .hero-section .container .row {
    flex-direction: column-reverse;
    gap: 38px;
  }

  .hero-section h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .hero-section p {
    font-size: 15px;
    line-height: 24px;
    margin-top: 18px;
    margin-bottom: 30px;
  }

  .hero__image-col {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .hero-section .col-12 img {
    max-width: 360px !important;
  }

  /* ── About ── */
  .about-section {
    padding: 36px 15px;
    z-index: 4;
    position: relative;
  }

  .about__card {
    padding: 40px 26px;
    max-width: 1020px;
  }

  .about__card h2 {
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 20px;
  }

  .about__card p {
    font-size: 14px;
    line-height: 24px;
  }

  /* ── Features ── */
  .features-section {
    padding: 45px 15px;
  }

  .features-section h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .features__subtitle {
    font-size: 15px;
    line-height: 24px;
    margin-top: 26px;
  }

  .features-section .row {
    padding: 0;
    max-width: 1046px;
    row-gap: 30px;
    justify-content: center;
    margin-top: 52px;
  }

  .feature-card {
    padding: 20px;
    height: 100%;
  }

  .feature-card h5 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .feature-card p {
    font-size: 14px;
    line-height: 22px;
  }

  /* ── Sneak Peek ── */
  .sneak-peek-section {
    padding: 40px 18px;
  }

  .sneak-peek-section h2 {
    font-size: 32px;
    line-height: 42px;
    margin-bottom: 34px;
    text-align: center;
  }

  .sneak-peek-section p {
    font-size: 15px;
    line-height: 24px;
  }

  .sneak-peek-section ul {
    padding: 0;
    margin: 22px 0;
  }

  .sneak-peek-section ul li {
    font-size: 15px;
    line-height: 24px;
    padding: 6px 0 6px 18px;
  }

  .sneak-peek-section ul li::before {
    left: 0;
    top: 15px;
    width: 7px;
    height: 7px;
  }

  .sneak-peek__gif-wrapper {
    padding: 0;
    margin-bottom: 30px;
  }

  /* ── Purchase Options ── */
  .purchase-section {
    padding: 40px 15px;
  }

  .purchase__header h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .purchase__header p {
    font-size: 16px;
    line-height: 25px;
    margin-top: 18px;
  }

  .purchase-card {
    margin-top: 40px;
  }

  .purchase-card__image img {
    border-radius: 20px;
    min-height: 300px;
  }

  .purchase-card__body {
    padding: 26px 16px 0;
  }

  .purchase-card__body h5 {
    font-size: 24px;
    line-height: 32px;
  }

  .purchase-card__body p {
    font-size: 15px;
    line-height: 24px;
    margin-top: 12px !important;
  }

  /* ── Testimonials ── */
  .testimonials-section {
    padding: 40px 15px 34px;
    margin-top: 24px;
  }

  .testimonials-section h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .testimonials__slide-inner {
    padding: 20px 10px 10px;
  }

  .carousel.slide {
    padding: 26px 0 56px;
  }

  /* On mobile show only the first card (second is hidden) */
  .testimonials__slide-inner .row .col-12:nth-child(2) {
    display: none !important;
  }

  .testimonials__slide-inner .row .col-12:nth-child(1) {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Hide carousel arrows on mobile */
  .carousel-control-prev,
  .carousel-control-next {
    display: none !important;
  }

  .testimonials-section .carousel-inner .card {
    padding: 36px 24px 24px;
  }

  .card p {
    font-size: 15px;
    line-height: 23px;
  }

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

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

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

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

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

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

  .blog__toggle-btn-wrapper {
    margin-top: 46px;
  }

  .btn-outline-gold {
    font-size: 16px;
    line-height: 26px;
    padding: 14px 30px;
  }

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

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

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

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

  .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: 88%;
  }

  .footer__logo img {
    width: 220px;
  }

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

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

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


/* ── Hide decorative side logos on mobile ── */
@media (max-width: 767.98px) {
  .deco__logo-left,
  .deco__logo-right {
    display: none !important;
  }
}