/* =====================================================
   LAMPIN' CLUB - EDITORIAL MAGAZINE STYLE
   Clean, Modern, Human-Centered Design
   ===================================================== */

/* ===== CSS VARIABLES ===== */
:root {
   --bg-deep: #0f0e0d;
   --bg-main: #1a1816;
   --bg-card: #232120;
   --bg-elevated: #2d2a28;
   
   --text-bright: #faf8f5;
   --text-body: #d4d0c9;
   --text-soft: #a8a29e;
   --text-faint: #6b6560;
   
   --accent: #e8b87d;
   --accent-soft: rgba(232, 184, 125, 0.15);
   --accent-glow: rgba(232, 184, 125, 0.08);
   
   --font-serif: 'Instrument Serif', Georgia, serif;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
   
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-full: 9999px;
}

/* ===== RESET & FOUNDATION ===== */
*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--font-sans);
   font-size: 1rem;
   line-height: 1.7;
   background: var(--bg-deep);
   color: var(--text-body);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
   min-height: 100vh;
}

::selection {
   background: var(--accent-soft);
   color: var(--text-bright);
}

::-moz-selection {
   background: var(--accent-soft);
   color: var(--text-bright);
}

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

a {
   color: inherit;
   text-decoration: none;
}

/* ===== NAVIGATION ===== */
.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 1.5rem 2rem;
   background: transparent;
   transition: all 0.4s var(--ease-smooth);
   pointer-events: auto;
}

.navbar.scrolled {
   background: rgba(15, 14, 13, 0.92);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   padding: 1rem 2rem;
   border-bottom: 1px solid rgba(232, 184, 125, 0.1);
}

.navbar .container {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.navbar-brand {
   display: flex;
   align-items: center;
}

.navbar-brand img {
   height: 60px;
   width: auto;
   transition: all 0.3s var(--ease-smooth);
}

.navbar.scrolled .navbar-brand img {
   height: 48px;
}

.nav-links {
   display: flex;
   gap: 2.5rem;
}

.nav-links a {
   font-size: 0.85rem;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-soft);
   transition: color 0.3s var(--ease-smooth);
}

.nav-links a:hover {
   color: var(--accent);
}

/* Navbar burger (mobile) */
.navbar-burger {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 44px;
   height: 44px;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 0;
   z-index: 150;
   margin-left: auto;
   pointer-events: auto;
   -webkit-tap-highlight-color: transparent;
}

.navbar-burger span {
   display: block;
   width: 22px;
   height: 2px;
   background: var(--text-bright);
   margin: 3px 0;
   transition: all 0.3s var(--ease-smooth);
}

.navbar-burger.is-active span:nth-child(1) {
   transform: rotate(45deg) translate(4px, 6px);
}

.navbar-burger.is-active span:nth-child(2) {
   opacity: 0;
}

.navbar-burger.is-active span:nth-child(3) {
   transform: rotate(-45deg) translate(4px, -6px);
}

/* Homepage navbar - hide logo until scrolled */
.navbar-home .navbar-brand {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s var(--ease-smooth);
}

.navbar-home.scrolled .navbar-brand {
   opacity: 1;
   pointer-events: auto;
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
   .navbar-burger {
      display: flex;
   }
   
   .nav-links {
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100vh;
      background: rgba(15, 14, 13, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
      transition: right 0.4s var(--ease-smooth);
      border-left: 1px solid rgba(232, 184, 125, 0.1);
      z-index: 999;
   }
   
   .nav-links.is-active {
      right: 0;
   }
   
   .nav-links a {
      font-size: 1.1rem;
      letter-spacing: 0.1em;
   }
   
   /* Hide desktop nav-links margin on burger */
   .navbar-burger {
      margin-left: auto;
   }
}

/* ===== HERO SECTION ===== */
.hero {
   height: 85vh;
   min-height: 600px;
   position: relative;
   display: flex;
   align-items: flex-end;
   overflow: hidden;
}

.hero-image {
   position: absolute;
   inset: 0;
}

.hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.7);
}

.hero-image::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to top,
      var(--bg-deep) 0%,
      rgba(15, 14, 13, 0.6) 40%,
      transparent 70%
   );
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 900px;
   padding: 4rem 3rem;
}

.category-tag {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 1.5rem;
   padding: 0.5rem 1rem;
   background: var(--accent-soft);
   border-radius: var(--radius-full);
}

.hero-title {
   font-family: var(--font-serif);
   font-size: clamp(2.5rem, 6vw, 4.5rem);
   font-weight: 400;
   line-height: 1.1;
   color: var(--text-bright);
   margin-bottom: 1.5rem;
   letter-spacing: -0.02em;
}

.hero-meta {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   color: var(--text-soft);
   font-size: 0.9rem;
}

.author {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

.author-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent), #c09968);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: var(--bg-deep);
   font-size: 0.9rem;
}

