@font-face {
  font-family: 'Roboto';
  src: url(fonts/Roboto-VariableFont_wdth\,wght.woff2);
  font-display: swap;
}

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

:root {
  /* Colors */
  --main-font: 'Roboto';
  --main-font-color: #4d4d4d;
  --white: #FFFFFF;
  --navy-blue: #1D2A45;
  --yellow: #ffc525;
  --accent-font: #00B0F0;
  --background-color: #FAFAFA;

  /* Spacing Measurements */
  --space-0_5: 0.25rem; 
  --space-1:   0.5rem;  
  --space-1_5: 0.75rem; 
  --space-2:   1rem;    
  --space-3:   1.5rem;  
  --space-4:   2rem;    
  --space-5:   2.5rem;  
  --space-6:   3rem;    
  --space-8:   4rem;
  --space-9:   5rem;    
  --space-12:  6rem; 
  --space-13:  7rem;
  --space-14:  8rem;
  --space-16:  10rem;
  --space-17:  40rem;
}

/* Utility Classes */
.flex { display: flex; }
.column { flex-direction: column; }
.space-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.space-around { justify-content: space-around; }
.align-center { align-items: center; }
.text-center { text-align: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.wrap { flex-wrap: wrap; }
.small-text { font-size: 1rem; font-weight: 400; }
.text-accent { color: var(--accent-font); }

/* Global Styles */
a { text-decoration: none; }
body { font-family: var(--main-font); color: var(--main-font-color); background-color: var(--background-color); }
body.no-scroll { overflow: hidden; }
h2 { color: var(--navy-blue); font-size: 3rem; }
h3 { color: var(--navy-blue); font-size: 1.5rem; }
p { line-height: 150%; font-weight: 500; }
ul { list-style-type: none; }

.btn {
  display: inline-block;
  padding: var(--space-1_5) var(--space-2);
  border-radius: 0.15rem;
  color: var(--main-font-color);
  font-weight: 600;
  background-color: var(--yellow);
}

.btn:hover {
  background-color: var(--accent-font);
  color: var(--white);
  text-shadow: 1px 1px var(--main-font-color);
}

img { display: block; }

/* Header */
header {
  position: relative;
  width: 95%;
  margin: auto;
  height: var(--space-9);
}
header a { color: var(--main-font-color); font-weight: 450; }
header a:not(.btn):hover { color: var(--accent-font); }
.header-logo { width: var(--space-16); }

.mobile-nav-container {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 100%;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background-image: linear-gradient(to top, var(--white), var(--background-color));
    overflow: hidden;
    max-height: 0;
    transition: max-height 240ms ease;
    z-index: 1000;
}

.mobile-nav-container.active {
    max-height: 64vh;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.mobile-nav ul {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    font-weight: 500;
    gap: 1.5rem;
    margin: 3.5rem 0;
    text-align: center;
}

.mobile-nav a {
    text-decoration: none;
    color: var(--main-font-color);
}

.hamburger-menu {
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    display: none;
    cursor: pointer;
}

.hamburger-btn,
.hamburger-btn::before,
.hamburger-btn::after {
    display: block;
    position: relative;
    width: 40px;
    height: 3px;
    background: var(--main-font-color);
    border-radius: 2px;
    transition: transform 220ms ease, opacity 180ms ease, background 220ms ease;
    content: "";
}

.hamburger-btn::before,
.hamburger-btn::after {
    position: absolute;
    left: 0;
}

.hamburger-btn::before { transform: translateY(-10px); }
.hamburger-btn::after  { transform: translateY(10px); }

.hamburger-menu.is-open .hamburger-btn,
.hamburger-menu[aria-expanded="true"] .hamburger-btn {
    background: transparent;
}

.hamburger-menu.is-open .hamburger-btn::before,
.hamburger-menu[aria-expanded="true"] .hamburger-btn::before {
  transform: translateY(0) rotate(45deg);
}

.hamburger-menu.is-open .hamburger-btn::after,
.hamburger-menu[aria-expanded="true"] .hamburger-btn::after {
  transform: translateY(0) rotate(-45deg);
}

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

/* ---------- HERO (desktop default, responsive below) ---------- */
.hero {
  height: calc(100vh - var(--space-9));
  flex-wrap: nowrap;
  width: 95%;
  margin: auto;
  border-radius: 0.15rem;
  overflow: hidden;
  padding-bottom: 5vh;
}

.about-hero {
  height: 20vh;
}

.hero-content,
.hero img { flex: 1 1 50%; }

.hero-content {
  color: var(--white);
  background-color: #1d2a45;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23ffffff' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E");
  padding: var(--space-2);
}

.hero-text {
  width: 100%;
  max-width: var(--space-17);
  margin: auto;
}
.hero-text h1 { font-size: 4rem; }
.hero-text p { font-size: 1.5rem; font-weight: 300; margin-bottom: 2rem; }

hr {
  margin: var(--space-2) 0;
  width: 95%;
  border: none;
  border-top: 1px solid var(--white);
}

.hero img {
  object-fit: cover;
  width: 50%;
  height: 100%;
}
.hero .btn { padding: var(--space-3) var(--space-6); }

/* ---------- Sections ---------- */
.section-wrapper {
  width: 100%;
  max-width: 85rem;
  margin: auto;
  padding: 0 var(--space-2);
}

.services-section { padding-top: var(--space-12); }
.services-section-text { gap: var(--space-4); margin-bottom: var(--space-13); }
.services-heading-title { max-width: 45rem; }
.services-heading-body { max-width: 34rem; }

/* Services cards wrap neatly */
.services-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
}
.service { max-width: 18rem; flex: 1 1 14rem; }
.service-icon { height: var(--space-8); margin-bottom: 2rem; }
.service-title { margin-bottom: 1rem; }

/* Pricing */
.pricing-section {
  padding-top: var(--space-14);
}

.pricing-section-background {
  border-radius: 0.15rem;
  background-color: #c6c6c6;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  padding: var(--space-8) 0;
}
.pricing-options-container { margin-top: var(--space-6); }
.pricing-section-text, .why-us-section-text { max-width: 50rem; margin: 0 auto; }

.pricing-option {
  padding: var(--space-4) var(--space-8);
  border-radius: 0.5rem;
  max-width: 30rem;
}
.pricing-heading-title { margin-bottom: var(--space-4); }
.one-time-option { color: var(--navy-blue); background-color: var(--white); }
.subscription-option {
  color: var(--white);
  background-image: linear-gradient(to bottom right, #1D2A45 80%, #00B0F0);
}
.subscription-option h3 { color: var(--white); }
.option-features { margin: 0 auto var(--space-4) 0; width: fit-content; }
.pricing-option .option-features li:not(.not-included)::before {
  content: "✓  "; color: #00f0a4; font-weight: 700; padding-right: var(--space-1_5);
}
.pricing-option .option-features .not-included::before {
  content: "🚫  "; color: #C23B22; padding-right: var(--space-0_5);
}
.price {
  position: relative;
  font-size: var(--space-6);
  margin: var(--space-2);
  border-top: 1px solid var(--navy-blue);
  border-bottom: 1px solid var(--navy-blue);
  padding: var(--space-1_5) 0;
}
.subscription-option .price { border-top: 1px solid var(--white); border-bottom: 1px solid var(--white); }
.subscription-option .price::after { content: "/mo"; position: absolute; font-size: 1rem; bottom: 0; }

/* Process */
.process-section { padding-top: var(--space-14); }
.process-heading-title { margin-bottom: var(--space-4); }
.process-section-right { width: 100%; max-width: 38rem; }
.process-section-left {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 40rem;
}
.process-section-left img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.process-steps-container { width: 100%; max-width: 30rem; margin: var(--space-2) auto 0; }
.step-number { font-size: 4rem; font-weight: 900; color: var(--accent-font); opacity: 0.2; margin-right: -1.5rem; margin-bottom: 1rem; }

/* Testimonials */
.testimonial-section { padding-top: var(--space-14); }
.testimonial-section-text { width: 25rem; max-width: 100%; }
.testimonial-section-text h2 { margin-bottom: var(--space-4); }
.testimonial-section-text .btn, .cta-section .btn { margin-top: var(--space-5); padding: var(--space-3) var(--space-4); }
.testimonials-container { gap: var(--space-8); display: flex; flex-wrap: wrap; justify-content: center; }
.testimonial-card {
  width: 25rem; max-width: 100%;
  padding: 3rem 2rem; font-size: 1.2rem;
  background-color: var(--white); color: var(--navy-blue);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4);
}
.quote { position: relative; }
.quote::before { content: "“"; position: absolute; font-size: 10rem; left: -1rem; top: 2rem; color: var(--accent-font); opacity: 0.1; }
.client { line-height: 1.5rem; font-weight: 900; }

/* About / Reasons */
.why-us-section {
  padding-top: var(--space-14);
}

.why-us-background {
  color: var(--white);
  border-radius: 0.15rem;
  padding: 3rem 0 5rem;
  background-color: #3dae81;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232a957f' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.why-us-section-text h2 { color: var(--white); margin-bottom: var(--space-4); }
.why-us-section p { color: var(--navy-blue); }
.why-us-section-text { width: 50rem; max-width: 95%; }

/* Make reasons wrap responsively */
.reasons-container {
  width: 100%;
  max-width: 70rem;
  margin: 3rem auto 0 auto;
  border-bottom: none;
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--white);
}
.reason {
  display: grid;
  grid-template-columns: 16rem 14rem 1fr;
  align-items: center;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--background-color);
  background: transparent;
}
.reason-img { height: 5rem; width: 15rem; border-radius: 999px; overflow: hidden; }
.reason-img img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.reason h3 { color: var(--white); }
.reason p { margin: 0; }

