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

:root {
  /* BACKGROUND & FONT COLOR */
  --primary-color: #6f00ff;
  --smoke-white: #f5f5f5;
  --secondary-color: #f7f7f7;
  --black-color-first: #2c2c2f;
  --black-color-second: #060609;
  --black-color-third: #c7c7c733;
  --grey-color: #9e9e9e;
  --dark-grey: #777;
  --light-grey: #e0e0e0;
  --white-color: #fff;
  --alice-blue: #f0f5ff;
  --honeydew-section: #ecfcf4;

  /* FONT FAMILY */
  --font-family: "Inter Tight", sans-serif;

  /* FONT SIZES */
  --font-size-99px: clamp(3.5rem, 7vw + 0.75rem, 6.23rem); /* 56px → 99.68px */
  --font-size-70px: clamp(2.375rem, 5vw + 1rem, 4.375rem); /* 38px → 70px */
  --font-size-64px: clamp(2.375rem, 4.5vw + 0.75rem, 4rem); /* 38px → 64px */
  --font-size-57px: clamp(2.25rem, 4vw + 0.75rem, 3.563rem); /* 36px → 57px */
  --font-size-45px: clamp(2rem, 2.8vw + 0.9rem, 2.813rem); /* 32px → 45px */
  --font-size-38px: clamp(1.75rem, 2.4vw + 1rem, 2.375rem); /* 28px → 38px */
  --font-size-29px: clamp(1.375rem, 1.4vw + 1rem, 1.813rem); /* 22px → 29px */
  --font-size-28px: clamp(1.125rem, 1.2vw + 0.9rem, 1.75rem); /* 18px → 28px */
  --font-size-27px: clamp(
    1.0625rem,
    1.1vw + 0.9rem,
    1.688rem
  ); /* 17px → 27px */
  --font-size-26px: clamp(1.0625rem, 1vw + 0.9rem, 1.625rem); /* 17px → 26px */
  --font-size-25px: clamp(1rem, 0.9vw + 0.9rem, 1.563rem); /* 16px → 25px */
  --font-size-24px: clamp(1rem, 0.85vw + 0.9rem, 1.5rem); /* 16px → 24px */
  --font-size-23px: clamp(1rem, 0.8vw + 0.85rem, 1.438rem); /* 16px → 23px */
  --font-size-22px: clamp(1rem, 0.7vw + 0.85rem, 1.375rem); /* 16px → 22px */
  --font-size-20px: clamp(0.95rem, 0.6vw + 0.8rem, 1.25rem); /* ~15px → 20px */
  --font-size-19px: clamp(
    0.95rem,
    0.55vw + 0.8rem,
    1.188rem
  ); /* ~15px → 19px */
  --font-size-18px: clamp(0.95rem, 0.5vw + 0.8rem, 1.125rem); /* ~15px → 18px */
  --font-size-17px: clamp(
    0.9rem,
    0.45vw + 0.78rem,
    1.0625rem
  ); /* 14.4px → 17px */
  --font-size-16px: clamp(0.875rem, 0.35vw + 0.8rem, 1rem); /* 14px → 16px */
  --font-size-14px: clamp(
    0.8125rem,
    0.25vw + 0.7575rem,
    0.875rem
  ); /* 13px → 14px */
  --font-size-10px: clamp(
    0.5625rem,
    0.2vw + 0.55rem,
    0.625rem
  ); /* 9px → 10px */

  /* EXTRA SIZES USED IN YOUR CSS (NOW ALSO clamp()) */
  --font-size-96px: clamp(3.5rem, 7vw + 0.75rem, 6rem); /* 56px → 96px */
  --font-size-15px: clamp(
    0.875rem,
    0.25vw + 0.82rem,
    0.9375rem
  ); /* 14px → 15px */
  --font-size-12px: clamp(
    0.6875rem,
    0.2vw + 0.65rem,
    0.75rem
  ); /* 11px → 12px */
  --font-size-btn: clamp(1rem, 0.4vw + 0.9rem, 1.125rem); /* 16px → 18px */

  /* HERO-SPECIFIC (YOU HAD clamp() PLACEHOLDER HERE) */
  --hero-h1-size: clamp(2.813rem, 4vw + 1.25rem, 4rem); /* 45px → 64px */
}

