/*
Theme Name: acompanado-tea
Theme URI: http://example.com
Author: dev.cesanchez
Description: Tema hecho a medida para mi proyecto.
Version: 0.1
License: GNU General Public License v2 or later
Text Domain: acompanado-tea
*/

:root {
  --color-elements: rgb(48, 66, 84);
  --color-Titles: rgb(56, 163, 165);
  --semitransparency: rgba(36, 49, 61, .4);
  --font-sour: 'Sour Gummy', system-ui, -apple-system, "Segoe U", Roboto, sans-serif;
  --font-text: "Montserrat", Arial, sans-serif;
  --title-font-size: clamp(40px, 6.2vw, 50px);
  --background-principal: rgb(198, 239, 239);
  --background-alt: rgb(198, 239, 239);
  --background-color: linear-gradient(to right, #def2ef, #fefefe);
  --blob-path: path("M161.575,16.511C173.007,2.241 192.383,-2.952 209.419,3.691L234.803,13.59C244.57595609987018,17.40095222289281 255.42404390012982,17.400952222892805 265.197,13.59L290.581,3.691C307.617,-2.952 326.993,2.241 338.425,16.511L355.459,37.775C362.01759671259555,45.9618535228291 371.4126250796823,51.3858646953633 381.782,52.972L408.714,57.092C426.789,59.857 440.974,74.042 443.738,92.117L447.858,119.049C449.44399706163296,129.41814594656026 454.8680598775463,138.812906849401 463.055,145.371L484.319,162.405C498.59,173.837 503.782,193.214 497.139,210.249L487.241,235.633C483.4299833851818,245.40628911348963 483.42998338518174,256.25471088651034 487.241,266.028L497.139,291.412C503.782,308.448 498.59,327.824 484.319,339.256L463.055,356.29C454.8680598775462,362.8480931505989 449.4439970616329,372.2428540534397 447.858,382.612L443.738,409.544C440.973,427.619 426.789,441.804 408.714,444.569L381.781,448.689C371.4119199856808,450.27518482644285 362.0172227934551,455.6992108590488 355.459,463.886L338.425,485.15C326.993,499.421 307.617,504.613 290.581,497.97L265.197,488.071C255.42404390012976,484.26004777710716 244.57595609987013,484.2600477771071 234.803,488.071L209.419,497.97C192.383,504.613 173.007,499.421 161.575,485.15L144.541,463.886C137.9827772065448,455.6992108590487 128.5880800143191,450.2751848264428 118.219,448.689L91.286,444.569C73.211,441.804 59.026,427.619 56.262,409.544L52.142,382.612C50.55590905334673,372.24288702023273 45.131864629812284,362.8481579739556 36.945,356.29L15.68,339.256C1.41,327.824 -3.782,308.448 2.86,291.412L12.758,266.028C16.568918833196808,256.2546924965151 16.568918833196808,245.40630750348487 12.758,235.633L2.86,210.249C-3.783,193.214 1.409,173.837 15.68,162.405L36.944,145.371C45.130864629812336,138.8128420260443 50.55490905334679,129.41811297976716 52.141,119.049L56.261,92.117C59.025,74.042 73.21,59.857 91.285,57.092L118.218,52.972C128.58704705021623,51.385721298997616 137.98171239090232,45.96171365586995 144.54,37.775Z");
  --bullet-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 484.32 470.65'><path fill='%23de6a99' d='M223.215 24.219c123.281 0 223.219 99.938 223.219 223.215s-99.938 223.215-223.219 223.215S0 370.711 0 247.434 99.934 24.219 223.215 24.219z'/><path fill='%23ae3e63' d='M469.324 230.578c-.137 44.887-14.07 88.367-39.895 125.063-24.848 35.309-60.988 62.648-101.457 77.52-42.66 15.672-89.738 17.203-133.438 4.945-42.133-11.82-79.602-36.945-107.555-70.469C28.89 297.973 22.547 195.949 69.145 118.688 91.637 81.391 125.54 51.895 165.043 33.777c40.86-18.742 87.95-23.504 131.89-14.582 43.067 8.746 82.485 30.945 112.868 62.59 30.536 31.809 50.235 72.75 57.129 116.203 1.707 10.758 2.363 21.699 2.395 32.59.031 9.672 15.031 9.676 15 0-.141-45.574-13.602-90.418-38.961-128.316C420.765 65.504 385.51 36.156 344.89 18.688 302.109.289 254.664-4.5 208.961 4.199c-43.856 8.348-84.684 30.363-116.63 61.398C26.219 129.813 5.094 230.949 39.434 316.387c16.668 41.469 45.187 77.059 81.543 102.961 36.949 26.328 81.754 40.613 127 41.875 91.211 2.539 177.418-51.73 215.383-134.508 13.824-30.137 20.863-62.996 20.965-96.137.031-9.676-14.969-9.672-15 0z'/></svg>");
  --map-width: clamp(300px, 80vw, 768px);
  --map-height: clamp(300px, 80vw, 768px);
  --navbar-height: 50px;
}

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

.header-container {
  display: flex;
  align-items: center;
}

.button-menu {
  display: none;
  background: none;
  border: none;
}


/* - -- navbar --- */

.navbar {
  position: fixed;
  top: 0;
  background: rgb(255, 255, 255);
  width: 100%;
  z-index: 999;
}

.navbar-list {
  justify-content: flex-end;
  display: flex;
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 1rem;
}

.navbar-link {
  font-family: var(--font-text);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-elements);
  padding: .5rem;
  font-size: clamp(0.75rem, 0.5rem + 0.5vw, 1.125rem);

}

