/* ==========================================================
   BEYOND THE CURB MEDIA — MASTER STYLESHEET (Optimized)
   ----------------------------------------------------------
   Author: Jeremy Neely
   Purpose: Cleaned, documented, and efficient version of site CSS
   Notes:
     - All previous functionality and animations retained
     - All color values standardized to project palette
     - Redundant and overridden rules removed
     - Structure ordered for maintainability
=========================================================== */

/* ==========================================================
   1. ROOT VARIABLES & GLOBAL RESETS
=========================================================== */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --gold: #CDA349;
  --light-gray: #f8f8f8;
}

/* Universal reset — ensures consistent spacing and sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global text, background, and base line-height */
body {
  font-family: 'Poppins', sans-serif;
  background: var(--black);
  color: var(--white);
  line-height: 1.6;
}

img,
video {
  max-width: 100%;
  display: block;
}

/* ==========================================================
   2. UTILITY CLASSES
=========================================================== */
.dark-section { background: var(--black); color: var(--white); }
.light-section { background: var(--white); color: var(--black); }
.light-gray-section { background: var(--light-gray); color: var(--black); }
.gold-text { color: var(--gold); font-weight: 600; }

/* ==========================================================
   PAGE-SPECIFIC LAYOUT PADDING
   ----------------------------------------------------------
   These replace the global section padding rule.
   Apply manually per page as needed.
=========================================================== */

/* Default sitewide spacing for home (index.html) */
.home-section {
  padding: 6rem 8%;
}

/* Compact spacing for portfolio sections */
.portfolio-section {
  padding: 0;
}

/* Wider readable spacing for info pages (quote, contact, terms, privacy) */
.info-section {
  padding: 8rem 10%;
}

/* Centered section titles */
.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--gold);
  text-align: center;
}

/* Decorative divider between sections */
.section-divider {
  width: 90%;
  height: 2px;
  background-color: var(--gold);
  opacity: 0.4;
  margin: 0 auto;
  transition: opacity 0.5s ease;
}
.section-divider:hover { opacity: 0.6; }

/* ==========================================================
   3. NAVIGATION BAR (Dynamic + Mobile Responsive)
=========================================================== */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: var(--black);
  padding: 1rem 3rem;
  height: 80px;
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Shrinks when user scrolls */
nav.shrink {
  height: 60px;
  padding: 0.5rem 3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
}

/* Logo text (if used) */
nav .logo {
  color: var(--white);
  font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Navigation links container */
nav ul.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto; /* push links to the right */
}

/* Link styling */
nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}
nav a:hover,
nav a.active { color: var(--gold); }

/* ========== Hamburger menu (mobile toggle) ========== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 21px;
  cursor: pointer;
  z-index: 1101;
}
.hamburger span {
  height: 3px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Transform hamburger into X when active */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ========== Mobile Menu (slide-down behavior) ========== */
@media (max-width: 1024px) {
  .hamburger { display: flex; margin-left: auto; }

  nav ul.nav-links {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--black);
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 2rem;
    padding-top: 2rem;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  nav ul.nav-links.show {
    transform: translateY(0);
    opacity: 1;
  }

  nav.shrink ul.nav-links {
    top: 60px;
    height: calc(100vh - 60px);
  }
}

/* ==========================================================
   4. HERO SECTION (Video or Background Image)
=========================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 475px;
  overflow: hidden;
}

/* ==========================================================
   HERO BACKGROUND (Video and Image) — 75% WIDTH ALIGNMENT
   Matches section divider width and maintains aspect ratio
=========================================================== */
.hero video,
.hero > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: auto;
  object-fit: contain;     /* preserve aspect ratio, no cropping */
  z-index: 0;
}


/* Semi-transparent overlay for readability */
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

/* Centered hero text content */
.hero-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
  color: var(--white);
  max-width: none; /* allows the banner to grow to full 75vw */
}

/* Corrected Banner Sizing */
.hero-banner {
  position: relative;
  width: 75vw;          /* 75% of viewport width */
  height: auto;         /* maintain aspect ratio */
  max-width: 1000px;    /* safety cap for large screens */
  display: block;
  margin: 0 auto 1.5rem auto;
  object-fit: contain;
}