/* UTILITIES SECTION */
body {
  font-family: var(--font-family);
  line-height: 1.2;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.container-small {
  max-width: 900px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.hero-right img {
  display: inline-block;
  position: relative;
  width: 100%;
  height: auto;
}

.socials a img {
  width: 19px;
  margin-left: 1rem;
  display: inline-block;
}

.logo a img {
  width: 130px;
  display: inline-block;
}

.service-card .service-count img {
  width: 60px;
  height: auto; /* TEMPORARY FIX */
}

.grey {
  color: var(--grey-color);
}

/* BUTTON UTILITY */
.btn {
  display: inline-block;
  position: relative;
  padding: 16px 30px;
  border-radius: 3rem;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-weight: 600;
  font-size: var(--font-size-btn);
  transition: 0.3s ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/arrow-right.svg) no-repeat center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.btn:hover {
  color: transparent;
}

.btn:hover::after {
  opacity: 1;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* HEADER SECTION */

.head-section {
  width: 100%;
  padding: 0.8rem 5% 1rem;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.nav-section {
  padding: 10px 5%;
}

.nav-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.hamburger-menu {
  display: inline-flex;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  --bar-offset: 6px;
}

.menu-toggle .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--black-color-second);
  transform-origin: center;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-toggle .bar:first-child {
  transform: translateY(calc(var(--bar-offset) * -1));
}

.menu-toggle .bar:last-child {
  transform: translateY(var(--bar-offset));
}

.menu-toggle.is-active .bar:first-child {
  transform: translateY(0) rotate(45deg);
}

.menu-toggle.is-active .bar:last-child {
  transform: translateY(0) rotate(-45deg);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
}

/* HERO SECTION */

.hero-section {
  position: relative;
  padding: 11rem 5% 7rem;
  background-color: var(--white-color);
  margin-bottom: 0.8rem;
}

.hero-section .animation-arrow {
  text-align: center;
  margin-top: 3rem;
}

.hero-section .animation-arrow img {
  display: inline-block;
  position: relative;
  width: 1.8rem;
  height: auto;
}

.hero-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 4rem;
  gap: 4rem;
}

.hero-left {
  flex: 1 1 480px;
}

.hero-left h1 {
  font-size: var(--hero-h1-size);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.hero-left p {
  font-size: var(--font-size-28px);
  font-weight: 600;
  max-width: 30ch;
  margin-bottom: 1.5rem;
}

.hero-left h1 .focus-word {
  position: relative;
  display: inline-block;
}

.hero-left h1 .focus-word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  background: url(assets/fav_scribbble.svg) no-repeat left bottom;
  background-size: contain;
  pointer-events: none;
}

.hero-right {
  flex: 1 1 480px;
}

.hero-right img {
  width: 100%;
}

/* SERVICE SECTION */

.service-section {
  background-color: var(--white-color);
  padding: 1rem 6%;
  margin-bottom: 7rem;
}

.service-content .service-flex {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
}

.service-flex .service-card {
  display: flex;
  flex-direction: column; /* FIX FOR CARD BUTTON ALIGNMENT */
  flex: 1;
  margin-bottom: 1.5rem;
  min-height: 200px;
}

.service-card .service-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Test for temp changes */
}

.service-card .service-text .service-btn {
  position: relative;
  margin-top: auto; /* Push button to bottom */ /* FIX FOR CARD BUTTON ALIGNMENT */
  display: inline-block;
  align-items: flex-start;
}

.service-flex .service-card .service-btn::before {
  content: "";
  width: 0.9rem;
  height: 1.5px;
  position: absolute;
  top: 25px;
  left: 0;
  background-color: var(--black-color-second);
  transition: 0.3s ease;
}

.service-card .service-text .service-btn:hover::before {
  width: 100%;
}

.service-section .service-content h2 {
  font-size: var(--font-size-38px);
  font-weight: 600;
  margin-bottom: 3.5rem;
}

.service-section .service-count {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: -1rem;
}

.service-section .service-count img {
  display: inline-block;
}

.service-card .numbers {
  border: 2px solid var(--light-grey);
  border-radius: 3rem;
  font-weight: 500;
  padding: 0.7rem;
  color: var(--grey-color);
  margin-bottom: 4rem;
}

.service-flex .service-card h3 {
  font-size: var(--font-size-22px);
  margin-bottom: 1rem;
}

.service-flex .service-card p {
  font-size: var(--font-size-18px);
  font-weight: 500;
  margin-bottom: 1rem;
}

.service-flex .service-card a {
  display: inline-block;
  font-size: var(--font-size-16px);
  color: var(--black-color-second);
  font-weight: 600;
}

.service-card .service-btn img {
  display: inline-block;
  margin-left: 0.2rem;
  width: 10px;
  transition: transform 0.25s ease;
}

.service-card .service-btn:hover img {
  transform: translate(8px);
  position: relative;
}

/* FEATURE SECTION */

.feature-section {
  background-color: var(--white-color);
  padding: 1rem 5%;
  margin-bottom: 5rem;
}

.feature-section .feature-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5rem;
}