.divider-dot {
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--text-faint);
}

/* ===== ARTICLE CONTENT ===== */
.article {
   max-width: 720px;
   margin: 0 auto;
   padding: 5rem 2rem 6rem;
}

.lead {
   font-family: var(--font-serif);
   font-size: 1.4rem;
   font-style: italic;
   line-height: 1.7;
   color: var(--text-body);
   margin-bottom: 3rem;
   padding-bottom: 3rem;
   border-bottom: 1px solid rgba(232, 184, 125, 0.15);
}

.article h2 {
   font-family: var(--font-serif);
   font-size: 2rem;
   font-weight: 400;
   color: var(--text-bright);
   margin: 3.5rem 0 1.5rem;
   letter-spacing: -0.01em;
}

.article p {
   font-size: 1.1rem;
   line-height: 1.85;
   margin-bottom: 1.75rem;
   color: var(--text-body);
}

.article strong {
   color: var(--text-bright);
   font-weight: 600;
}

.article em {
   font-style: italic;
}

/* ===== BLOCKQUOTE ===== */
blockquote {
   position: relative;
   margin: 3rem 0;
   padding: 2rem 2.5rem;
   background: var(--bg-card);
   border-radius: var(--radius-lg);
   border-left: 3px solid var(--accent);
}

blockquote p {
   font-family: var(--font-serif);
   font-size: 1.3rem;
   font-style: italic;
   color: var(--text-bright);
   margin: 0;
   line-height: 1.6;
}

/* ===== CALLOUT BOX ===== */
.callout {
   background: var(--accent-glow);
   border: 1px solid rgba(232, 184, 125, 0.2);
   border-radius: var(--radius-lg);
   padding: 2rem;
   margin: 2.5rem 0;
}

.callout-label {
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 0.75rem;
}

.callout p {
   margin: 0;
   color: var(--text-body);
}

/* ===== CLOSING SECTION ===== */
.closing {
   margin-top: 4rem;
   padding-top: 3rem;
   border-top: 1px solid rgba(232, 184, 125, 0.15);
   text-align: center;
}

.closing p {
   font-family: var(--font-serif);
   font-size: 1.25rem;
   font-style: italic;
   color: var(--text-soft);
}

/* ===== BACK LINK ===== */
.back-link {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   margin-top: 4rem;
   font-size: 0.9rem;
   font-weight: 500;
   color: var(--text-soft);
   transition: all 0.3s var(--ease-smooth);
}

.back-link:hover {
   color: var(--accent);
   gap: 0.75rem;
}

.back-link svg {
   width: 18px;
   height: 18px;
}

/* ===== FOOTER ===== */
.footer {
   padding: 4rem 2rem;
   text-align: center;
   border-top: 1px solid rgba(232, 184, 125, 0.08);
}

.footer p {
   font-size: 0.85rem;
   color: var(--text-faint);
}

.scroll-top {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 2rem;
   cursor: pointer;
   transition: all 0.3s var(--ease-smooth);
   color: var(--text-soft);
   font-size: 1.25rem;
}

.scroll-top:hover {
   background: var(--accent-soft);
   border-color: var(--accent);
   color: var(--accent);
   transform: translateY(-3px);
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 768px) {
   .navbar {
      padding: 1rem 1.25rem;
   }
   
   .navbar-brand img {
      height: 48px;
   }
   
   .navbar.scrolled .navbar-brand img {
      height: 40px;
   }
   
   .nav-links {
      gap: 1.5rem;
   }
   
   .nav-links a {
      font-size: 0.75rem;
   }
   
   .hero {
      height: 70vh;
      min-height: 500px;
   }
   
   .hero-content {
      padding: 2.5rem 1.5rem;
   }
   
   .hero-title {
      font-size: clamp(2rem, 8vw, 3rem);
   }
   
   .hero-meta {
      flex-wrap: wrap;
      gap: 1rem;
   }
   
   .article {
      padding: 3rem 1.5rem 4rem;
   }
   
   .lead {
      font-size: 1.2rem;
   }
   
   .article h2 {
      font-size: 1.6rem;
      margin: 2.5rem 0 1.25rem;
   }
   
   .article p {
      font-size: 1rem;
   }
   
   blockquote {
      padding: 1.5rem;
      margin: 2rem 0;
   }
   
   blockquote p {
      font-size: 1.1rem;
   }
   
   .callout {
      padding: 1.5rem;
      margin: 2rem 0;
   }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 480px) {
   .navbar {
      padding: 0.875rem 1rem;
   }
   
   .navbar-brand img {
      height: 40px;
   }
   
   .nav-links {
      gap: 1rem;
   }
   
   .nav-links a {
      font-size: 0.7rem;
      letter-spacing: 0.05em;
   }
   
   .hero {
      height: 60vh;
      min-height: 450px;
   }
   
   .hero-content {
      padding: 2rem 1.25rem;
   }
   
   .category-tag {
      font-size: 0.65rem;
      padding: 0.4rem 0.75rem;
   }
   
   .hero-title {
      font-size: 1.75rem;
      margin-bottom: 1rem;
   }
   
   .hero-meta {
      font-size: 0.8rem;
   }
   
   .author-avatar {
      width: 32px;
      height: 32px;
      font-size: 0.8rem;
   }
   
   .article {
      padding: 2.5rem 1.25rem 3rem;
   }
   
   .lead {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      padding-bottom: 2rem;
   }
   
   .article h2 {
      font-size: 1.4rem;
      margin: 2rem 0 1rem;
   }
   
   .article p {
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
   }
   
   blockquote {
      padding: 1.25rem;
   }
   
   blockquote p {
      font-size: 1rem;
   }
   
   .callout {
      padding: 1.25rem;
   }
   
   .closing {
      margin-top: 3rem;
      padding-top: 2rem;
   }
   
   .closing p {
      font-size: 1.1rem;
   }
   
   .back-link {
      margin-top: 3rem;
   }
   
   .footer {
      padding: 3rem 1.25rem;
   }
   
   .scroll-top {
      width: 40px;
      height: 40px;
      font-size: 1rem;
   }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
   
   html {
      scroll-behavior: auto;
   }
}