.navbar-link:hover {
  font-weight: 800;
  color: rgb(173, 173, 173);
}

@media (max-width: 1503px) {
  .navbar-list {
    gap: .5rem;
  }

  .navbar-link {
    padding: .4rem;
  }

  .navbar-link {
    font-size: clamp(0.7rem, 0.45rem + 0.2vw, 0.9375rem);
  }
}

@media (max-width: 1280px) {
  .navbar {
    --drawer-w: min(88vw, 360px);
    height: var(--navbar-height);
  }

  .navbar-list {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: min(60vw, 360px);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 10vh 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow: auto;
    z-index: 999;
    justify-content: flex-start;
    text-align: right;
  }

  .button-menu {
    display: flex;
    padding: .75rem;
    color: var(--color-elements);
    margin-left: auto;
    margin-right: 4%;
    justify-content: flex-end;
    align-items: end;

    cursor: pointer;
  }

  .navbar.is-open .navbar-list {
    transform: translateX(0);
  }

  .navbar .navbar-link {
    padding: 12px 8px;
    font-size: clamp(1rem, 0.8rem + 0.8vw, 1.25rem);
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 997;
    opacity: 0;
    pointer-events: none;
  }

  .nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.no-scroll {
    overflow: hidden;
  }
}

/* - -- Principal --- */

.main-container {
  background: var(--background-color);
  padding-top: 45px;
}

.welcome-section {
  background-color: var(--background-alt);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  font-family: var(--font);
  min-height: clamp(520px, calc(70svh - 48px), 760px);
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .welcome-section {
    grid-template-columns: 1fr;
  }
}

.logo-container {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: auto;
  align-items: center;
}

.imagen-logo {
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1 / 1;
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
  padding-block-end: 10%;
}


.imagen-logo img {
  width: clamp(150px, 70vw, 350px);
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  padding-top: 70px;
}

.logo-container .imagen-logo .center-info{
  color: var(--color-Titles);
  display: grid;
  justify-items: center;
}

.logo-container .imagen-logo .center-info a{
  color: rgba(48, 66, 84, 0.8);
  text-decoration: none;
}

.center-container {
  width: 100%;
  height: clamp(250px, 100vh, 760px);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  margin-inline: auto;
}

.welcome-image {
  max-height: 100%;
}

.top-corner-l {
  width: clamp(30px, 30vw, 180px);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: 0;
}

.bottom-corner-r {
  width: clamp(30px, 30vw, 250px);
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0
}