.feature-content .contents {
  flex: 1 1 480px;
}

.feature-content .feature-image {
  flex: 1 1 480px;
}

.feature-content .feature-image img {
  width: 100%;
}

.feature-content .content-top {
  margin-bottom: 2rem;
}

.contents .content-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.content-bottom .ctb {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
}

.ctb .content-bottom-flex {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feature-content .content-top h3 {
  font-size: var(--font-size-45px);
  color: var(--black-color-second);
  margin-bottom: 1rem;
}
.feature-content .content-top h4 {
  font-size: var(--font-size-25px);
  color: var(--black-color-second);
}

.feature-content .content-top p {
  font-size: var(--font-size-18px);
  font-weight: 600;
  color: var(--dark-grey);
  margin-bottom: 0.8rem;
}

.content-bottom .ctb h4 {
  font-size: var(--font-size-22px);
  margin-bottom: 1rem;
}

.content-bottom .ctb p {
  font-size: var(--font-size-16px);
  font-weight: 500;
  margin-bottom: 0.9rem;
}

.content-bottom .ctb a {
  font-size: var(--font-size-16px);
  color: var(--black-color-second);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.content-bottom .ctbr img,
.content-bottom .ctbl img {
  width: 45px;
  margin-bottom: 1rem;
}

.ctb .feature-btn img {
  display: inline-block;
  margin-left: 0.2rem;
  width: 10px;
  vertical-align: -15px;
  transition: transform 0.25s ease;
}

.ctb .feature-btn {
  position: relative;
  display: inline-block;
  margin-top: auto;
  width: fit-content;
}

.ctb .feature-btn::before {
  content: "";
  width: 0.9rem;
  height: 1.3px;
  position: absolute;
  top: 25px;
  left: 0;
  background-color: var(--black-color-second);
  transition: 0.3s ease;
}

.ctb .feature-btn:hover::before {
  width: 100%;
}

.ctb .feature-btn:hover img {
  transform: translate(8px);
  position: relative;
}

/* EXPERIENCE AND CAROUSEL SECTION  */

.experience-section {
  background-color: var(--white-color);
  padding: 1.5rem 5%;
  margin-bottom: 7rem;
}

.experience-section .business-leads {
  margin-bottom: 6rem;
}

.experience-section .business-leads h4 {
  font-size: var(--font-size-25px);
  text-align: center;
  margin-bottom: 3.5rem;
}

.experience-section .business-leads .grey {
  color: var(--grey-color);
  font-weight: 500;
}

/* Logos row */
.experience-section .business-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  gap: 1rem;
}

.business-images .bis {
  flex: 0 1 auto;
}

.business-images .bis img {
  width: 100px;
  object-fit: contain;
}

/* Experience layout */
.experience-section .experience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
}

.experience .experience-text {
  flex: 1 1 480px;
  min-width: 280px;
}