@media (prefers-contrast: high) {
   :root {
      --text-bright: #ffffff;
      --text-body: #f0f0f0;
      --text-soft: #d0d0d0;
   }
}

/* Focus states for accessibility */
a:focus,
button:focus {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}


/* =====================================================
   HOMEPAGE STYLES
   ===================================================== */

/* ===== LAYOUT UTILITIES ===== */
.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
}

.container-narrow {
   max-width: 800px;
}

.mx-auto {
   margin-left: auto;
   margin-right: auto;
}

.block {
   display: block;
}

.text-center {
   text-align: center;
}

.text-xl {
   font-size: 1.25rem;
   line-height: 1.8;
}

/* ===== GRID SYSTEM ===== */
.grid {
   display: grid;
   gap: 2rem;
}

.grid-cols-3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid-2-1 {
   grid-template-columns: 2fr 1fr;
}

.grid-1-2 {
   grid-template-columns: 1fr 2fr;
}

.gap-lg {
   gap: 2rem;
}

/* Image card sizes */
.image-tall {
   min-height: 280px;
}

.image-medium {
   min-height: 240px;
}

/* Section header spacing */
.section-header {
   margin-bottom: 4rem;
}

/* Grid row spacing */
.grid + .grid {
   margin-top: 4rem;
}

/* ===== FLEXBOX UTILITIES ===== */
.flex {
   display: flex;
}

.flex-1 {
   flex: 1;
}

.items-start {
   align-items: flex-start;
}

.items-center {
   align-items: center;
}

.justify-between {
   justify-content: space-between;
}

/* ===== SPACING ===== */
.section {
   padding: 6rem 0;
}

/* ===== HOMEPAGE HERO ===== */
.hero.bg-image {
   position: relative;
   height: 100vh;
   min-height: 700px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.hero.bg-image::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: url('../img/lampin.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   z-index: 0;
}

.hero.bg-image::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at center, transparent 0%, rgba(15, 14, 13, 0.3) 100%);
   z-index: 1;
}

.hero-background {
   position: absolute;
   inset: 0;
   z-index: 2;
}

.hero.bg-image .hero-content {
   position: relative;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   width: 100%;
   padding: 0;
   max-width: none;
}

.hero-text {
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero-text img {
   max-width: 400px;
   width: 80vw;
   height: auto;
   filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.4));
   animation: float 6s ease-in-out infinite;
}

@keyframes float {
   0%, 100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-12px);
   }
}

/* ===== STARRY SKY ANIMATION ===== */
.starry-sky {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
   z-index: 1;
}

.star {
   position: absolute;
   background: var(--text-body);
   border-radius: 50%;
   animation: twinkle 4s infinite ease-in-out;
   opacity: 0.3;
}

@keyframes twinkle {
   0%, 100% {
      opacity: 0.3;
      transform: scale(1);
   }
   50% {
      opacity: 0.9;
      transform: scale(1.5);
   }
}

/* ===== MOBILE NAVIGATION ===== */
.navbar-menu {
   display: flex;
   align-items: center;
}

.navbar-end {
   display: flex;
   gap: 2rem;
}

.navbar-item {
   display: flex;
   align-items: center;
}

.navbar-link {
   font-size: 0.85rem;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-soft);
   padding: 0.75rem 1.25rem;
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   transition: all 0.3s var(--ease-smooth);
}

.navbar-link:hover {
   color: var(--text-bright);
   background: var(--accent-glow);
   border-color: rgba(232, 184, 125, 0.2);
}