.bottom-corner-l {
  width: clamp(30px, 30vw, 250px);
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* - -- SECCIONES --- */

.section-title {
  font-family: var(--font-text);
  font-size: var(--title-font-size);
  line-height: 1;
  font-weight: 700;
  margin: 0;
  color: rgb(153, 217, 217);
  padding-inline: clamp(12px, 4vw, 32px);
}

.subhead-text {
  text-align: center;
  font-family: var(--font-text);
  line-height: 1.5;
}

.imagen-logo .section-text {
  text-align: center;
  position: relative;
  font-weight: normal;
}

.section-icon {
  z-index: 900;
  text-align: center;
  width: 100%;
}

.section {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(640px, 80vh, 760px);
  overflow: hidden;
}

@media (max-width: 768px) {
  .section {
    min-height: clamp(480px, 30svh, 900px);
    padding-block: 10%;
  }
}

.section .image-container {
  position: absolute;
  place-items: center;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  width: 100%;
}

.section .image-container .section-image {
  width: 100%;
  height: clamp(250px, 100vh, 760px);
  object-position: center;
  display: block;
  z-index: 1;
  opacity: 0.15;

  overflow: hidden;
  position: relative;
  object-fit: cover;
}

.section .centered-elements {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(6px, 1.5vw, 6px);
  max-width: min(100ch, 92vw);
}

.section-text {
  color: var(--color-elements);
  font-family: var(--font-text);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 65ch;
  margin-top: 20px;
  line-height: 1.6;
}

/* --- Specialist section -- */

.specialists-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: clamp(64px, 4vw, 128px);
  justify-items: legacy;
  padding-block: 10%;
}

/* .specialists-grid>.specialist-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
} */

.specialist-card {
  font-family: var(--font-text);
  position: relative;
  display: grid;
  align-items: center;
  max-width: clamp(195px, 50vw, 250px);
  min-height: 116px;
  padding: 16px 16px 16px 116px;
  border-radius: 16px;
  background: #d8f0f2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  overflow: visible;
}

.specialist-card .avatar {
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  background: #a9dee1;
  border: 6px solid #a9dee1;
  display: block;
}

.specialist-card .avatar img {
  position: absolute;
  left: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--focusY, 50%);
}

.specialist-card .name {
  font-family: var(--font);
  color: var(--color-elements);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  margin: 0 0 4px;
}

.specialist-card .role {
  margin: 0 0 12px;
  font-size: .9rem;
  opacity: .85;
}

.specialist-card .btn {
  justify-self: end;
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#42a5f5, #1976d2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}

@media (max-width: 768px) {
  .specialists-grid {
    grid-template-columns: 1fr;
  }

  .specialist-card {
    width: 50vw;
    padding-left: 132px;
  }

  .specialist-card .avatar {
    left: -1%;
    width: 130px;
    height: 130px;
  }
}

/* --- Service Section --- */

.service-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  font-family: var(--font);
}

.service-section .service-title>h2 {
  color: rgba(0, 0, 0);
}

.service-section .service-title .reserve-button {
  width: 100%;
  background-color: rgb(81, 182, 182);
  border: none;
  border-radius: 10px;
  height: 75px;
  color: white;
  font-size: clamp(20px, 6.2vw, 35px);
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.service-section .service-info {
  font-family: var(--font-text);
  line-height: 1;
  text-align: left;
}

.service-section .service-info h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: clamp(2.4em, 6.2vw, 40px);
}

.service-section .service-info p {
  font-size: clamp(10px, 6.2vw, 20px);
  margin: 0 5%;
}

@media (max-width: 768px) {

  .service-section {
    grid-template-columns: 1fr;
    padding-block: 0;
  }

  .service-section .image-container .section-image {
    width: auto;
    height: 100%;
    object-fit: cover;
  }

  .service-info {
    margin-top: 10%;
    margin-bottom: 10%;
  }

  .service-section .service-info .title {
    font-size: 1.2em;
  }

  .service-section .service-info h4 {
    font-size: clamp(1.6em, 4.5vw, 20px);
  }

  .service-section .service-info p {
    font-size: clamp(5px, 4vw, 15px);
    line-height: 1.2;
  }
}

/* ---- Schedule Section ----*/