.experience .experience-card {
  flex: 1 1 520px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.experience .experience-text h3 {
  font-size: var(--font-size-45px);
  margin-bottom: 1.2rem;
}

.experience .experience-text p {
  font-size: var(--font-size-25px);
  font-weight: 500;
  margin-bottom: 1.5rem;
  max-width: 32ch;
}

/* Testimonial card */
.experience-card .card {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card .card-text {
  flex: 1 1 auto;
  min-width: 0; /* prevents overflow in flex items */
}

.card .card-image {
  flex: 0 0 auto;
}

.card .card-image img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 20rem;
}

.card-text blockquote {
  font-size: var(--font-size-16px);
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.testimonial-author .author-name {
  font-size: var(--font-size-18px);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.testimonial-author .author-title {
  font-size: var(--font-size-16px);
  color: var(--dark-grey);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

/* RECENT WORK SECTION */

.recent-work {
  padding: 1rem 2%;
  margin-bottom: 1.5rem;
}

.rcw-top .rw-text {
  margin-bottom: 3rem;
}

.rcw-top .rw-text h3 {
  font-size: var(--font-size-70px);
  font-weight: 600;
  text-align: center;
}

.rcw-top .rw-gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.gallery-item {
  width: calc(50% - 15px);
}

/* METRICS SECTION */

.stats-section {
  padding: 5rem 2%;
  background-color: var(--primary-color);
  background-image: linear-gradient(63deg, var(--primary-color), #483efd);
  margin-bottom: 5rem;
}

.percent .numero {
  display: block;
  font-size: var(--font-size-96px);
  font-weight: 600;
  color: var(--white-color);
}

.percent .numero .top {
  font-size: var(--font-size-38px);
  font-weight: 400;
  margin-left: 6px;
  color: rgba(225, 225, 225, 0.6);
}

.stats-content .metrics-flex {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  padding: 0 3rem;
  gap: 1rem;
}

.stats-content .metrics-flex p {
  font-size: var(--font-size-17px);
  color: var(--white-color);
  font-weight: 500;
  max-width: 30ch;
}

.metrics-flex .percent {
  flex: 1.2;
}

.metrics-flex .trustpilot {
  flex: 1;
  padding: 2rem 0;
  border-left: 1.5px solid rgba(225, 225, 225, 0.3);
  min-width: 250px;
}

.trustpilot .trustpilot-content {
  margin-left: 3rem;
}

.trustpilot-content .review {
  margin-bottom: 1rem;
}

.trustpilot-content .score {
  color: rgba(225, 225, 225, 0.9);
  font-weight: 500;
}

.trustpilot .review img {
  width: 150px;
}

.trustpilot .score .decimal {
  display: block;
  margin-bottom: 1.5rem;
}

.trustpilot .score .date {
  color: rgba(225, 225, 225, 0.9);
}

/* PRICING SECTION */
.pricing-section {
  background: var(--white-color);
  padding: 3rem 5%;
  margin-bottom: 6rem;
}

.pricing-text-top {
  margin-bottom: 2rem;
}

.pricing-content .pricing-text-top h3 {
  font-size: var(--font-size-38px);
  font-weight: 600;
  margin-bottom: 1rem;
}

.pricing-content .pricing-text-top p {
  font-size: var(--font-size-27px);
  font-weight: 550;
  margin-bottom: 3rem;
}

/* cards pricing section */
.pricing-content .pricing-card-flex {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.pricing-card-flex .pricing-card {
  background: var(--white-color);
  box-shadow: 0px 10px 26px rgba(0, 0, 0, 0.3);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pricing-card-flex .prices-2 {
  position: relative;
  border: 2px solid var(--primary-color);
}

.pricing-card-flex .prices-2::after {
  content: "Most Popular";
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 10px 15px;
  background-color: #6f00ff;
  font-size: var(--font-size-12px);
  font-weight: 600;
  color: var(--white-color);
  border-radius: 1.5rem;
}

.pricing-card .price-text h4 {
  font-size: var(--font-size-29px);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.pricing-card .price-text .first {
  font-size: var(--font-size-17px);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.pricing-card .price-text .second {
  font-size: var(--font-size-17px);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.pricing-card .pricing-card_features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.35rem;
}

.pricing-card .pricing-card_features li {
  display: flex;
  align-items: flex-start;
  font-size: var(--font-size-15px);
  font-weight: 500;
  padding: 0.2rem;
}

.pricing-card .pricing-card_features .check {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  width: 22px;
}

.pricing-card-flex .pricing-card_btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(224, 224, 224, 0.6);
  padding: 1.063rem 6rem;
  border-radius: 35px;
  margin-top: auto;
  color: var(--black-color-second);
  font-weight: 600;
  transition: 0.5s all ease;
  white-space: nowrap;
}

.pricing-card-flex .pricing-card_btn:hover {
  background-color: var(--black-color-first);
  color: var(--secondary-color);
}

/* FOOTER SECTION */

.footer-section {
  background: var(--smoke-white);
  padding: 7rem 5% 5rem;
}

.footer-content .footer-content-bottom {
  margin-bottom: 2rem;
}

.footer-content .footer-content-top {
  text-align: center;
}

.footer-content .footer-content-top h2 {
  font-size: var(--font-size-99px);
  font-weight: 600;
  margin-bottom: 2rem;
}

.footer-content .footer-content-top {
  margin-bottom: 8rem;
}

.footer-content .footer-content-top .footer-btn {
  font-size: var(--font-size-19px);
}

.footer-content .footer-content-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* footer left */
.visit-us .visit {
  border: 2px solid var(--black-color-first);
  text-transform: uppercase;
  font-size: var(--font-size-14px);
  font-weight: 700;
  border-radius: 5rem;
  padding: 0.7rem 1rem;
  width: fit-content;
  margin-bottom: 2rem;
}

.address-contact .city {
  position: relative;
  font-size: var(--font-size-17px);
  font-weight: 600;
  margin-bottom: 2rem;
  width: fit-content;
}

.address-contact .city::after {
  position: absolute;
  content: "";
  top: 25px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--black-color-second);
}

.address-contact .address {
  font-size: var(--font-size-17px);
  font-weight: 600;
  margin-bottom: 2rem;
  width: 20ch;
}

/* footer right */
.contact .number {
  position: relative;
  font-size: var(--font-size-17px);
  font-weight: 600;
  margin-bottom: 2rem;
  width: fit-content;
}

.contact .number::after {
  position: absolute;
  content: "";
  top: 25px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--black-color-second);
}

.contact .email {
  position: relative;
  font-size: var(--font-size-17px);
  font-weight: 600;
  margin-bottom: 2rem;
  width: fit-content;
}

.contact .email::after {
  position: absolute;
  content: "";
  top: 25px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--black-color-second);
}

/* RESPONSIVE REFINEMENTS */

@media screen and (max-width: 1024px) {
  .head-section {
    padding: 0.8rem 3%;
  }

  .hero-section,
  .service-section,
  .feature-section,
  .experience-section,
  .pricing-section,
  .footer-section {
    padding-left: 4%;
    padding-right: 4%;
  }

  .hero-section {
    padding-top: 9.5rem;
    padding-bottom: 3rem;
  }

  .hero-flex,
  .feature-section .feature-content,
  .experience-section .experience {
    gap: 2.5rem;
  }

  .service-content .service-flex,
  .pricing-content .pricing-card-flex {
    gap: 1.5rem;
  }

  .pricing-card-flex .pricing-card {
    padding: 2.2rem 1.3rem;
  }

  .pricing-card-flex .pricing-card_btn {
    width: 100%;
    max-width: 300px;
    padding: 1rem 1.4rem;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-content .footer-content-top {
    margin-bottom: 4rem;
  }
}

@media screen and (max-width: 768px) {
  .socials {
    display: none;
  }

  .head-section {
    padding: 0.75rem 1rem;
  }

  .logo a img {
    width: 118px;
  }

  .hero-section {
    padding-top: 8.25rem;
  }

  .hero-left p,
  .experience .experience-text p,
  .pricing-content .pricing-text-top p {
    max-width: 100%;
  }

  .service-content .service-flex,
  .pricing-content .stats-content,
  .metrics-flex {
    grid-template-columns: 1fr;
  }

  .content-bottom {
    display: grid;
    grid-template-columns: 1fr;
  }
  .experience-section .business-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.2rem;
    padding: 0;
  }

  .business-images .bis img {
    width: 90px;
  }

  .experience-card .card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.1rem;
  }

  .card .card-image {
    order: -1;
  }

  .card .card-image img {
    width: 88px;
    height: 88px;
  }

  .gallery-item {
    width: 100%;
  }

  .metrics-flex .trustpilot {
    min-width: 0;
  }

  .pricing-card-flex .prices-2::after {
    top: 10px;
    right: 10px;
    padding: 8px 12px;
  }

  .footer-section {
    padding-top: 4.5rem;
    padding-bottom: 2.25rem;
  }

  .footer-content .footer-content-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
}

@media screen and (max-width: 576px) {
  .head-section {
    padding: 0.6rem 0.85rem;
  }

  .nav-section {
    padding: 10px 5%;
  }

  .menu-toggle {
    width: 34px;
    height: 20px;
    --bar-offset: 5px;
  }

  .menu-toggle .bar {
    width: 100%;
  }

  .hero-section {
    padding-top: 7.5rem;
    padding-bottom: 2rem;
  }

  .hero-left h1,
  .feature-content .content-top h3,
  .experience .experience-text h3,
  .pricing-content .pricing-text-top h3 {
    font-size: var(--font-size-38px);
  }

  .hero-left p {
    font-size: var(--font-size-20px);
  }

  .btn,
  .footer-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .service-section,
  .feature-section,
  .experience-section,
  .recent-work,
  .pricing-section,
  .footer-section {
    margin-bottom: 3.5rem;
  }

  .stats-section {
    margin-bottom: 3.5rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .pricing-card-flex .pricing-card {
    padding: 1.5rem 1rem;
  }

  .pricing-card-flex .prices-2::after {
    font-size: var(--font-size-10px);
  }

  .footer-content .footer-content-top h2 {
    margin-bottom: 1.3rem;
  }
  .business-images .bis img {
    width: 76px;
  }
}

@media screen and (max-width: 768px) {
  .footer-content .footer-content-bottom {
    padding: 0;
  }
}

@media screen and (max-width: 576px) {
  .footer-section {
    padding: 4rem 5% 2.25rem;
  }

  .experience-section .business-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
  }

  .business-images .bis img {
    width: 76px;
  }
}

/* BUTTON FLUID/CENTER FIX */
@media screen and (max-width: 768px) {
  .hero-left,
  .experience .experience-text,
  .footer-content .footer-content-top,
  .pricing-content .pricing-text-top {
    text-align: center;
  }

  .btn,
  .footer-btn,
  .pricing-card-flex .pricing-card_btn {
    display: block;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media screen and (max-width: 576px) {
  .btn,
  .footer-btn,
  .pricing-card-flex .pricing-card_btn {
    max-width: 320px;
  }
}

/* STATS CENTERING FIX */
@media screen and (max-width: 768px) {
  .stats-content .metrics-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 2rem;
    padding: 0 1rem;
    text-align: center;
  }

  .metrics-flex .percent,
  .metrics-flex .trustpilot {
    width: min(100%, 420px);
    min-width: 0;
  }

  .metrics-flex .trustpilot {
    border-left: 0;
    padding: 0;
    margin-top: 0;
  }

  .stats-content .metrics-flex p {
    margin-left: auto;
    margin-right: auto;
  }

  .trustpilot .trustpilot-content {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 576px) {
  .stats-content .metrics-flex {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 1.5rem;
  }

  .metrics-flex .percent,
  .metrics-flex .trustpilot {
    width: 100%;
  }
}

/* PRICING 820PX LAYOUT FIX */
@media screen and (max-width: 820px) and (min-width: 577px) {
  .pricing-content .pricing-card-flex {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .pricing-content .pricing-card-flex .pricing-card:last-child {
    grid-column: 1 / -1;
    justify-self: start;
    width: 100%;
    max-width: none;
  }
}

/* SECTION DROPDOWN MENU */
.nav-section {
  position: relative;
}

.hamburger-menu {
  position: relative;
}

.socials,
.logo,
.menu-toggle {
  position: relative;
  z-index: 45;
}

.section-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 84px;
  width: 100vw;
  height: calc(100vh - 84px);
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  background: #fff;
  border: 0;
  box-shadow: none;
  z-index: 9;
  padding: clamp(6rem, 11vh, 8rem) 5% 2.5rem;
  counter-reset: nav-item;
  display: grid;
  place-content: start center;
}

.section-menu[hidden] {
  display: none;
}

.section-menu a {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 14px);
  color: var(--black-color-second);
  font-size: clamp(42px, 8vw, 80px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: clamp(6px, 1.1vh, 10px) 0;
  text-decoration: none;
}

.section-menu a::before {
  counter-increment: nav-item;
  content: counter(nav-item, decimal-leading-zero);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #c7c7c733;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

@media screen and (max-width: 768px) {
  .section-menu {
    top: 74px;
    height: calc(100vh - 74px);
    max-height: calc(100vh - 74px);
    padding-top: 4.8rem;
  }

  .section-menu a {
    font-size: clamp(36px, 7.5vw, 64px);
  }
}

@media screen and (max-width: 480px) {
  .section-menu {
    top: 66px;
    height: calc(100vh - 66px);
    max-height: calc(100vh - 66px);
    padding-top: 4rem;
  }

  .section-menu a {
    font-size: clamp(30px, 10vw, 46px);
    gap: 10px;
    margin: 6px 0;
  }

  .section-menu a::before {
    width: 38px;
    height: 38px;
  }
}

@media screen and (max-width: 576px) {
  .pricing-content .pricing-card-flex {
    grid-template-columns: 1fr;
  }
}

body.menu-open {
  overflow: hidden;
}