/*Global style*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*describes behavior of focusable elements for accessibility*/
:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

:root {
  --primary-red: #9a0000;
  --primary-blue: #044ba6;
  --black: #000000;
  --light-gray: #808080;
  --bg-light: #f2f2e6;
  --white: #ffffff;
  --shadow: rgba(154, 0, 0, 0.05);
  --navbar-height: 72px;
}

html {
  scroll-padding-top: var(--navbar-height);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: var(--bg-light);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--black);
  padding-bottom: 80px;
}

h1 {
  font-size: 2.5rem;
  text-align: center;
  line-height: 1;
  font-weight: 700;
}

h2 {
  font-size: 2.25rem;
  text-align: center;
  line-height: 1;
  font-weight: 700;
}

h3 {
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 600;
}

h4 {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 600;
}

p {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
}

/* HEADER */
.header {
  min-height: 55vh;
  background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-blue) 100%);
  color: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*sets up navbar formatting*/
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  padding: 0.5rem 0.5rem;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 20px var(--shadow);
}

/*centers logo along navbar*/
.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/*controls logo size*/
.logo-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

/*removes url formatting from logo*/
.logo-text {
 text-decoration: none;
}

/*adds formatting to company name*/
.logo h4 {
  font-size: 1.1rem;
  color: var(--primary-red);
}

/*adds formatting to tagline*/
.logo p {
  font-size: 0.9rem;
  color: var(--primary-blue);
}

/*arranges navigation links horizontally*/
.nav-links {
  top: var(--navbar-height);
  display: flex;
  list-style: none;
  gap: 1rem;
}

/*gives formatting to navigation linkns*/
.nav-links a {
  color: var(--black);
  text-decoration: none;
  padding: 1rem 1rem 1rem 0.9rem;
  border-radius: 25px;
  transition: all 0.3s;
  font-size: 1rem;
  font-weight: 600;
}

/*formatting change when mouse is hovering on nav link*/
.nav-links a:hover {
  background: var(--primary-blue);
  color: var(--white);
}

/*arranges header on page*/
.hero {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/*CTA Button formatting*/
.cta-btn {
  background: var(--white);
  color: var(--primary-blue);
  padding: 0.85rem 3rem 1rem 3rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: all 0.3s;
  border: 2px solid var(--white);
  font-size: 1.5rem;
}

/*CTA Button formatting when hovering*/
.cta-btn:hover {
  background: var(--primary-red);
  color: var(--white);
  border-color: var(--primary-red);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(154, 0, 0, 0.3);
}

/*CTA Button formatting*/
.cta-btn-services {
  background: var(--primary-blue);
  color: var(--white);
  padding: 0.85rem 3rem 1rem 3rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;  
  font-size: 1.4rem;
  display: inline-block;
  transition: all 0.3s;
  border: 2px solid var(--white);
  margin-top: 2rem;
}

/*CTA Button formatting when hovering*/
.cta-btn-services:hover {
  background: var(--primary-red);
  color: var(--white);
  border-color: var(--primary-red);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(154, 0, 0, 0.3);
}

/*All Sections*/
.section {
  padding: 2.5rem 0;
  text-align: center;
}

/* All Containers*/
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container h2 {
  margin-bottom: 2rem;
  color: var(--primary-red);
  text-align: center;
}

/* All Cards for every section */
.card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s;
  border: 2px solid var(--light-gray);
  border-top: 5px solid var(--primary-red);
  height: 100%;
  box-sizing: border-box;
}

/* All card headers get a margin below */
.card h3 {
  margin-bottom: 1.5rem;
  color: var(--primary-blue);
}

/*Icons in focus areas section get the same size and color*/
.icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--black);
}

/* Grids for sections especially Focus Areas */
.section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/*Grid for services and toolbox combined*/
.meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 24px;
  align-items: stretch;
}

/*Grid for services only*/
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: 100%;
}

/*Training catalog link card*/
.catalog {
  background: var(--primary-red);
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 20px;
  transition: all 0.3s;
  cursor: pointer;
  border-top: 5px solid var(--primary-red);
}