.section .schedule-container {
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(184, 198, 252);
  border-radius: 5% 5% 5% 5%;
  line-height: 1.5;
  margin: 20px;
  padding: 0 40px;
  font-weight: 500;
}

/* ---- place Section ---- */

.map-container {
  background-color: rgb(255, 255, 255);
  width: calc(var(--map-width) + 7%);
  height: calc(var(--map-height) + 2%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-frame {
  width: var(--map-width);
  aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
  .map-frame {
    width: var(--map-width);
    aspect-ratio: 4 / 3;
  }
}

/* --- Speacialist info --- */

.specialist-info-header {
  background: center / contain no-repeat var(--pill);
  padding-block: clamp(10px, 3vw, 24px);
  padding-inline: clamp(16px, 6vw, 48px);

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(6px, 1.5vw, 6px);
  max-width: min(72ch, 92vw);
}

.specialist-info-header .name {
  font-family: var(--font-sour);
  font-size: 3em;
  color: rgba(0, 0, 0);
  margin-bottom: 0;
}

.specialist-info-header .role {
  font-size: 1.5em;
  color: rgba(0, 0, 0);
  margin: 0;
  font-weight: bolder;
  padding-bottom: 10%;
}

.specialist-info-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  width: 100%;
  min-height: clamp(260px, 60svh, 760px);
  height: auto;
  overflow: hidden;
}

.specialist-certifications {
  font-size: 1em;
  width: 80%;
  position: relative;
  margin: 0;
  font-family: var(--font-text);
  font-weight: bold;
}

.specialist-description {
  text-align: center;
  font-size: 1.2em;
  margin: 20px;
  width: 60%;
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 24px;
  justify-content: center;
}

.specialist-highlights {
  font-size: 1em;
  font-family: var(--font-text);
  font-weight: normal;
}

.specialist-highlights span {
  font-size: 1.5em;
}

.frame-bouba {
  position: relative;
  margin-left: 10%;
  width: 400px;
  aspect-ratio: 8/8;
  overflow: hidden;
  clip-path: url(#blobClip);
  border-radius: 38% / 42%;

  --img-scale: var(--img-scale-d, 1.1);
  --img-tx: var(--img-tx-d, 0px);
  --img-ty: var(--img-ty-d, 0px);
}

.frame-bouba .container {
  width: 100%;
}

.custom-list {
  list-style: none;
  padding-left: 0;
  font-size: 1.2em;
  line-height: 1.6;
  font-weight: bold;
}

.custom-list li {
  position: relative;
  padding-left: 28px;
}

.custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--bullet-circle) no-repeat center / contain;
}

@media (max-width: 768px) {
  .specialist-info-header .name {
    font-size: clamp(1.6em, 2vw, 2em);
  }

  .specialist-info-header .role {
    font-size: 1em;
  }

  .specialist-info-section {
    grid-template-columns: 1fr;
  }

  .frame-bouba {
    width: 230px;
    margin-left: 25vw;
    --img-scale: var(--img-scale-m, 1.1);
    --img-tx: var(--img-tx-m, 0px);
    --img-ty: var(--img-ty-m, var(--img-ty-d, 0px));
  }

  .specialist-certifications {
    font-size: .9em;
    width: 100%;
    font-weight: 500;
  }

  .specialist-description {
    font-size: 1em;
    margin: 0 20px 20px;
    line-height: 17px;
    width: 90%;
    text-align: left;
  }

  .specialist-highlights span {
    font-size: 1.3em;
  }

  .custom-list {
    list-style: none;
    padding-left: 4%;
    font-size: 1em;
    line-height: 1.3;
    font-weight: bold;
  }
}

.frame-bouba .container>img.photo {
  position: relative;
  left: 50%;
  top: 50%;

  width: calc(100% * var(--img-scale, 1.1));
  height: calc(100% * var(--img-scale, 1.1));
  object-fit: cover;

  transform: translate(-50%, -50%) translate(var(--img-tx, 0px), var(--img-ty, 0px));
  will-change: transform;
}

/* ---- Opinion Section ----*/

.section .centered-opinion {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: clamp(6px, 1.5vw, 6px);
  min-width: min(800px, 92vw);
}