.navbar-burger {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.15);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: all 0.3s var(--ease-smooth);
}

.navbar-burger span {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--text-soft);
   transition: all 0.3s var(--ease-smooth);
}

.navbar-burger:hover {
   background: var(--accent-glow);
   border-color: var(--accent);
}

.navbar-burger:hover span {
   background: var(--accent);
}

/* ===== FEATURE CARDS ===== */
.feature-card {
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.1);
   border-radius: var(--radius-lg);
   padding: 2rem;
   height: 100%;
   transition: all 0.3s var(--ease-smooth);
}

.feature-card:hover {
   border-color: rgba(232, 184, 125, 0.25);
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.feature-card h3 {
   font-family: var(--font-serif);
   font-size: 1.5rem;
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 1rem;
}

.feature-card p {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-body);
   margin: 0;
}

/* ===== MEDIA LAYOUT ===== */
.media {
   display: flex;
   align-items: flex-start;
   gap: 1.5rem;
}

.media-content {
   flex: 1;
}

.media-right {
   flex-shrink: 0;
}

.svg-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
}

.svg-icon svg {
   opacity: 0.6;
   transition: all 0.3s var(--ease-smooth);
}

.feature-card:hover .svg-icon svg,
.future-card:hover .svg-icon svg {
   opacity: 0.9;
   transform: scale(1.05);
}

/* ===== IMAGE CARDS ===== */
.image-card {
   display: block;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 1px solid rgba(232, 184, 125, 0.1);
   transition: all 0.3s var(--ease-smooth);
   position: relative;
}

.image-card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to top,
      rgba(15, 14, 13, 0.5) 0%,
      transparent 50%
   );
   opacity: 0;
   transition: opacity 0.3s var(--ease-smooth);
}

.image-card:hover {
   border-color: rgba(232, 184, 125, 0.3);
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.image-card:hover::after {
   opacity: 1;
}

/* Background image classes */
.bg-image {
   background-image: url('../img/lampin.webp');
}

.bg-image-bench {
   background-image: url('../img/city.webp');
}

.bg-image-summer {
   background-image: url('../img/benchlamp.webp');
}

.bg-image-home {
   background-image: url('../img/home.jpg');
}

.bg-image-winter {
   background-image: url('../img/winterlamp.png');
}

/* ===== STATS SECTION ===== */
.stats-section {
   margin-top: 4rem;
   padding: 3rem;
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.1);
   border-radius: var(--radius-lg);
}

.stat-value {
   font-family: var(--font-serif);
   font-size: 4rem;
   font-weight: 400;
   color: var(--accent);
   line-height: 1;
   margin-bottom: 0.5rem;
}

.stat-label {
   font-size: 0.9rem;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--text-soft);
   margin: 0;
}

/* ===== FUTURE PLANS SECTION ===== */
.future-header {
   font-family: var(--font-serif);
   font-size: 2.5rem;
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 0;
}

.future-card {
   background: var(--accent-glow);
   border: 1px solid rgba(232, 184, 125, 0.15);
   border-radius: var(--radius-lg);
   padding: 2rem;
   height: 100%;
   transition: all 0.3s var(--ease-smooth);
}

.future-card:hover {
   border-color: rgba(232, 184, 125, 0.35);
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(232, 184, 125, 0.1);
}

.future-card h3 {
   font-family: var(--font-serif);
   font-size: 1.4rem;
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 1rem;
}

.future-card p {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-body);
   margin: 0;
}

/* ===== CONTENT SECTION ===== */
.content {
   max-width: 700px;
   margin: 0 auto;
}

.content p {
   color: var(--text-body);
   line-height: 1.8;
}

/* ===== NEWSLETTER (MailerLite) ===== */
.ml-embedded {
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.15);
   border-radius: var(--radius-lg);
   padding: 3rem;
}

/* ===== FOOTER ADJUSTMENTS ===== */
.footer .scroll-top a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: inherit;
}

.footer .copyright {
   margin: 0;
}


/* =====================================================
   HOMEPAGE RESPONSIVE STYLES
   ===================================================== */

