/* === 1. Settings === */
/* Reusable values like colors and sizes used throughout the website. */
:root {
  --brand: #2563eb; /* Updated to a rich, professional blue for buttons */
  --brand-dark: #1e40af; /* Updated darker blue for hover effects */
  --brand-light: #3b82f6; /* Updated lighter blue for catalogue button */
  --power-engineered-text: #ff4500; /* Fallback color for Power Engineered text (orange, fire-like) */
  --accent: #f59e0b; /* Orange color for emphasis or tags */
  --bg: #ffffff; /* White background for most sections */
  --primary-font: 'Poppins', -apple-system, BlinkMacSystemFont, Arial, sans-serif; /* Font used for text */
  --top-bar-height: 48px; /* Height of the top bar with offers */
  --navbar-height: 80px; /* Height of the navigation menu */
}

/* Apply the new variable to the Power Engineered text with !important to override Bootstrap */
.navbar-brand .text-info {
  color: var(--power-engineered-text) !important;
}

/* === 2. Tools === */
/* Basic settings to make the website work smoothly on all devices. */
html {
  scroll-behavior: smooth; /* Smooth scrolling for anchor links. */
  overscroll-behavior: contain; /* Prevents unwanted scrolling effects. */
}

body,
.navbar,
.navbar-collapse,
section {
  touch-action: manipulation; /* Improves touch responsiveness on mobile. */
}

/* === 3. Generic === */
/* Default styles for text and headings to ensure consistent typography. */
body {
  font-family: var(--primary-font); /* Uses the Poppins font. */
  direction: ltr; /* Text reads left to right. */
  text-align: left; /* Aligns text to the left. */
  overscroll-behavior: contain; /* Prevents scrolling issues on mobile. */
  -webkit-font-smoothing: antialiased; /* Smoother text rendering. */
  -moz-osx-font-smoothing: grayscale; /* Improves text clarity on macOS. */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font); /* Consistent font for headings. */
  font-weight: 500; /* Medium-bold headings. */
}

h2.text-primary {
  font-weight: 500; /* Medium-bold headings. */
  font-size: clamp(1.5rem, 4vw, 2.25rem); /* Responsive heading size. */
  text-align: center; /* Centers heading text. */
}

p.text-secondary {
  font-size: clamp(0.9rem, 2vw, 1.1rem); /* Responsive paragraph size. */
  text-align: center; /* Centers paragraph text. */
}

/* === 4. Elements === */
/* Styles for sections to ensure consistent spacing and layout. */
section {
  padding: 3rem 0; /* Vertical spacing for sections. */
  scroll-snap-align: start; /* Snaps scrolling to sections on mobile. */
}

section:nth-of-type(even) {
  background: #f8fafc; /* Light gray background for even sections. */
}

/* === 5. Components === */
/* Top Bar */
.top-bar {
  position: fixed; /* Stays at the top during scroll. */
  top: 0; /* Aligns to the top edge. */
  left: 0; /* Aligns to the left edge. */
  width: 100%; /* Full page width. */
  z-index: 1000; /* Above other elements. */
  background: #f8f9fa; /* Light gray background. */
  color: #212529; /* Dark text color. */
  padding: 0.5rem 0; /* Internal spacing. */
  font-size: 0.875rem; /* Smaller text size. */
  text-align: center; /* Centers text. */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth. */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth hide/show. */
}

.top-bar.hidden {
  opacity: 0; /* Invisible when hidden. */
  transform: translateY(-100%); /* Moves off-screen. */
  pointer-events: none; /* Disables interaction when hidden. */
}

.top-bar:not(.hidden) {
  opacity: 1; /* Fully visible. */
  transform: translateY(0); /* Normal position. */
  pointer-events: auto; /* Enables interaction. */
}

.top-bar .container {
  display: flex; /* Row layout for content. */
  justify-content: space-between; /* Spreads items apart. */
  align-items: center; /* Vertically centers items. */
  padding: 0.5rem 1rem; /* Internal spacing. */
}

.top-bar a {
  color: var(--brand); /* Blue links. */
  text-decoration: none; /* No underlines. */
  transition: color 0.3s ease-in-out; /* Smooth color transition. */
}

.top-bar a:hover {
  color: var(--brand-light); /* Lighter blue on hover. */
}

.fa-truck {
  color: var(--brand); /* Blue truck icon for shipping. */
}

