@import url('./variables.css');
@import url('./site.css');

/* Global Resets & Base Styles */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-main);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Image containment */
img {
  max-width: 100%;
  display: block;
}

/* ============================================================
   Unified Motion System
   One deterministic writer per animated element so the states
   never fight the interaction engine or get stuck.
   ============================================================ */

.primary-button .button-link,
.button-nav,
.card-button,
.secondary-button .button-link {
  cursor: pointer;
}

.button-link {
  position: relative;
  overflow: hidden;
  display: inline-block;
  border-radius: var(--radius-pill);
}

/* --- Sliding action buttons (dark & light variants) --- */
.button-colour-black,
.button-colour-white {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50px !important;
}

.button-inner,
.button-hover {
  transition: transform var(--duration-ui) var(--ease-luxe) !important;
  will-change: transform;
}

.button-hover {
  position: absolute !important;
  inset: 0 !important;
}

/* Rest states */
.button-colour-black .button-inner,
.button-colour-white .button-inner {
  transform: translate3d(0, 0, 0) !important;
}

.button-colour-black .button-hover,
.button-colour-white .button-hover {
  /* Rest a few px further down than strictly needed: against the pill's
     clipped bottom edge, compositors can leak a subpixel row of the
     (near-white) hover layer onto the card behind — invisible on light
     backgrounds, a bright hairline on the blue maps card. 3px clears it. */
  transform: translate3d(0, calc(100% + 3px), 0) !important;
}

/* Hover states — on the button itself, its wrapper, or its CTA card */
.button-colour-black:hover .button-inner,
.button-colour-white:hover .button-inner,
.primary-button:hover .button-inner,
.secondary-button:hover .button-inner,
.button-link:hover .button-inner,
.card-button:hover .button-inner {
  transform: translate3d(0, -100%, 0) !important;
}

.button-colour-black:hover .button-hover,
.button-colour-white:hover .button-hover,
.primary-button:hover .button-hover,
.secondary-button:hover .button-hover,
.button-link:hover .button-hover,
.card-button:hover .button-hover {
  transform: translate3d(0, 0, 0) !important;
}

/* --- Arrow swap inside CTA cards --- */
.arrow-wrapper-hover {
  position: relative;
  overflow: hidden;
  width: 24px;
  height: 24px;
}

.arrow-wrapper-inner,
.arrow-wrapper-inner-hover {
  transition: transform var(--duration-ui) var(--ease-luxe) !important;
  will-change: transform;
}

.arrow-wrapper-inner {
  transform: translate3d(0, 0, 0) !important;
}

.arrow-wrapper-inner-hover {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-100%, 100%, 0) !important;
}

.card-button:hover .arrow-wrapper-inner {
  transform: translate3d(100%, -100%, 0) !important;
}

.card-button:hover .arrow-wrapper-inner-hover {
  transform: translate3d(0, 0, 0) !important;
}

/* Dropdown interactive state */
.w-dropdown {
  position: relative;
}