@media (max-width: 1024px) {
   .grid-cols-3 {
      grid-template-columns: repeat(2, 1fr);
   }
   
   .grid-2-1,
   .grid-1-2 {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {
   .section {
      padding: 4rem 0;
   }
   
   .container {
      padding: 0 1.5rem;
   }
   
   /* Mobile Navigation */
   .navbar-burger {
      display: flex;
   }
   
   .navbar-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 1rem;
      right: 1rem;
      background: rgba(15, 14, 13, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(232, 184, 125, 0.15);
      border-radius: var(--radius-lg);
      padding: 1rem;
      margin-top: 0.5rem;
   }
   
   .navbar-menu.is-active {
      display: block;
   }
   
   .navbar-end {
      flex-direction: column;
      gap: 0.5rem;
   }
   
   .navbar-link {
      display: block;
      width: 100%;
      text-align: center;
      padding: 1rem;
   }
   
   .navbar-burger.is-active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
   }
   
   .navbar-burger.is-active span:nth-child(2) {
      opacity: 0;
   }
   
   .navbar-burger.is-active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
   }
   
   /* Grid adjustments */
   .grid-cols-3,
   .grid-2-1,
   .grid-1-2 {
      grid-template-columns: 1fr !important;
   }
   
   /* Hero adjustments */
   .hero.bg-image {
      height: 100vh;
      min-height: 500px;
   }
   
   .hero-text img {
      max-width: 280px;
   }
   
   /* Cards */
   .feature-card,
   .future-card {
      padding: 1.5rem;
   }
   
   .image-card.image-tall,
   .image-card.image-medium {
      min-height: 200px;
   }
   
   .grid + .grid {
      margin-top: 2.5rem;
   }
   
   /* Stats */
   .stats-section {
      padding: 2rem;
   }
   
   .stats-section .grid-cols-3 {
      gap: 1.5rem;
   }
   
   .stat-value {
      font-size: 3rem;
   }
   
   .stat-label {
      font-size: 0.8rem;
   }
   
   /* Future section */
   .future-header {
      font-size: 2rem;
   }
}

@media (max-width: 480px) {
   .section {
      padding: 3rem 0;
   }
   
   .container {
      padding: 0 1.25rem;
   }
   
   .hero.bg-image {
      height: 100vh;
      min-height: 450px;
   }
   
   .hero-text img {
      max-width: 220px;
   }
   
   .text-xl {
      font-size: 1.1rem;
   }
   
   .feature-card h3,
   .future-card h3 {
      font-size: 1.25rem;
   }
   
   .feature-card p,
   .future-card p {
      font-size: 0.9rem;
   }
   
   .media {
      flex-direction: column-reverse;
      gap: 1rem;
   }
   
   .media-right {
      align-self: flex-end;
   }
   
   .svg-icon svg {
      width: 48px;
      height: 48px;
   }
   
   .stats-section .grid-cols-3 {
      grid-template-columns: 1fr !important;
      gap: 2rem;
   }
   
   .stat-value {
      font-size: 3.5rem;
   }
   
   .ml-embedded {
      padding: 2rem 1.5rem;
   }
   
   .future-header {
      font-size: 1.75rem;
   }
   
   .grid + .grid {
      margin-top: 2rem;
   }
   
   .section-header {
      margin-bottom: 2.5rem;
   }
}


/* =====================================================
   BLOG/GUIDES PAGE STYLES
   ===================================================== */

/* ===== PAGE HEADER ===== */
.page-title {
   font-family: var(--font-serif);
   font-size: clamp(2.5rem, 6vw, 4rem);
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 1.5rem;
   letter-spacing: -0.02em;
   text-align: center;
}

.page-description {
   font-size: 1.15rem;
   line-height: 1.8;
   color: var(--text-body);
   max-width: 700px;
   margin: 0 auto;
   text-align: center;
}

/* ===== GUIDES GRID ===== */
.guides-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2.5rem;
}

/* ===== GUIDE CARD ===== */
.guide-card {
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.1);
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: all 0.4s var(--ease-smooth);
}

.guide-card:hover {
   border-color: rgba(232, 184, 125, 0.25);
   transform: translateY(-6px);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Guide Image */
.guide-image {
   height: 220px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   overflow: hidden;
}

.guide-image::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to bottom,
      transparent 40%,
      rgba(15, 14, 13, 0.4) 100%
   );
   transition: opacity 0.3s var(--ease-smooth);
}

.guide-card:hover .guide-image::after {
   opacity: 0.7;
}

/* Guide Image Backgrounds */
.guide-image-spring {
   background-image: url('../img/tealamp.webp');
}

.guide-image-holiday {
   background-image: url('../img/holiday.webp');
}

.guide-image-summer {
   background-image: url('../img/benchlamp.webp');
}

.guide-image-winter {
   background-image: url('../img/winterlamp.png');
}

.guide-image-home {
   background-image: url('../img/home.jpg');
}

.guide-image-urban {
   background-image: url('../img/city.webp');
}

.guide-image-train {
   background-image: url('../img/train.png');
}

.guide-image-golden {
   background-image: url('../img/golden_hour.webp');
}