/* CTA */
.cta-section { padding: var(--space-14) 0; }
.cta-section-text { width: 100%; max-width: 45rem; margin: auto; }

/* Footer */
footer {
  padding: var(--space-8) 0;
  background-color: #1d2a45;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23ffffff' fill-opacity='0.12' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.footer-content { width: 100%; max-width: 70rem; margin: auto; color: var(--white); padding-bottom: var(--space-6); }
footer p { font-weight: normal; color: var(--white); }
.footer-logo { width: 15rem; }
.footer h3 { color: var(--accent-font); margin-bottom: var(--space-2); }
.footer-nav li a { color: var(--white); }
.footer a {
  color: var(--white);
}

/* ---------- CONTACT PAGE ---------- */
/* General Page Styles */
.contact-section {
  padding: var(--space-1) 0 var(--space-8) 0;
}

.contact-background {
  padding: 3rem 2rem;
  border-radius: 0.15rem;
  background-color: #3dae81;
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232a957f' fill-opacity='0.4'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  width: 95%;
}

.contact-section p {
  color: var(--navy-blue);
}

.contact-section h2,
.contact-section h3:not(form h3) {
  color: var(--white);
}

/* Contact Page Text */
.contact-text {
    width: 100%;
    max-width: 32rem;
}

.contact-text h2 {
    margin-bottom: 0.5rem;
}

.contact-text h3 {
    margin-bottom: 0.8rem;
}

.contact-icon {
    width: 2.5rem;
}

.contact-details-container {
    width: fit-content;
}

.contact-details {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-details h3 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.3rem;
}

/* Contact Form */
form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 30rem;
    padding: 3rem;
    background-color: #EEEEEE;
    border-radius: 0.5rem;
    box-shadow: 3px 3px #E5E5E5;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--primary-color);
}