/* Hero buttons layout */
.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Primary and outline button styles */
.btn, .btn-outline {
  padding: 0.8rem 1.6rem;
  border-radius: 2rem;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn { background: var(--gold); color: var(--black); }
.btn:hover { transform: scale(1.05); }
.btn-outline { border: 2px solid var(--gold); color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--black); }

/* ==========================================================
   PORTFOLIO PAGE — HERO + SLIDESHOW GAP FIX (MOBILE)
   ----------------------------------------------------------
   Ensures no extra padding/margin reappears below 1024px.
=========================================================== */
@media (max-width: 1024px) {
  .portfolio-hero,
  .portfolio-slider {
    margin: 0 !important;
    padding: 0 !important;
  }

  .portfolio-slider,
  .portfolio-slider *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .portfolio-slider h2,
  .portfolio-slider p {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ========== Mobile adjustments ========== */
@media (max-width: 768px) {
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 60vh; /* enough for image + content but not full screen */
    padding: 2rem 0;
    .btn,

    /* Slimmer, smaller buttons on mobile */
  .btn,
  .btn-outline {
    width: 60%;
    max-width: 150px;
    font-size: 0.8rem;
    padding: 0.45rem 1rem;
    margin: 0.5rem auto;
  }

  }

  .hero video,
  .hero > img {
    width: 100%;
    height: auto;
  }

  /* Keep text and banner overlaying the hero background */
  .hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    text-align: center;
    margin: 0 auto;
  }

  .hero-banner {
    width: 90vw;
    max-width: none;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn,
  .btn-outline {
    width: 80%;
    max-width: 280px;
    margin: 0.5rem auto;
  }

@media (max-width: 480px) {
  .portfolio-hero .hero-text p {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* show only 4 lines */
    line-clamp: 4; /* standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================
   PORTFOLIO PAGE — HERO TO SLIDESHOW TRANSITION
=========================================================== */

.portfolio-hero,
.portfolio-slider,
.photo-grid {
  margin: 0;
  padding: 0;
}

/* black border separator */
.portfolio-slider {
  border-top: 3px solid rgba(0, 0, 0, 0.7); 
}

}

/* Extra internal spacing fix for portfolio slider */
.portfolio-slider,
.portfolio-slider *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.portfolio-slider h2,
.portfolio-slider p {
  margin-top: 0;
  padding-top: 0;
}

/* --- Slider Navigation Buttons --- */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0, 0, 0, 0.5);
  color: #cda349;
  font-size: 2.5rem;
  border: none;
  cursor: pointer;
  padding: 0.3em 0.5em;
  border-radius: 5px;
  transition: background 0.3s ease;
}
.slide-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
.slide-btn.prev { left: 15px; }
.slide-btn.next { right: 15px; }

/* Keeps buttons visible over images */
.slider-wrapper {
  position: relative;
  overflow: hidden;
}

/* ==========================================================
   5. WHY CHOOSE US SECTION
=========================================================== */
.why-choose {
  background: var(--black);
  color: var(--white);
  padding: 6rem 8%;
  text-align: center;
}
.why-choose .section-title {
  color: var(--gold);
  margin-bottom: 3rem;
  font-size: 2rem;
}

/* Card grid layout */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  justify-items: center;
}

/* Individual feature card */
.why-card {
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  max-width: 300px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.why-card img {
  width: 80px;
  margin-bottom: 1.25rem;
  transition: transform 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}
.why-card:hover img {
  transform: scale(1.07);
  filter: brightness(1.15);
  box-shadow: 0 0 15px 3px rgba(205, 163, 73, 0.35);
}
.why-card h3 { color: var(--gold); margin-bottom: 0.75rem; }
.why-card p { color: var(--white); font-size: 0.9rem; line-height: 1.5; }

/* ==========================================================
   6. BEFORE / AFTER SLIDER (Mousemove Interactive Version)
=========================================================== */
.before-after-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 2rem auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--black);
  cursor: ew-resize;
}