/* Guide Badge */
.guide-badge {
   position: absolute;
   top: 1rem;
   left: 1rem;
   z-index: 2;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   padding: 0.4rem 0.9rem;
   border-radius: var(--radius-full);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.guide-badge.spring {
   background: rgba(134, 239, 172, 0.2);
   color: #86efac;
   border: 1px solid rgba(134, 239, 172, 0.3);
}

.guide-badge.summer {
   background: rgba(253, 224, 71, 0.2);
   color: #fde047;
   border: 1px solid rgba(253, 224, 71, 0.3);
}

.guide-badge.winter {
   background: rgba(147, 197, 253, 0.2);
   color: #93c5fd;
   border: 1px solid rgba(147, 197, 253, 0.3);
}

.guide-badge.home {
   background: rgba(251, 146, 60, 0.2);
   color: #fb923c;
   border: 1px solid rgba(251, 146, 60, 0.3);
}

.guide-badge.urban {
   background: rgba(167, 139, 250, 0.2);
   color: #a78bfa;
   border: 1px solid rgba(167, 139, 250, 0.3);
}

.guide-badge.golden {
   background: rgba(251, 191, 36, 0.2);
   color: #fbbf24;
   border: 1px solid rgba(251, 191, 36, 0.3);
}

.guide-badge.holiday {
   background: rgba(220, 38, 38, 0.2);
   color: #f87171;
   border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Guide Content */
.guide-content {
   padding: 1.75rem;
}

.guide-meta {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1rem;
}

.guide-meta .author-avatar {
   width: 32px;
   height: 32px;
   font-size: 0.8rem;
}

.author-name {
   font-size: 0.85rem;
   color: var(--text-soft);
   font-weight: 500;
}

.guide-title {
   font-family: var(--font-serif);
   font-size: 1.35rem;
   font-weight: 400;
   line-height: 1.35;
   margin-bottom: 1rem;
}

.guide-title a {
   color: var(--text-bright);
   transition: color 0.3s var(--ease-smooth);
}

.guide-title a:hover {
   color: var(--accent);
}

.guide-excerpt {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-body);
   margin-bottom: 1.5rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Read More Link */
.read-more {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--accent);
   transition: all 0.3s var(--ease-smooth);
}

.read-more svg {
   width: 16px;
   height: 16px;
   transition: transform 0.3s var(--ease-smooth);
}

.read-more:hover {
   gap: 0.75rem;
}

.read-more:hover svg {
   transform: translateX(3px);
}

/* ===== NEWSLETTER SECTION ===== */
.newsletter {
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.15);
   border-radius: var(--radius-lg);
   padding: 4rem;
   text-align: center;
   max-width: 700px;
   margin: 0 auto;
}

.newsletter-title {
   font-family: var(--font-serif);
   font-size: 2rem;
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 1rem;
}

.newsletter-description {
   font-size: 1rem;
   line-height: 1.7;
   color: var(--text-body);
   margin-bottom: 2rem;
}

.newsletter-form {
   display: flex;
   gap: 1rem;
   max-width: 480px;
   margin: 0 auto;
}

.newsletter-input {
   flex: 1;
   padding: 1rem 1.25rem;
   font-size: 1rem;
   font-family: var(--font-sans);
   color: var(--text-bright);
   background: var(--bg-deep);
   border: 1px solid rgba(232, 184, 125, 0.2);
   border-radius: var(--radius-md);
   transition: all 0.3s var(--ease-smooth);
}

.newsletter-input::placeholder {
   color: var(--text-faint);
}

.newsletter-input:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(232, 184, 125, 0.15);
}

.newsletter-submit {
   padding: 1rem 2rem;
   font-size: 0.9rem;
   font-weight: 600;
   font-family: var(--font-sans);
   letter-spacing: 0.03em;
   text-transform: uppercase;
   color: var(--bg-deep);
   background: linear-gradient(135deg, var(--accent), #c09968);
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all 0.3s var(--ease-smooth);
}

.newsletter-submit:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(232, 184, 125, 0.3);
}

.newsletter-submit:active {
   transform: translateY(0);
}

/* ===== UTILITY: TEXT ALIGN ===== */
.has-text-centered {
   text-align: center;
}


/* =====================================================
   BLOG PAGE RESPONSIVE STYLES
   ===================================================== */

@media (max-width: 900px) {
   .guides-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
   }
}

@media (max-width: 768px) {
   .page-title {
      font-size: clamp(2rem, 8vw, 2.5rem);
   }
   
   .page-description {
      font-size: 1rem;
   }
   
   .guide-image {
      height: 200px;
   }
   
   .guide-content {
      padding: 1.5rem;
   }
   
   .guide-title {
      font-size: 1.2rem;
   }
   
   .newsletter {
      padding: 2.5rem 2rem;
   }
   
   .newsletter-title {
      font-size: 1.6rem;
   }
   
   .newsletter-form {
      flex-direction: column;
   }
   
   .newsletter-submit {
      width: 100%;
   }
}