/* Navigation Bar */
.navbar {
  position: fixed; /* Stays at the top during scroll. */
  top: var(--top-bar-height); /* Below top bar. */
  left: 0; /* Aligns to left edge. */
  width: 100%; /* Full page width. */
  z-index: 999; /* Above most content. */
  background: transparent; /* Transparent initially. */
  transition: background-color 0.3s ease-in-out, top 0.3s ease-in-out; /* Smooth transitions. */
}

.navbar.top-bar-hidden {
  top: 0; /* Moves to top when top bar is hidden. */
}

.navbar::before {
  content: ""; /* Background layer. */
  position: absolute; /* Covers navbar. */
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(11, 18, 32, 0.85); /* Semi-transparent dark background. */
  z-index: -1; /* Behind navbar content. */
}

.navbar.bg-scrolled {
  background: rgba(11, 18, 32, 0.95); /* Darker background on scroll. */
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn-catalogue,
.navbar .language-switcher,
.navbar .navbar-toggler {
  position: relative; /* Above background layer. */
  z-index: 1; /* Ensures visibility. */
}

.navbar-collapse.show::before {
  content: ""; /* Mobile menu background. */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(11, 18, 32, 0.9); /* Dark background for mobile menu. */
  z-index: -1;
}

.navbar .nav-link {
  color: #e2e8f0; /* Light gray text. */
  opacity: 0.9; /* Slightly transparent. */
  font-size: 1rem; /* Standard text size. */
  line-height: 1.5; /* Line spacing. */
  display: inline-flex; /* Aligns content. */
  align-items: center;
  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth hover effects. */
}

.navbar .nav-link:hover {
  color: var(--brand-light); /* Lighter blue on hover. */
  opacity: 1; /* Fully visible. */
}

.navbar .nav-link.active {
  color: var(--brand); /* Blue for active link. */
  font-weight: 500; /* Slightly bold. */
}

.navbar .dropdown-toggle.active {
  color: var(--brand); /* Blue for active dropdown. */
  font-weight: 500; /* Slightly bold. */
}

.navbar-nav {
  display: flex; /* Row layout for menu items. */
  align-items: center; /* Vertically centers items. */
}

.navbar-brand img {
  height: 40px; /* Logo height. */
  width: auto; /* Maintains proportions. */
}

.btn-catalogue {
  background: var(--brand-light); /* Light blue background. */
  color: #ffffff; /* White text for better readability. */
  border: none; /* No border. */
  border-radius: 0.25rem; /* Rounded corners. */
  padding: 0.4rem 0.8rem; /* Compact padding. */
  font-size: 0.85rem; /* Smaller text for menu consistency. */
  line-height: 1.5; /* Line spacing. */
  display: inline-flex; /* Centers content. */
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem; /* Spacing from menu items. */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions. */
}

.btn-catalogue:hover,
.btn-catalogue:active {
  background: var(--brand-dark); /* Darker blue on hover/active. */
  color: #e2f1ff; /* Light text. */
  transform: scale(1.05); /* Subtle enlargement. */
}

.language-switcher {
  display: flex; /* Row layout for items. */
  align-items: center; /* Vertically centers. */
  gap: 0.5rem; /* Spacing between items. */
  margin-left: auto; /* Pushes to the right. */
}

.language-switcher a {
  display: flex; /* Aligns flag and text. */
  align-items: center;
  gap: 0.5rem; /* Spacing between flag and text. */
  color: #e2e8f0; /* Light gray text. */
  text-decoration: none; /* No underlines. */
  font-size: 0.875rem; /* Small text. */
  transition: color 0.3s ease-in-out; /* Smooth color transition. */
}

.language-switcher a:hover {
  color: var(--brand-light); /* Lighter blue on hover. */
}

.language-switcher img {
  width: 24px; /* Flag size. */
  height: 24px;
  border-radius: 2px; /* Slightly rounded edges. */
}

/* Hero Section */
.hero {
  position: relative; /* For background positioning. */
  min-height: 600px; /* Minimum section height. */
  display: grid; /* Centers content. */
  place-items: center;
  color: #fff; /* White text. */
  overflow: hidden; /* Hides overflow. */
  padding-top: calc(var(--top-bar-height) + var(--navbar-height)); /* Accounts for top bar and navbar. */
}

.hero-bg {
  position: absolute; /* Covers entire section. */
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* Fills section. */
  z-index: 0; /* Behind content. */
}

.hero .container {
  position: relative; /* Above background. */
  z-index: 1;
}

/* Social Icons */
.social-icons {
  display: flex; /* Row layout for icons. */
  gap: 0.75rem; /* Spacing between icons. */
  flex-wrap: wrap; /* Wraps on small screens. */
}

.social-icon {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transitions. */
}

.social-icon:hover {
  transform: scale(1.1); /* Subtle enlargement on hover. */
  opacity: 0.9; /* Slightly transparent. */
}

.social-icon:active {
  transform: scale(1); /* No shrink on click for softer effect. */
}

.social-icon i.fa-facebook   { color: #1877F2; } /* Facebook blue */
.social-icon i.fa-twitter    { color: #1DA1F2; } /* Twitter/X blue */
.social-icon i.fa-instagram  { color: #E1306C; } /* Instagram pink */
.social-icon i.fa-linkedin   { color: #0A66C2; } /* LinkedIn blue */
.social-icon i.fa-youtube    { color: #FF0000; } /* YouTube red */
.social-icon i.fa-whatsapp   { color: #25D366; } /* WhatsApp green */
.social-icon i.fa-telegram   { color: #0088CC; } /* Telegram blue */

/* Buttons and Lists */
.btn i,
.list-unstyled i {
  margin-right: 0.5rem; /* Spacing between icon and text. */
  vertical-align: middle; /* Aligns with text. */
}

.btn-brand {
  background: var(--brand); /* Blue background. */
  color: #ffffff; /* White text for better readability. */
  border: none; /* No border. */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions. */
}

.btn-brand:hover {
  background: var(--brand-dark); /* Darker blue on hover. */
  color: #e2f1ff; /* Light text. */
  transform: scale(1.05); /* Subtle enlargement. */
}

.btn-brand:active {
  background: var(--brand-dark); /* Darker blue on active. */
  color: #e2f1ff; /* Light text. */
  transform: scale(1); /* No shrink for softer effect. */
}

.btn-brand:focus {
  outline: none; /* Remove browser's default focus outline */
  background: var(--brand); /* Maintain default background */
  color: #ffffff; /* Maintain white text */
  transform: scale(1); /* Prevent scaling on focus */
}

.btn-brand:not(:hover):not(:active):not(:focus) {
  background: var(--brand); /* Default blue background */
  color: #ffffff; /* Default white text */
  transform: scale(1); /* Default scale */
}

.btn {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Smooth transitions. */
}

.btn:hover {
  filter: brightness(90%); /* Slightly darker on hover. */
  transform: scale(1.05); /* Subtle enlargement. */
}

.btn:active {
  filter: brightness(80%); /* Darker on click. */
  transform: scale(1); /* No shrink for softer effect. */
}

.btn:focus {
  outline: none; /* Remove browser's default focus outline */
  filter: brightness(100%); /* Maintain default brightness */
  transform: scale(1); /* Prevent scaling on focus */
}

/* Marketing Videos Section */
video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures videos fill their container. */
}

.card video {
  border-radius: 1rem; /* Rounded corners with shadow. */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Portfolio and Services Cards */
.listing-card {
  border: none; /* No border. */
  border-radius: 0.75rem; /* Rounded corners. */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow. */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth hover effects. */
}

.listing-card:hover {
  transform: translateY(-5px); /* Lifts card on hover. */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow. */
}

.tag {
  position: absolute; /* On top of card image. */
  top: 12px; left: 12px;
  background: var(--brand); /* Blue background. */
  color: #ffffff; /* White text for better readability. */
  padding: 0.25rem 0.6rem; /* Small padding. */
  border-radius: 999px; /* Fully rounded. */
  font-size: 0.75rem; /* Small text. */
  font-weight: 500; /* Slightly bold. */
}

.tag-branding {
  background: var(--accent); /* Orange for branding tags. */
  color: #0b1220; /* Dark text. */
}

.badge {
  font-size: 0.875rem; /* Small badge text. */
  border-radius: 0.5rem; /* Rounded corners. */
  padding: 0.5rem 1rem; /* Padding. */
}

/* About Section */
.about-photo {
  width: 140px; /* Team photo size. */
  height: 140px;
  border-radius: 50%; /* Circular photo. */
  object-fit: cover; /* Fits nicely. */
  border: 3px solid rgba(255, 255, 255, 0.9); /* White border. */
}

ul li i {
  font-size: 1.1rem; /* Icon size in lists. */
}

/* Testimonial Section */
.testimonial {
  background: #ffffff; /* White background. */
  border-radius: 0.75rem; /* Rounded corners. */
  padding: 1.25rem; /* Internal padding. */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow. */
}

/* Contact Section */
.contact-list li {
  display: flex; /* Aligns icon and text in a row. */
  align-items: center; /* Vertically centers. */
  gap: 0.5rem; /* Spacing between icon and text. */
}

.leaflet-map {
  height: 350px; /* Map height. */
  width: 100%; /* Full width. */
  border-radius: 0.5rem; /* Rounded corners. */
}

/* Footer */
.footer {
  background: #212529; /* Dark background. */
  color: #cbd5e1; /* Light gray text. */
  padding: 2rem 0; /* Padding. */
}

.footer a {
  color: #ffffff; /* White links. */
  text-decoration: none; /* No underlines. */
  transition: color 0.3s ease-in-out; /* Smooth color transition. */
}

.footer-link:hover,
.footer-link:active {
  color: var(--brand-light); /* Lighter blue on hover. */
}

.footer-link.active {
  color: var(--brand); /* Blue for active link. */
  font-weight: 500; /* Slightly bold. */
}

.company-info {
  background: #f8f9fa; /* Light gray background. */
  border-radius: 0.5rem; /* Rounded corners. */
}

.company-logo {
  max-width: 50px; /* Logo size. */
}

.company-name {
  font-size: 0.875rem; /* Small text. */
  color: #212529; /* Dark text. */
}

.company-info p {
  color: #212529; /* Dark text for description. */
  font-size: 0.875rem; /* Small text. */
}

.horizontal-bar {
  height: 3px; /* Thin line. */
  background: linear-gradient(to right, #4682B4, #ADD8E6); /* Blue gradient. */
  width: 40%; /* Partial width. */
}

/* Styling for company logo in footer */
.company-logo {
  width: 200px; /* Increased width for better visibility */
  height: auto; /* Maintains aspect ratio */
  max-width: 100%; /* Ensures responsiveness within container */
  display: block; /* Ensures proper rendering */
}

.qr-code {
  width: 90px; /* QR code size. */
  height: 90px;
}

.copyright {
  border-top: 1px solid #4b5563; /* Gray border. */
  padding-top: 1rem; /* Space above copyright. */
}

/* Back to Top Button */
#backToTop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions. */
  will-change: opacity, visibility, transform;
}

#backToTop i {
  margin-right: 0;
  vertical-align: middle;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:hover {
  background: var(--brand-dark);
  transform: scale(1.05); /* Subtle enlargement on hover. */
}

#backToTop:active {
  background: var(--brand-dark);
  transform: scale(1); /* No shrink for softer effect. */
}

/* Reveal Animation */
.reveal {
  opacity: 0; /* Hidden initially. */
  transform: translateY(20px); /* Starts below. */
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; /* Smooth animation. */
}

.reveal.visible {
  opacity: 1; /* Fully visible. */
  transform: translateY(0); /* Normal position. */
}

/* === 6. Utilities === */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand); /* Blue background for active dropdown. */
  color: #fff; /* White text. */
}

/* === 7. Responsive === */
@media (min-width: 768px) {
  .footer {
    padding: 3rem 0; /* More padding on larger screens. */
  }

  .top-bar .container {
    flex-wrap: nowrap; /* Single row for top bar. */
  }

  .hero {
    min-height: 600px; /* Taller hero section. */
  }

  .leaflet-map {
    height: 400px; /* Larger map. */
  }
}

@media (max-width: 991px) {
  .navbar::before {
    background: rgba(11, 18, 32, 0.9); /* Darker mobile menu background. */
  }

  .navbar-collapse {
    max-height: calc(100vh - var(--navbar-height)); /* Limits menu height. */
    overflow-y: auto; /* Enables scrolling. */
    padding: 1rem; /* Internal padding. */
    background: rgba(11, 18, 32, 0.95); /* Dark mobile menu background. */
  }

  .navbar-nav {
    text-align: center; /* Centers menu items. */
    align-items: center;
  }

  .nav-link {
    padding: 0.75rem 0; /* Spacing for touch. */
    font-size: 0.95rem; /* Smaller text. */
  }

  .btn-catalogue {
    padding: 0.35rem 0.7rem; /* Smaller padding. */
    font-size: 0.8rem; /* Smaller text. */
    margin: 0.5rem auto; /* Centers button. */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions. */
  }

  .btn-catalogue:hover,
  .btn-catalogue:active {
    background: var(--brand-dark);
    color: #e2f1ff;
    transform: scale(1.05); /* Subtle enlargement. */
  }

  .language-switcher {
    margin-left: 0; /* Centers switcher. */
    justify-content: center; /* Centers content. */
    padding: 1rem 0; /* Adds spacing. */
  }

  .language-switcher a {
    font-size: 0.85rem; /* Smaller text. */
  }

  .language-switcher img {
    width: 20px; /* Smaller flag. */
    height: 20px;
  }

  .hero {
    min-height: 500px; /* Shorter hero section. */
    padding-top: calc(var(--top-bar-height) + var(--navbar-height));
  }

  .hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem); /* Smaller headline. */
  }

  .hero .lead {
    font-size: clamp(0.95rem, 2vw, 1.1rem); /* Smaller paragraph. */
  }

  .about-photo {
    width: 120px; /* Smaller team photo. */
    height: 120px;
  }

  .testimonial {
    padding: 1rem; /* Less padding. */
  }

  section {
    padding: 2rem 0; /* Less section padding. */
  }

  h2.text-primary {
    font-size: clamp(1.4rem, 3.5vw, 2rem); /* Smaller headings. */
  }

  p.text-secondary {
    font-size: clamp(0.85rem, 2vw, 1rem); /* Smaller paragraphs. */
  }

  .listing-card:hover {
    transform: translateY(-3px); /* Smaller lift effect. */
  }
}

@media (max-width: 767px) {
  .top-bar {
    font-size: 0.8rem; /* Smaller text. */
    padding: 0.4rem 0; /* Less padding. */
  }

  .top-bar .container {
    flex-wrap: wrap; /* Wraps content. */
    gap: 0.5rem; /* Smaller gaps. */
    padding: 0.5rem; /* Less padding. */
  }

  .hero {
    min-height: 450px; /* Shorter hero section. */
  }

  .hero h1 {
    font-size: clamp(1.5rem, 3vw, 2rem); /* Smaller headline. */
  }

  .hero .lead {
    font-size: clamp(0.9rem, 2vw, 1rem); /* Smaller paragraph. */
  }

  .btn-lg {
    font-size: 0.85rem; /* Smaller button text. */
    padding: 0.5rem 1rem; /* Smaller padding. */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions. */
  }

  .btn-lg:hover {
    transform: scale(1.05); /* Subtle enlargement. */
  }

  .btn-lg:active {
    transform: scale(1); /* No shrink. */
  }

  .about-photo {
    width: 100px; /* Smaller team photo. */
    height: 100px;
  }

  .leaflet-map {
    height: 300px; /* Smaller map. */
  }

  .social-icons {
    gap: 0.5rem; /* Smaller gaps between icons. */
  }

  #backToTop {
    width: 40px; /* Smaller button. */
    height: 40px;
    right: 15px; /* Closer to edge. */
    bottom: 15px;
  }
}

@media (max-width: 576px) {
  .hero {
    min-height: 400px; /* Even shorter hero section. */
  }

  .hero h1 {
    font-size: clamp(1.3rem, 3vw, 1.8rem); /* Smaller headline. */
  }

  h2.text-primary {
    font-size: clamp(1.2rem, 3vw, 1.6rem); /* Smaller headings. */
  }

  p.text-secondary {
    font-size: clamp(0.8rem, 2vw, 0.95rem); /* Smaller paragraphs. */
  }

  .top-bar {
    font-size: 0.75rem; /* Very small text. */
  }

  .navbar-brand img {
    height: 32px; /* Smaller logo. */
  }

  .btn-catalogue {
    font-size: 0.8rem; /* Smaller button text. */
    padding: 0.3rem 0.6rem; /* Smaller padding. */
    margin: 0.5rem auto; /* Centers button. */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions. */
  }

  .btn-catalogue:hover,
  .btn-catalogue:active {
    background: var(--brand-dark);
    color: #e2f1ff;
    transform: scale(1.05); /* Subtle enlargement. */
  }

  .language-switcher img {
    width: 18px; /* Smaller flag. */
    height: 18px;
  }
}

@media (max-width: 414px) and (max-height: 991px) {
  .navbar-collapse {
    max-height: calc(100vh - var(--navbar-height)); /* Limits menu height. */
    overflow-y: auto; /* Enables scrolling. */
    padding-bottom: 2rem; /* Extra bottom space. */
  }

  .navbar-nav {
    padding-bottom: 1rem; /* Space below menu items. */
  }

  .language-switcher {
    margin-bottom: 1rem; /* Space below switcher. */
  }
}

/* Custom CSS for Row Spacing */
#esp-products .row {
  margin-bottom: 1.5rem; /* Adds vertical spacing between rows */
}

/* Custom CSS for Row Spacing */
#esp-products .row {
  margin-bottom: 1.5rem; /* Adds vertical spacing between rows */
}

.rounded-circle {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  aspect-ratio: 1/1;
}