/* ==========================================================
   BEFORE / AFTER SLIDER HEADINGS
   (Centers and enhances "Virtual Staging" / "Twilight Conversion")
=========================================================== */
.slider-container h3.gold-text {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 1rem;
  text-transform: uppercase;
  position: relative;
}

/* Add a subtle glowing underline accent */
.slider-container h3.gold-text::after {
  content: "";
  display: block;
  width: 360px;
  height: 3px;
  background: var(--gold);
  margin: 0.5rem auto 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(205, 163, 73, 0.6);
}

/* Layered before/after images */
.before-after-wrapper img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.before-after-wrapper .after {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s linear;
}

/* Vertical gold divider */
.before-after-wrapper::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--divider-left, 50%);
  width: 2px;
  background: var(--gold);
  z-index: 3;
  pointer-events: none;
}

/* Hidden label fades out after drag */
.before-after-wrapper::after {
  content: "Drag to compare";
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  color: var(--gold);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity 0.3s ease;
}
.before-after-wrapper.hide-label::after { opacity: 0; }

/* ==========================================================
   PORTFOLIO HERO SECTION
=========================================================== */
/* Limit hero text width only on portfolio page */
.portfolio-hero .hero-text p {
  max-width: 60%;
  margin: 1rem auto 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .portfolio-hero .hero-text p {
    max-width: 90%;
    font-size: 0.95rem;
  }
}

/* ==========================================================
   PORTFOLIO PAGE — HERO CUSTOMIZATION
   ----------------------------------------------------------
   Applies only to the .portfolio-hero section.
   Darkens the background, enhances text contrast,
   and adds a cinematic glow to the heading.
=========================================================== */

.portfolio-hero .overlay {
  background: rgba(0, 0, 0, 0.55); /* darker overlay only for portfolio hero */
}

.portfolio-hero .hero-text h1 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9),
               0 0 8px rgba(0, 0, 0, 0.7); /* deep outer glow */
}

.portfolio-hero .hero-text p {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), /* subtle readability boost */
               0 0 8px rgba(0, 0, 0, 0.7); /* deep outer glow */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .portfolio-hero {
    min-height: 80vh; /* allow extra height for longer text */
    padding: 3rem 0;
  }

  .portfolio-hero .hero-text p {
    max-width: 90%;
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .portfolio-hero .hero-text {
    top: 45%; /* recenter text slightly higher */
    transform: translate(-50%, -45%);
  }
}

/* ==========================================================
   PORTFOLIO PAGE — SPACING REFINEMENTS
   ----------------------------------------------------------
   Remove extra padding between hero and slideshow.
=========================================================== */
.portfolio-hero {
  margin-bottom: 0;
  padding-bottom: 0;
}

.portfolio-slider {
  margin-top: 0;
  padding-top: 0;
}

.portfolio-slider img {
  width: 100%;
  height: 50vh;         /* or 400px for a fixed height */
  object-fit: cover;    /* crops top/bottom evenly */
}


/* ==========================================================
   7. REELS GRID (Portfolio / Video Section)
=========================================================== */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.reel-item video {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.3s;
}
.reel-item:hover video { transform: scale(1.03); }

/* Animated “Coming Soon” placeholder */
.coming-soon-image {
  width: 50%;
  max-width: 450px;
  animation: slideLeftRight 6s ease-in-out infinite alternate;
}
@keyframes slideLeftRight {
  0% { transform: translateX(-10px); }
  100% { transform: translateX(215px); }
}

/* ==========================================================
   PORTFOLIO SLIDER
=========================================================== */
.portfolio-slider {
  text-align: center;
  padding: 4rem 0;
}
.slider-container {
  position: relative;
  width: 80%;
  max-width: 900px;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 10px;
}
.slider-track {
  display: flex;
  transition: transform 0.6s ease;
}
.slider-track img {
  width: 100%;
  flex-shrink: 0;
  border-radius: 10px;
}
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: var(--gold);
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 50%;
  transition: background 0.3s;
}
.slide-btn:hover { background: rgba(205,163,73,0.7); }
.slide-btn.prev { left: 10px; }
.slide-btn.next { right: 10px; }
.slide-btn { z-index: 5; }  /* ensures visibility above images */