@media (max-width: 480px) {
   .page-title {
      font-size: 1.75rem;
   }
   
   .page-description {
      font-size: 0.95rem;
   }
   
   .guide-image {
      height: 180px;
   }
   
   .guide-content {
      padding: 1.25rem;
   }
   
   .guide-title {
      font-size: 1.1rem;
   }
   
   .guide-excerpt {
      font-size: 0.9rem;
      -webkit-line-clamp: 2;
   }
   
   .newsletter {
      padding: 2rem 1.5rem;
   }
   
   .newsletter-title {
      font-size: 1.4rem;
   }
   
   .newsletter-description {
      font-size: 0.9rem;
   }
   
   .newsletter-input,
   .newsletter-submit {
      padding: 0.875rem 1rem;
   }
}

/* ===== JOURNEY SECTION ===== */
.journey-section {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: var(--bg-main);
}

.journey-background {
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
   height: 100%;
   opacity: 0.3;
   pointer-events: none;
}

.journey-background img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.journey-content {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   padding: 6rem 4rem;
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 4rem;
   align-items: center;
}

.journey-text {
   padding-left: 2rem;
}

.journey-label {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--text-soft);
   margin-bottom: 1.5rem;
}

.journey-title {
   font-family: var(--font-serif);
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 400;
   line-height: 1.1;
   color: var(--text-bright);
   margin-bottom: 1.5rem;
   letter-spacing: -0.02em;
}

.journey-description {
   font-size: 1rem;
   line-height: 1.8;
   color: var(--text-soft);
   margin-bottom: 2rem;
   max-width: 400px;
}

.journey-link {
   display: inline-block;
   font-size: 0.8rem;
   font-weight: 500;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--text-bright);
   text-decoration: none;
   padding-bottom: 0.5rem;
   border-bottom: 1.5px solid var(--text-soft);
   transition: all 0.3s ease;
}

.journey-link:hover {
   color: var(--accent);
   border-color: var(--accent);
}

.journey-images {
   position: relative;
   height: 600px;
}

.journey-image {
   position: absolute;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
   transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.journey-image:hover {
   transform: translateY(-8px);
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.journey-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.journey-image-1 {
   top: 0;
   right: 0;
   width: 55%;
   height: 45%;
   z-index: 3;
}

.journey-image-2 {
   top: 35%;
   left: 0;
   width: 60%;
   height: 55%;
   z-index: 2;
}

.journey-image-3 {
   top: 40%;
   right: 5%;
   width: 40%;
   height: 35%;
   z-index: 1;
}

/* Journey Section Responsive */
@media (max-width: 1024px) {
   .journey-content {
      grid-template-columns: 1fr;
      gap: 3rem;
      padding: 4rem 2rem;
   }
   
   .journey-text {
      padding-left: 0;
      text-align: center;
   }
   
   .journey-description {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
   }
   
   .journey-background {
      width: 100%;
      opacity: 0.2;
   }
   
   .journey-images {
      height: 500px;
   }
}

@media (max-width: 768px) {
   .journey-section {
      min-height: auto;
   }
   
   .journey-content {
      padding: 3rem 1.5rem;
   }
   
   .journey-title {
      font-size: 2rem;
   }
   
   .journey-images {
      height: 400px;
   }
   
   .journey-image-1 {
      width: 60%;
      height: 40%;
   }
   
   .journey-image-2 {
      width: 65%;
      height: 50%;
   }
   
   .journey-image-3 {
      width: 45%;
      height: 30%;
   }
}

@media (max-width: 480px) {
   .journey-images {
      height: 350px;
   }
   
   .journey-image-1 {
      top: 0;
      right: 0;
      width: 65%;
      height: 45%;
   }
   
   .journey-image-2 {
      top: 35%;
      left: 0;
      width: 70%;
      height: 50%;
   }
   
   .journey-image-3 {
      display: none;
   }
}

/* ===== INTRO SECTION (NEW) ===== */
.intro-section {
   padding: 8rem 2rem;
   background: var(--bg-deep);
}

.intro-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
}

.intro-label {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 1.5rem;
}

.intro-title {
   font-family: var(--font-serif);
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 400;
   line-height: 1.1;
   color: var(--text-bright);
   margin-bottom: 2rem;
   letter-spacing: -0.02em;
}

.intro-description {
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--text-soft);
   margin-bottom: 1.5rem;
}

.intro-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4/5;
}

.intro-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.intro-image:hover img {
   transform: scale(1.03);
}

@media (max-width: 900px) {
   .intro-section {
      padding: 5rem 1.5rem;
   }
   
   .intro-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
   }
   
   .intro-image {
      aspect-ratio: 16/10;
   }
}

/* ===== ABOUT SECTION (NEW) ===== */
.about-section {
   padding: 6rem 2rem;
   background: var(--bg-main);
}

.about-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3rem;
   max-width: 1200px;
   margin: 0 auto;
}

.about-card {
   padding: 2.5rem;
   background: var(--bg-card);
   border: 1px solid rgba(232, 184, 125, 0.1);
   transition: all 0.4s ease;
}