.opinion-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

.opinion-reminder {
  position: relative;
  left: 0;
  width: clamp(280px, 30vw, 340px);
  height: auto;
  padding-block-end: 5%;
}

.opinion-reminder .reminder {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 26px;
  width: min(92vw, 500px);
  fill: #0a2a2a;
  text-anchor: middle;
}

/* .opinion-stars {
  position: absolute;
  right: 20%;
  width: clamp(180px, 90vw, 340px);
  transform:
    scale(var(--bg-right-scale));
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .08));
  opacity: .25;
} */

.section .opinion-container {
  place-items: center;
  min-height: clamp(156px, 40svh, 760px);
  max-width: min(800px, 92vw);
}

.section .opinion-container .opinion-text {
  position: relative;
  margin: 5%;
  font-family: var(--font-text);
  display: grid;
}

.opinion-text>p {
  font-weight: bold;
}

.opinion-text>h3>a {
  color: rgb(0, 0, 0);
}

.section .opinion-container .opinion-frame {
  border: solid;
  border-width: 10px;
  border-color: rgb(199, 249, 204);
  width: 85%;
  min-height: 230px;
  height: auto;
  position: relative;
}


.esq {
  position: absolute;
  line-height: 0;
  color: #38a3a5;
}

.esq--tl {
  top: 0;
  left: 0;
  transform: translate(-10%, -10%);
}

.esq--br {
  bottom: 0;
  right: 0;
  transform: translate(10%, 10%);
}

.esq svg {
  width: clamp(60px, 8vw, 160px);
  height: auto;
}

.floating-icon-container {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(30px, env(safe-area-inset-bottom)) + 8px);
  display: grid;
  gap: 10px;
  z-index: 9999;
}

.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 48px;
  padding: 14px;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
}

.wa-btn.wa-primary {
  background: #36a860;
}

.wa-btn.wa-secondary {
  background: #128C7E;
}

.wa-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;

  --fab-size: 56px;
  inline-size: var(--fab-size);
  block-size: var(--fab-size);
}

.wa-btn:hover {
  transform: translateY(-7px);
  filter: brightness(1.05);
}

@media (max-width: 420px) {
  .wa-icon {
    --fab-size: 45px;
  }

}

.footer {
  background: #ebebeb;
  width: auto;
  display: grid;
  gap: 2px;
  font-family: var(--font-text);
}

.footer a {
  color: #ebebeb;
}

.footer .section-1 {
  background: #2f2f2f;
  display: flex;
  color: #ebebeb;
  /* padding: 32px 0; */
  width: 100%;
  align-content: center;
}

.footer .section-2 {
  background: #2f2f2f;
  display: flex;
  color: #ebebeb;
  /* padding: 32px 0; */
  width: 100%;
}

.brandmark {
  flex: 1 1 25%;
  margin-left: 1rem;
  justify-items: center;
}

.brandmark .logo {
  aspect-ratio: 1/1;
  filter: grayscale(1);
  width: clamp(120px, 40vw, 180px);
  display: block;
}

.footer .nav-container {
  flex: 1 1 25%;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px
}

.footer .section-1 .contact {
  flex: 1 1 25%;
  display: grid;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.footer .section-1 .contact a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.footer .section-1 .contact .social a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  margin-right: 8px;
  gap: 8px;
}

.footer .section-2 .legal a{
  gap: 30px;
}

.site-footer .container {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr))
}



@media (max-width: 768px) {
  .footer .section-1 {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 16px;
  }

  .footer .section-1 > .brandmark    { order: 3; }
  .footer .section-1 > .nav-container{ order: 2; }
  .footer .section-1 > .contact      { order: 1; }

  
  .footer .section-1 > .nav-container {
    /* flex: 1 1 calc(50% - 8px); */
    min-width: 0;
    padding-inline: 16px;
  }

  .footer .section-1 > .brandmark,
  .footer .section-1 > .contact {
    flex: 1 1 100%;
    padding: 16px;
  }
  
/*   .footer .section-1 .contact a svg {
    display: block;
    flex: 0 0 auto;
  } */
}