@media (max-width: 768px) {
  .slider-container { width: 95%; }
  .slide-btn { font-size: 1.5rem; }
}

/* ==========================================================
   PORTFOLIO PHOTO GRID
=========================================================== */
.photo-grid {
  padding: 2rem 8%;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.grid-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.grid-container img:hover {
  transform: scale(1.04);
  opacity: 0.9;
}

/* ==========================================================
   8. SERVICES GRID
=========================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: var(--black);
  padding: 2rem;
  border-radius: 12px;
  transition: transform 0.3s;
  text-align: center;
}
.service-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}
.service-card:hover img { transform: scale(1.03); }
.service-card h3 { color: var(--gold); margin-bottom: 0.75rem; }

/* ==========================================================
   9. FOOTER (Dynamic Footer Component)
=========================================================== */
footer {
  background: var(--black);
  color: var(--white);
  padding: 4rem 8%;
  border-top: 1px solid var(--black);
  animation: fadeInFooter 0.8s ease both;
}

/* Layout grid for footer content */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-content h3 {
  color: var(--gold);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-content ul { list-style: none; padding: 0; }
.footer-content a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-content a:hover { color: var(--gold); }

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid var(--black);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p { font-size: 0.9rem; margin: 0; }

/* Social icons */
.social-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.social-icons a img {
  width: 36px;
  height: 36px;
  filter: brightness(0) saturate(100%) invert(70%) sepia(32%) saturate(693%) hue-rotate(8deg) brightness(94%) contrast(87%);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.social-icons a:hover img {
  transform: scale(1.15);
  filter: brightness(0) saturate(100%) invert(88%) sepia(70%) saturate(900%) hue-rotate(15deg) brightness(105%) contrast(95%);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  footer { padding: 3rem 5%; }
  .footer-content { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .footer-content { grid-template-columns: 1fr; text-align: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }
}

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


/* ==========================================================
   GLOBAL ALIGNMENT FIX — Prevent horizontal shift and gap
=========================================================== */
html, body {
  overflow-x: hidden;
}

.hero {
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
}

.hero video,
.hero > img {
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  object-fit: contain;
}

/*@media (max-width: 1024px) {
  section {
    outline: 2px solid red !important;
  }
  .portfolio-hero * {
    outline: 1px dashed lime !important;
  }
  .portfolio-slider * {
    outline: 1px dashed cyan !important;
  }
}*/

/* =========================================================
   PORTFOLIO PAGE — Beyond The Curb Media
   ========================================================= */

/* --- Hero Padding Fix --- */
.hero.portfolio-hero.no-padding {
  margin: 0;
  padding: 0;
}
.hero.portfolio-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Slider Section --- */
.portfolio-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #000;
}

.slider-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-track {
  display: flex;
  width: auto; /* adjust to # of slides */
  /*animation: slideLock 18s infinite ease-in-out;*/
  transition: transform 1s ease-in-out;

}

.slide-track img {
  width: 100%;
  max-height: 80vh;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  flex-shrink: 0;
  display: block;
}

/* ==========================================================
   KEN BURNS EFFECT (Cinematic Zoom + Pan)
   Applies to each slide image during its visible duration
========================================================== */
.slide-track img {
  width: 100%;
  max-height: 80vh;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  flex-shrink: 0;
  display: block;
  animation: kenBurns 12s ease-in-out infinite alternate;
  transform-origin: center center;
}

/* Subtle zoom and pan motion */
@keyframes kenBurns {
  0% {
    transform: scale(1.0) translate(0, 0);
  }
  50% {
    transform: scale(1.05) translate(1%, -1%);
  }
  100% {
    transform: scale(1.1) translate(-1%, 1%);
  }
}



/* --- Section Headings --- */
.portfolio-heading {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #CDA349;
  margin: 4rem 0 2rem;
}

/* --- Gallery & Reels Shared Styles --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 90%;
  margin: 0 auto 5rem;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background-color: #111;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .portfolio-heading {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
  }
}

/* --- Optional Visual Harmony --- */
.dark-section {
  background-color: #000;
  color: #fff;
}