.about-card:hover {
   border-color: rgba(232, 184, 125, 0.25);
   transform: translateY(-4px);
}

.about-number {
   display: block;
   font-family: var(--font-serif);
   font-size: 3rem;
   font-weight: 400;
   color: var(--accent);
   opacity: 0.3;
   margin-bottom: 1rem;
   line-height: 1;
}

.about-title {
   font-family: var(--font-serif);
   font-size: 1.5rem;
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 1rem;
}

.about-text {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-soft);
}

@media (max-width: 900px) {
   .about-section {
      padding: 4rem 1.5rem;
   }
   
   .about-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
   
   .about-card {
      padding: 2rem;
   }
}

/* ===== WHERE & WHEN SECTION (NEW) ===== */
.where-when-section {
   padding: 6rem 2rem;
   background: var(--bg-deep);
}

.where-when-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   max-width: 1200px;
   margin: 0 auto;
}

.where-block,
.when-block {
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.where-images {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
}

.where-image,
.when-image {
   position: relative;
   overflow: hidden;
   display: block;
}

.where-image-1 {
   aspect-ratio: 3/4;
}

.where-image-2 {
   aspect-ratio: 3/4;
}

.when-image {
   aspect-ratio: 16/10;
}

.where-image img,
.when-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.where-image:hover img,
.when-image:hover img {
   transform: scale(1.05);
}

.where-image-label,
.when-image-label {
   position: absolute;
   bottom: 1rem;
   left: 1rem;
   font-size: 0.7rem;
   font-weight: 500;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--text-bright);
   background: rgba(15, 14, 13, 0.8);
   padding: 0.5rem 0.75rem;
   backdrop-filter: blur(10px);
}

.where-label,
.when-label {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
}

.where-title,
.when-title {
   font-family: var(--font-serif);
   font-size: clamp(1.75rem, 3vw, 2.25rem);
   font-weight: 400;
   line-height: 1.2;
   color: var(--text-bright);
   margin: 0.5rem 0 1rem;
}

.where-description,
.when-description {
   font-size: 1rem;
   line-height: 1.7;
   color: var(--text-soft);
}

@media (max-width: 900px) {
   .where-when-section {
      padding: 4rem 1.5rem;
   }
   
   .where-when-grid {
      grid-template-columns: 1fr;
      gap: 4rem;
   }
}

@media (max-width: 480px) {
   .where-images {
      grid-template-columns: 1fr;
   }
   
   .where-image-1,
   .where-image-2 {
      aspect-ratio: 16/10;
   }
}

/* ===== STATS SECTION NEW ===== */
.stats-section-new {
   padding: 6rem 2rem;
   background: var(--bg-main);
   text-align: center;
}

.stats-grid {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 3rem;
   max-width: 900px;
   margin: 0 auto 2rem;
}

.stat-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
}

.stat-number {
   font-family: var(--font-serif);
   font-size: clamp(3rem, 6vw, 5rem);
   font-weight: 400;
   color: var(--accent);
   line-height: 1;
}

.stat-label-new {
   font-size: 0.8rem;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--text-soft);
}

.stat-divider {
   width: 1px;
   height: 60px;
   background: rgba(232, 184, 125, 0.2);
}

.stats-tagline {
   font-family: var(--font-serif);
   font-size: 1.25rem;
   font-style: italic;
   color: var(--text-soft);
   margin-top: 2rem;
}

@media (max-width: 600px) {
   .stats-grid {
      flex-direction: column;
      gap: 2rem;
   }
   
   .stat-divider {
      width: 60px;
      height: 1px;
   }
}

/* ===== FUTURE SECTION NEW ===== */
.future-section {
   padding: 6rem 2rem;
   background: var(--bg-deep);
}

.future-header-block {
   text-align: center;
   margin-bottom: 4rem;
}

.future-label {
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: 1rem;
}

.future-title {
   font-family: var(--font-serif);
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 400;
   color: var(--text-bright);
}

.future-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   max-width: 1200px;
   margin: 0 auto;
}

.future-item {
   padding: 2rem;
   border-top: 1px solid rgba(232, 184, 125, 0.2);
}

.future-number {
   display: block;
   font-family: var(--font-serif);
   font-size: 1.5rem;
   color: var(--accent);
   opacity: 0.5;
   margin-bottom: 1rem;
}

.future-item-title {
   font-family: var(--font-serif);
   font-size: 1.25rem;
   font-weight: 400;
   color: var(--text-bright);
   margin-bottom: 0.75rem;
}

.future-item-text {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-soft);
}

@media (max-width: 900px) {
   .future-section {
      padding: 4rem 1.5rem;
   }
   
   .future-grid {
      grid-template-columns: 1fr;
      gap: 0;
   }
   
   .future-item {
      padding: 1.5rem 0;
   }
}