.catalog h2 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

/*Catalog link before hover*/
.catalog a {
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 25px;
  transition: all 0.3s;
  color: var(--white);
}

/*Catalog link on hover*/
.catalog:hover{
  transform: translateY(-15px);
  box-shadow: 0 30px 80px rgba(4, 75, 166, 0.2);
  border-top-color: var(--primary-blue);
}

/*Toolbox link behavior*/
.toolbox {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--white);
  text-align: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: 20px;
  transition: all 0.3s;
  cursor: pointer;
  border-top: 5px solid var(--primary-blue);
}



/*Toolbox link before hover*/
.toolbox a {
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 25px;
  transition: all 0.3s;
  color: var(--black);
}

/*Toolbox link on hover*/
.toolbox:hover{
  transform: translateY(-15px);
  box-shadow: 0 30px 80px rgba(4, 75, 166, 0.2);
  border-top-color: var(--primary-red);
}

.toolbox h1 {
  margin-bottom: 3rem;
  color: var(--primary-blue);
}

.toolbox h4 {
  color: var(--primary-red);
  margin-bottom: 0.25rem;
}

/* Clients carousel */
.clients-carousel {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-track {
  display: flex;
  /* Do NOT set animation: none here; JS will set it */
}

.client-slide {
  min-width: 300px;
  text-align: center;
  padding: 2rem;
  flex-shrink: 0;
}

.client-slide img {
  width: 120px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px var(--shadow);
  border: 1px solid var(--primary-blue);
  background: var(--white);
}

.client-info h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-red);
}

.client-info h4 {
  color: var(--primary-blue);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.case-carousel {
  overflow: hidden;
  width: 100%;
}

/* defines a viewport for the carousel and hides overflow content */
.case-carousel_viewport {
  width: 100%;
  overflow: hidden;
}

/* arranges all cases in a horizontal track */
.case-carousel_track {
  display: flex;
  gap: 2rem; /* space between slides */
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* sets up carousel slide layout - each slide takes the FULL viewport width so only one shows at a time */
.case-carousel_slide {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  flex: 0 0 100%; /* fixed to viewport width, matches JS calculation */
  box-sizing: border-box;
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--light-gray);
  border-radius: 8px;
  height: auto;
  box-shadow: 0 2px 8px var(--shadow);
}

/* LEFT side: image + title + industry */
.case-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 0 0 360px; /* fixed width for left column */
}

/* styles the carousel controls container to center the buttons and dots */
.case-carousel_controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

/* gives style to the carousel buttons including border, background, color, and transition effects */
.case-carousel_button {
  border: 2px solid var(--primary-blue);
  border-radius: 999px;
  background: var(--white);
  color: var(--primary-red);
  cursor: pointer;
  padding: 10px 18px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  font-weight: bold;
  white-space: nowrap;
}

/* adds hover effects to the carousel buttons, changing background color, text color, and applying a slight upward translation */
.case-carousel_button:hover {
  background: var(--primary-blue);
  color: var(--white);
  transform: translateY(-1px);
}

/* makes the carousel buttons and dots focusable and adds a visible outline for accessibility */
.case-carousel_button:focus-visible,
.case-carousel_dot:focus-visible {
  outline: 3px solid var(--primary-red);
  outline-offset: 3px;
}

/* dots to indicate number of case studies */
.case-carousel_dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* controls appearance of carousel dots */
.case-carousel_dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--light-gray);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* adds hover effect to carousel dots, changing background color to a darker shade of blue */
.case-carousel_dot:hover {
  background: var(--primary-blue);
}

/* adds active state styling to the carousel dots, changing background color to primary red and scaling up the dot size */
.case-carousel_dot.is-active {
  background: var(--primary-red);
  transform: scale(1.2);
}