.w-dropdown-list {
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.w-dropdown-list.w--open {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* FAQ Accordion rotation & toggle */
.faq-question-wrapper {
  cursor: pointer;
  user-select: none;
}

.faq-question-wrapper .icon-accordion {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-question-wrapper.w--open .icon-accordion {
  transform: rotate(135deg) !important;
}

.faq-dropdown {
  /* The interaction engine writes an inline height (80px) on this
     container, which clips the open answer. Let it size to its content. */
  height: auto !important;
}

.faq-wrapper.w-dropdown-list {
  /* Template default is position:absolute, which clips the open answer
     inside the container's overflow:hidden. Keep it in normal flow so
     the panel actually appears. */
  position: static !important;
  max-height: 0;
  overflow: hidden;
  /* The open/close animation is frame-driven in js/main.js — no CSS
     transition here, so the accordion works even in environments
     that throttle the CSS animation timeline. */
  transition: none !important;
  display: block !important;
  opacity: 0;
}

.faq-wrapper.w-dropdown-list.w--open {
  max-height: 500px;
}

/* Team Slider transitions */
.slider.w-slider {
  position: relative;
  overflow: hidden;
}

.w-slider-mask {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.w-slide {
  flex: 0 0 100%;
  max-width: 100%;
}

.w-slider-dot {
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.w-slider-dot.w-active {
  background-color: var(--color-black) !important;
  transform: scale(1.2);
}

/* Mobile Navigation */
.nav-burger {
  cursor: pointer;
  z-index: 1000;
}

.nav-mobile {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-mobile.is-active {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Burger morphs into an X while the menu is open. The template's own
   interaction used to do this with inline styles; we own it now, driven
   purely by the .is-open class so the icon can never desync from the menu. */
.nav-burger .bar-1,
.nav-burger .bar-2 {
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.3s ease;
}

.nav-burger.is-open .bar-1:first-child {
  transform: translateY(6px) rotate(-45deg);
}

.nav-burger.is-open .bar-1:last-child {
  transform: translateY(-6px) rotate(45deg);
}

.nav-burger.is-open .bar-2 {
  opacity: 0;
}

/* Cart Modal */
.w-commerce-commercecartcontainerwrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: flex-end;
}

.w-commerce-commercecartcontainerwrapper.is-open {
  display: flex !important;
}

.cart-container {
  background: #fff;
  width: 100%;
  max-width: 480px;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
  overflow-y: auto;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ============================================================
   Intro window — Nima brand on a soft blue panel.
   The template's own page-start sequence runs the motion (logo
   fades in, then the panel and the whole site glide up). These
   rules set the look and the exact pre-animation state so there
   is never a flash of unstyled content.
   ============================================================ */
.preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--color-light-blue);
  will-change: transform;
}

.preloaderimage {
  width: min(64vw, 300px);
  height: auto;
  /* The artwork is a JPG painted on white — multiply melts the white
     into the panel colour so no white box shows on the tinted window. */
  mix-blend-mode: multiply;
  opacity: 0; /* matches the animation's initial state — no flash */
  transform: translateY(-1rem);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none;
  }
}

/* Enhanced Navbar Dropdown */
.nav-menu-drop-down {
  position: relative;
}

.dropdown.w-dropdown {
  position: relative;
  display: inline-block;
}

.navbar-dropdown.w-dropdown-list {
  background-color: #313131 !important;
  border-radius: 24px !important;
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  min-width: 720px !important;
  padding: 36px !important;
  z-index: 99999 !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2) !important;
  display: none;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.navbar-dropdown.w-dropdown-list.w--open {
  display: block !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

/* Parallax Image Container — transform is written once per frame by js/main.js.
   Deliberately NO CSS transition here: a transition on a scroll-driven
   transform makes the motion drift on after scrolling stops. */
.image-cover-parallax {
  overflow: hidden !important;
  position: relative;
}

.image-cover-parallax img {
  will-change: transform;
  transform: scale(1.08) translate3d(0, 0, 0);
  transition: scale 1.1s var(--ease-luxe) !important;
  backface-visibility: hidden;
}

/* ============================================================
   Layout corrections
   ============================================================ */

/* The intro sequence lifts .page-wrapper from +1% back to its exact
   resting position. js/main.js releases the leftover transform once
   the intro is over so fixed elements keep behaving as viewport-fixed. */

/* ============================================================
   Navigation — sliding text hover (every link, not just one)
   ============================================================ */
.nav-link .link-inner {
  position: relative;
  overflow: hidden;
}

.nav-link .link-inner-text,
.nav-link .link-inner-text-hover {
  transition: transform var(--duration-ui) var(--ease-luxe) !important;
  will-change: transform;
}

.nav-link .link-inner-text {
  transform: translate3d(0, 0, 0) !important;
}

.nav-link .link-inner-text-hover {
  transform: translate3d(0, 0, 0) !important;
}

.nav-link:hover .link-inner-text,
.nav-link:hover .link-inner-text-hover {
  transform: translate3d(0, -100%, 0) !important;
}

/* Navbar CTA — the chip itself stays perfectly still on hover; only its
   colour shifts and the arrows do their swap. (The template's own hover
   interaction, which turned the chip gray and nudged it, is unbound in
   the markup and fully replaced here.) */
.button-nav .icon-round {
  background-color: var(--color-black); /* navy at rest */
  transition: background-color var(--duration-ui) var(--ease-luxe) !important;
}

.button-nav .icon-arrow-white,
.button-nav .icon-arrow-hover {
  transition: transform var(--duration-ui) var(--ease-luxe) !important;
  will-change: transform;
}

.button-nav .icon-arrow-white {
  transform: translate3d(0, 0, 0) !important;
}

.button-nav .icon-arrow-hover {
  transform: translate3d(0, 0, 0) !important;
}

.button-nav:hover .icon-round {
  background-color: var(--brand-sky) !important; /* light blue on hover */
}

.button-nav:hover .icon-arrow-white {
  transform: translate3d(20px, -20px, 0) !important;
}

.button-nav:hover .icon-arrow-hover {
  transform: translate3d(20px, -20px, 0) !important;
}

/* ============================================================
   Footer — matching link slide + palette-only tones
   ============================================================ */
.footer .footer-link .link-inner {
  position: relative;
  overflow: hidden;
}

.footer .footer-link-text,
.footer .footer-link-text-hover {
  transition: transform var(--duration-ui) var(--ease-luxe) !important;
  will-change: transform;
}

.footer .footer-link-text,
.footer .footer-link-text-hover {
  color: var(--color-black) !important;
  font-weight: 600;
}

.footer .footer-link-text {
  transform: translate3d(0, 0, 0) !important;
}

.footer .footer-link-text-hover {
  transform: translate3d(0, 0, 0) !important;
}

.footer .footer-link:hover .footer-link-text,
.footer .footer-link:hover .footer-link-text-hover {
  transform: translate3d(0, -100%, 0) !important;
}

.footer .text-style-dropdown-titel {
  color: var(--color-text-secondary) !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
}

.footer .text-block {
  color: #2f4d6e !important;
}

.footer strong.footer-link-text {
  color: var(--color-black) !important;
  font-weight: 800 !important;
}

.footer .footer-text {
  color: var(--color-text-secondary) !important;
}

/* ============================================================
   Craft details
   ============================================================ */

/* Hide any construction badge the engine may inject. */
.w-webflow-badge {
  display: none !important;
}

/* Visible, palette-matched keyboard focus */
a:focus-visible,
.button-link:focus-visible,
.button-nav:focus-visible,
.card-button:focus-visible,
.faq-question-wrapper:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible,
.nav-burger:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Text selection, from the palette (browser defaults belong to no design) */
::selection {
  background-color: var(--brand-sky);
  color: var(--color-black);
}

/* Reduced motion — keep every element readable and still */
@media (prefers-reduced-motion: reduce) {
  .button-inner,
  .button-hover,
  .arrow-wrapper-inner,
  .arrow-wrapper-inner-hover,
  .link-inner-text,
  .link-inner-text-hover,
  .footer-link-text,
  .footer-link-text-hover,
  .icon-arrow-white,
  .icon-arrow-hover,
  .icon-round {
    transition: none !important;
  }

  .image-cover-parallax img {
    transform: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Nima Dental — brand system
   Palette sampled from the clinic logo. One place to retune
   the whole site's colour identity. Never gray-on-gray.
   ============================================================ */
:root {
  --blue-100: #1a4b85;            /* blue cards (was template slate) */
  --light-blue-200: #e7f0fa;      /* light card surfaces */
  --off-white-400: #e4eefa;       /* navbar chip + footer surface */
  --black300: #14355c;            /* ink — deep navy replaces template gray */
  --grey-text-600: #52698a;       /* secondary text */
  --light-grey-500-divider: #cfe0f2;
}

/* Template hardcodes a few grays — point them at the brand */
.button-colour-black {
  background-color: #14355c !important;
}

.mobile-button-contact {
  background-color: #14355c !important;
}

.mobile-button-contact:hover {
  background-color: #1e4e86 !important;
}

.faq-wrapper {
  background-color: #e9f2fb !important;
}

.text-meta:not(.text-colour-white) {
  color: #2f6fb0 !important;
}

/* Service cards — the white labels ride photographs of varying brightness.
   A soft, neutral, offset glyph shadow keeps them legible without repainting
   the deliberately airy lower-only gradient. */
.card-square .card-padding {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Navbar logo lockup — mark + two-line wordmark
   ============================================================ */
.nav-logo-lockup {
  display: flex;
  align-items: center;
  gap: 11px;
}

.nav-logo-mark {
  height: 40px;
  width: auto;
  display: block;
  /* tooth artwork comes from the master logo (JPG on white) — multiply
     melts its white background into the pale blue navbar */
  mix-blend-mode: multiply;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-logo-line1 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0048a8;
}

.nav-logo-line2 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 4.6px;
  text-transform: uppercase;
  color: #52a6d8;
  margin-top: 4px;
  /* cancels the trailing letter-space so "CLINIC" optically centers */
  padding-left: 4.6px;
}

/* ============================================================
   Hover motion — slow, heavy, expensive.
   One easing family, no lift, no bounce: the photograph glides
   open, a diffused shadow settles underneath. Nothing jitters.
   ============================================================ */

/* Interactive cards & service cards: the image breathes open */
.card-square:hover .image-content,
.card-button:hover .image-content {
  scale: 1.055;
}

/* Service cards: soft, navy-tinted shadow — never harsh, never black */
.card-square:hover {
  box-shadow: 0 32px 64px -32px rgba(14, 42, 77, 0.45);
}

/* ============================================================
   Scroll reveals — one orchestrated entrance, not a circus
   ============================================================ */
.nima-reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.8s var(--ease-luxe), translate 0.8s var(--ease-luxe),
              box-shadow 0.9s var(--ease-luxe);
}

.nima-reveal.nima-reveal-in {
  opacity: 1;
  translate: 0 0;
}

/* Hero card enters once on load */
.section-home-hero .card {
  animation: nima-hero-in 0.9s var(--ease-luxe) both;
}

@keyframes nima-hero-in {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nima-reveal,
  .section-home-hero .card {
    opacity: 1;
    translate: none;
    transition: none;
    animation: none;
  }
}

/* ============================================================
   Footer — layout rhythm & contact buttons
   ============================================================ */
.footer-brand-logo {
  width: 108px;
  height: auto;
  display: block;
}

/* Balanced vertical rhythm: 64px top, 56px bottom */
.footer {
  padding-top: 0 !important; /* the inline margin-top pair — template's -3rem/3rem reveal trick is disabled */
}

.footer .padding-top.padding-medium {
  padding-top: 40px;
}

.footer .padding-vertical.padding-medium {
  padding-top: 24px;
  padding-bottom: 56px;
}

.footer-second-row {
  padding-top: 28px !important;
  padding-bottom: 0 !important;
}

.footer-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Contact column — the label centers over the button stack.
   (The template's .margin-bottom.margin-small forces text-align:left,
   so the centering needs one extra point of specificity.) */
.footer-contact-head {
  width: 232px;
  max-width: 100%;
}

.footer .footer-contact-head {
  text-align: center;
}

/* The template never defined a top variant of the small margin —
   the moved address block needs its 1rem gap under the socials. */
.footer .margin-top.margin-small {
  margin-top: 1rem;
}

/* Uniform, centered pills — the stack reads as one crafted column */
.footer-phone-button,
.footer-whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 232px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-luxe),
              color var(--duration-fast) var(--ease-luxe),
              border-color var(--duration-fast) var(--ease-luxe),
              transform var(--duration-fast) var(--ease-luxe);
}

.footer-phone-button {
  border: 1px solid rgba(26, 75, 133, 0.35);
  color: var(--brand-blue);
}

.footer-phone-button:hover {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #ffffff;
  transform: translateY(-1px);
}

/* WhatsApp wears its green until you touch it — then it joins the blues.
   The green is deepened from #1fae5a to clear 4.5:1 on the pale footer. */
.footer-whatsapp-button {
  border: 1px solid rgba(37, 211, 102, 0.55);
  color: #137a41;
}

.footer-whatsapp-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

.footer-whatsapp-button:hover {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Social column — same rhythm family as the contact stack */
.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* ============================================================
   Team slider — arrows ride above the cards, in the header row,
   lined up with the intro text on the left.
   (The template parks them at top:-16%, where the section header
   card covers them and eats the clicks.)
   ============================================================ */
.section-home-team .w-slider {
  /* The template clips at the slider box; the slide mask already
     handles clipping, so this frees the arrows to sit above the cards. */
  overflow: visible;
}

.section-home-team .left-arrow {
  top: -64px;
  right: 76px;
  left: auto;
  bottom: auto;
  width: 3rem;
  height: 3rem;
  z-index: 5;
}

.section-home-team .right-arrow {
  top: -64px;
  right: 14px;
  left: auto;
  bottom: auto;
  width: 3rem;
  height: 3rem;
  z-index: 5;
}

.section-home-team .left-arrow,
.section-home-team .right-arrow {
  transition: background-color 0.4s var(--ease-luxe);
}

.section-home-team .left-arrow:hover,
.section-home-team .right-arrow:hover {
  background-color: var(--brand-blue);
}

.section-home-team .left-arrow img,
.section-home-team .right-arrow img {
  transition: scale 0.4s var(--ease-luxe);
}

.section-home-team .left-arrow:hover img,
.section-home-team .right-arrow:hover img {
  scale: 1.12;
}

/* The template pivots these icons around a 12px point (the SVG's natural
   24px size), but they render at 34px — so the rotations orbit the wrong
   spot and kick the arrow glyphs off-centre inside the circles. Restore a
   true centre pivot so both arrows sit dead-centre. */
.section-home-team .left-arrow,
.section-home-team .right-arrow,
.section-home-team .left-arrow img,
.section-home-team .right-arrow img {
  transform-origin: 50% 50% !important;
}

/* ...and on phones the template switches these buttons to display:block,
   which pins the little arrow icon to the circle's top-left corner. Keep
   them flex-centred at every width so the glyph sits dead-centre. */
.section-home-team .left-arrow,
.section-home-team .right-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Small screens — footer stacks cleanly, slider arrows retire
   ============================================================ */
@media (max-width: 767px) {
  .footer-contact-buttons,
  .footer-contact-head,
  .footer-socials {
    width: 100%;
  }

  .footer-phone-button,
  .footer-whatsapp-button {
    width: 100%;
    min-width: 0;
  }

  .footer-socials {
    flex-direction: row;
    gap: 28px;
  }

  /* The template keeps the footer grid at two columns on phones —
     stack it so nothing gets squeezed or cut off. */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* Column one: the brand mark sits centered over its text on phones. */
  .footer .logo-wrapper-link {
    display: block;
  }

  .footer-brand-logo {
    margin-left: auto;
    margin-right: auto;
  }

  /* Even out the column rhythm: an extra last-child bottom margin
     was making some column gaps ~52px while the grid gap is 36px. */
  .footer-grid-inner > .margin-bottom:last-child {
    margin-bottom: 0;
  }

  /* The divider hugged the address — give it the same 28px
     breathing room the bottom row already has. */
  .footer .divider-horizontal {
    margin-top: 28px;
  }

  .footer-second-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Keep the last row clear of the fixed "Book Appointment" pill */
  .footer .padding-vertical.padding-medium {
    padding-bottom: 150px;
  }

  /* The team slider arrows ride on phones too — in the gap between
     the blue "Meet us" card and the doctor cards. flex (not block) keeps
     the arrow glyph centred inside the circle. */
  .section-home-team .w-slider-arrow-left,
  .section-home-team .w-slider-arrow-right {
    display: flex !important;
  }

  /* Old spot on the right — the glyph centering lives below */
  .section-home-team .left-arrow {
    top: 0;
    right: 76px;
  }

  .section-home-team .right-arrow {
    top: 0;
    right: 14px;
  }

  /* --- Section headers: one consistent, luxurious rhythm on phones.
     The eyebrow starts 48px into every section, header text sits on the
     same content line as the cards below, and the services header (a
     card on desktop) flows like every other header instead of being
     stretched into a square. --- */
  .section-home-services .padding-vertical.padding-medium,
  .section-home-team .padding-vertical.padding-medium,
  .section-home-clinic .padding-vertical.padding-medium {
    padding-top: 48px;
  }

  .section-faq .padding-top.padding-medium {
    padding-top: 48px;
  }

  .section-home-services .home-service-grid {
    grid-template-rows: auto 1fr;
  }

  .section-home-services .home-service-grid > .card:first-child .card-padding {
    padding: 0;
  }

  .section-home-services .home-service-grid > .card:first-child .vertical-center {
    justify-content: flex-start;
  }
}