form input,
form textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #EEEEEE;
    border-radius: 0.5rem;
    font: inherit;
    line-height: 1.5; 
    margin-top: 0;
    font-weight: 400;
}

input::placeholder,
textarea::placeholder {
    font-weight: 500;
}

button[type="submit"] {
    border: none;
    margin-top: 0.5rem;
    margin-bottom: -1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */

/* Tablet and down */
@media (max-width: 70rem) {
  .contact-details-container {
    margin: 0 auto;
  }
}


@media (max-width: 64rem) {
  .desktop-nav, 
  .header-btn { display: none; }

  .hamburger-menu {
    display: block;
  }

  .contact-details-container {
    width: fit-content;
    margin: 0 auto;
  }
}

@media (max-width: 60rem) { /* 960px */
  /* HERO stacks */
  .hero {
    height: auto;
    flex-direction: column;
    padding-bottom: 0;
  }
  .hero-content,
  .hero img { flex: 1 1 100%; width: 100%; }

  .hero img {
    height: 48vh;           
    max-height: 28rem;
    aspect-ratio: 16 / 10;
  }
  hr { width: 85%; }

  /* Services header stack */
  .services-section-text {
    flex-direction: column;
    text-align: center;
  }

  /* Process stacks left/right */
  .process-container {
    flex-direction: column;
    align-items: center;
  }

  /* Footer stacks */
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
  }

  /* Testimonial intro centered */
  .testimonial-section-text {
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 48rem) {
  .reason{
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "title"
      "body";
    align-items:start;
    row-gap: var(--space-2);
    text-align: center;
  }

  /* make the image span full width with a pill look */
  .reason-img{
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;   
    border-radius: 999px;
    margin-bottom: var(--space-1_5);
  }
  .reason-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Phones */
@media (max-width: 37.5rem) { /* 600px */
    h2 { font-size: 2rem; }
    h3 { font-size: 1.25rem; }

    .hero-text h1 { font-size: 2.5rem; }
    .hero-text p { font-size: 1.125rem; margin-bottom: 1.25rem; }
    .hero .btn { padding: var(--space-1_5) var(--space-3); }

    .hero img {
    height: 40vh;
    max-height: 22rem;
    aspect-ratio: 16 / 10;
    }

    .services-section { padding: var(--space-8) 0 var(--space-8) 0; }
    .services-section-text { margin-bottom: var(--space-8); }
    .service { max-width: 100%; }

    .price { font-size: 2.25rem; }
    .pricing-section {
      padding-top: var(--space-3);
    }
    .pricing-section .pricing-options-container {
        width: 100vw;             
        margin-left: 50%;
        transform: translateX(-50%);
        border-radius: 0;
        padding: var(--space-8) var(--space-2);
    }

    .pricing-option {
        padding: 2rem 3rem;
    }

    .process-section { padding-top: var(--space-8); }

    .service-icon { display: inline; }
    .service {
      text-align: center;
    }

    .testimonial-section { padding: var(--space-8) 0; }
    .testimonial-section-text { margin-bottom: 0; }

    .why-us-section {
      padding-top: var(--space-1);
    }

    form {
      padding: 1rem 1.5rem 2rem 1.5rem;
      width: 100%;
    }
}