/* adds a card for a case */
.case-card {
  background: var(--white);
  border-radius: 25px;
  border: 2px solid var(--light-gray);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* sets up space for image */
.case-logo {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* sets up image size and shape */
.case-logo img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

/* RIGHT side: results list */
.case-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* prevents flex overflow from long text */
}

/* removes default list styling and padding for case results list */
.case-results {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}

/* styles individual list items in the case results list, including color, padding, and font size */
.case-results li {
  color: var(--black);
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  font-size: 1.5rem;
  text-align: left;
}

/* adds a checkmark before each list item */
.case-results li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-red);
  font-weight: bold;
}

.case-left .case-industry {
  margin: 0;
  color: var(--primary-red);
  font-weight: bold;
  letter-spacing: 0.5px;
}

.case-left h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-blue);
  text-align: left;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.mission {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 20px;
  box-shadow: 0 20px 60px var(--shadow);
  border-top: 5px solid var(--light-gray);
  width: 50%;
  text-align: center;
}

.team-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.team-profile {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  background: var(--white);
  padding: 1.5rem;
  border-radius: 20px;
  box-shadow: 0 20px 60px var(--shadow);
  border-top: 5px solid var(--primary-red);
  transition: all 0.3s;
}

.team-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-blue);
  flex-shrink: 0;
}

.team-linkedin {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--primary-blue);
  border-radius: 25px;
  transition: all 0.3s;
  font-size: 1rem;
}

.team-linkedin:hover {
  background: var(--primary-blue);
  color: var(--white);
  transform: translateY(-2px);
}

.mission h3 {
  margin-bottom: 1rem;
  position: relative;
  color: var(--primary-blue);
  font-weight: bold;
}

.mission h4 {
  color: var(--primary-red);
  font-weight: bold;
  line-height: 1.5;
}

.team-info h3 {
  margin-bottom: 0.75rem;
  color: var(--primary-blue);
}

.team-info h4 {
  color: var(--primary-red);
  margin-bottom: 1.55rem;
}

/* BOTTOM BAR */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  box-shadow: 0 -5px 25px var(--shadow);
  z-index: 999;
  padding: 1rem 0;
}

/* style for all content inside the bar*/
.bar-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/*style for all objects inside the bar*/
.bar-item {
  color: var(--primary-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  border-radius: 25px;
  transition: all 0.3s;
  padding-bottom: 0.7rem;
  padding-top: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  width: auto;
  height: max-content;
  justify-content: center;
}

/*style for all icons inside the bar*/
.bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.bar-label {
  display: inline;
  justify-content: center;
  font-size: 1.4rem;
}

.bar-item:hover {
  background: var(--primary-blue);
  color: var(--white);
  transform: translateY(-2px);
}

.bar-separator {
  color: var(--light-gray);
  font-weight: normal;
  font-size: 1.4rem;
}

.bar-content p{
  color: var(--primary-red);
  font-weight: bold;
}

.site-footer {
  background: var(--primary-blue);
  color: var(--white);
  margin-top: 72px;
  padding: 28px 20px;
}

.footer-container {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 2fr 1.2fr;
  gap: 24px;
  align-items: start;
}

.footer-brand-name {
  margin: 0 0 5px;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: bold;
}

.footer-tagline {
  margin: 0;
  color: var(--bg-light);
  font-size: 1rem;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

.footer-links a{
  color: var(--white);
  text-decoration: none;
  font-size: 1.25rem;
}

.footer-links a:hover,
.footer-links a:focus-visible{
  color: var(--white) ;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-links a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 3px;
}

.footer-copyright {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--bg-light);
  font-size: 0.85rem;
}


/* Hamburger button: hidden on desktop, shown via media query below */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1100;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Turns the three bars into an X when open */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.consultation-cta {
  font-size: 1.4rem;
}

@media (max-width: 900px) {

  /* --- Navbar / hamburger menu --- */
  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 25px var(--shadow);
    transition: max-height 0.35s ease;
  }

  .nav-links.active {
    max-height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
  }

  .nav-links li {
    width: 100%;
  }

  .logo-text p{
    display: none;
  }

    /* Shrink bottom bar to icons only, hide separators for a cleaner strip */
  .bar-label {
    display: none;
  }

  .bar-separator {
    display: none;
  }

  .bar-content h4 {
    display: none;
  }

  .bar-content {
    justify-content: left;
    gap: 0.75rem;
  }

  .bar-item {
    padding: 0.6rem;
    gap: 0;
  }

  .bar-icon {
    font-size: 1.1rem;
  }


  /* Free up space at the bottom of the page so the floating button
     doesn't sit on top of content, and shrink the bar's own footprint */
  body {
    padding-bottom: 70px;
  }

  .bottom-bar {
    padding: 0.3rem 0;
  }

  .bar-separator {
    display: none;
  }

  .bar-content h4 {
    display: none;
  }


  /* Turn "Request a Consultation" into a floating action button */
  .consultation-cta {
    position: fixed;
    bottom: 0.6rem;
    right: 1rem;
    z-index: 1001;
    background: var(--primary-red);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: bold;
    padding-bottom: 0.40rem;
    padding-left: 0.5rem;
    padding-top: 0.2rem;
    padding-right: 0.5rem;
    border-radius: 50px;
    box-shadow: 0 8px 24px var(--shadow);
    white-space: nowrap;
    justify-content:center;
  }

  .consultation-cta:hover {
    background: var(--primary-blue);
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0;
    text-align: left;
  }

  .nav-links a:hover {
    border-radius: 0;
  }

  /* --- Hero --- */
  .header {
    min-height: 55vh;
  }

  .hero h2 {
    font-size: 1.6rem;
  }

  .hero h4 {
    font-size: 1rem;
  }

  /* --- Grids collapse to single column --- */
  .section-grid,
  .meta-grid,
  .service-grid,
  .team-profiles {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .meta-grid {
    gap: 16px;
  }

  /* --- About section --- */
  .mission {
    width: 100%;
  }

  .team-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .team-info h3,
  .team-info h4 {
    text-align: center;
  }

  /* --- Case study carousel --- */
  .case-carousel_slide {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .case-left {
    flex: 0 0 auto;
    width: 100%;
  }

  .case-left h3,
  .case-left .case-industry {
    text-align: center;
  }

  .case-results li {
    text-align: left;
  }

  /* --- Footer --- */
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }

  /* --- Bottom bar --- */
  .bar-content {
    gap: 0.5rem;
  }

  .bar-label {
    font-size: 0.85rem;
  }

  p {
    font-size: 1rem;
  }

  h4 {
    font-size: 1.1rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h1 {
    font-size: 1.4rem;
  }

  .case-results li {
    font-size: 1rem;
  }

  /* Let the left column size to its content instead of reserving a fixed
     260px block — this was the main cause of the extra empty space */
  .case-left {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Cap the case-study image height so it can't stretch the card taller
     than the text content next to it */
  .case-logo img {
    max-height: 140px;
    width: auto;
  }

  /* Remove the reserved height/auto sizing quirks on the slide itself */
  .case-carousel_slide {
    height: auto;
    align-items: center;
  }

  .case-card {
    padding: 1.25rem;
  }

  /* Tighten up vertical rhythm now that everything is stacked */
  .case-left {
    gap: 0.5rem;
  }

  .case-right {
    margin-top: 0.5rem;
  }

     /* Hide the dots — Previous/Next buttons become the only navigation */
  .case-carousel_dots {
    display: none !important;
  }

    .case-carousel {
    position: relative;
  }

  .case-carousel_viewport {
    position: static;
  }

  .case-carousel_controls {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    justify-content: space-between !important;
    padding: 0 0.5rem !important;
    margin-top: 0 !important;
    pointer-events: none !important;
    z-index: 5;
  }

  /* !important here guarantees this wins over the base .case-carousel_button
     rule (padding: 10px 18px, no width/height) regardless of stylesheet order */
  .case-carousel_button {
    pointer-events: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px var(--shadow);
    white-space: nowrap;
  }

  .case-carousel_button h4 {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Make room so the overlay buttons don't cover the card's edge content */
  .case-carousel_slide {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  .hero h2 {
    font-size: 1.1rem;
  }

  .client-slide {
    min-width: 220px;
  }

  .cta-btn {
    padding: 0.75rem 2rem;
  }
}