/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


/* roboto-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'); 
}
/* roboto-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2'); 
}
/* roboto-slab-regular - latin 
@font-face {
  font-display: swap; 
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab-v36-latin-regular.woff2') format('woff2');
} */
 
@font-face {
  font-display: swap; 
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v36-latin-700.woff2') format('woff2'); 
}

:root {
  --aug-lavendel : #d9cdd2; 
  --aug-lavendel-medium : #c2b1da;
  --aug-lavendel-dark : #a895c1;
  --aug-lavendel-darkest : #6a597e;
  --aug-yellow : #faf5d0;
  --aug-tangerine : #eacac4; 
  --aug-pink : #e5007d;

  --aug-lavendel-light : #ece0e5; 
  --aug-yellow-light : #fdfbe8;
  --aug-tangerine-light : #f3dedb; 
  --aug-pink-light : #f261b1; 
  --aug-pink-dark : #9f0a5c;
  
  --col-surface-1 : #fefefe;
  --col-surface-2 : var(--aug-yellow-light);

  --col-element-1 : #000;
  --col-element-2 : #2b2b2b;

  --col-primary-1 : var(--aug-lavendel-dark);
  --col-primary-2 : var(--aug-lavendel);

  --col-onprimary-1 : #000000;

  --font-size-sm: clamp(0.8rem, 0.08vi + 0.78rem, 0.84rem);
  --font-size-base: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
  --font-size-md: clamp(1.25rem, 0.45vi + 1.14rem, 1.5rem);
  --font-size-lg: clamp(1.56rem, 0.79vi + 1.36rem, 2rem);
  --font-size-xl: clamp(1.95rem, 1.29vi + 1.63rem, 2.66rem);
  --font-size-xxl: clamp(2.44rem, 2.02vi + 1.94rem, 3.55rem);
  --font-size-xxxl: clamp(3.05rem, 3.06vi + 2.29rem, 4.73rem);
}
html {
	scroll-behavior: smooth;
}
body {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: var(--col-surface-1);
  color: var(--col-element-1);
}
img {
  width: 100%;
  height: auto;
}
h1, h2, h3, h4 {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  color: var(--col-element-1);
  margin-bottom: 0.5em;
}
h1 {
  color: var(--col-primary-1);
  margin-bottom: 0.5em;
  font-size: var(--font-size-xl);
  line-height: 1.1em;
}
h2 {
  font-size: var(--font-size-md);
  line-height: 1.2em;
}
h3 {
  font-size: var(--font-size-md);
}
h4 {
  font-size: var(--font-size-base);
}
@media (min-width: 600px) {
  h1 {
    font-size: var(--font-size-xxl);
  }
  h2 {
    font-size: var(--font-size-lg);
  }
  h3 {
    font-size: var(--font-size-lg);
  }
  h4 {
    font-size: var(--font-size-md);
  }
}
p {
  margin-bottom: 0.5em;
}
p:last-of-type {
  margin: 0;
}
a {
  color: var(--aug-lavendel-darkest);
  font-weight: 700;
  transition: color 500ms;
}
a:hover, a:focus, a:active {
  color: var(--aug-lavendel-dark);
}
button, a.button {
  background-color: var(--aug-lavendel);
  color: var(--col-onprimary-1);
  cursor: pointer;
  text-decoration: none;
  padding: 0.75em 1.2em;
  transition: all 500ms;
  border-radius: 5px;
}
button:hover, a.button:hover {
  background-color: var(--aug-lavendel-medium);
}
button--action,
a.button--action {
  background-color: var(--aug-pink);
  color: var(--col-surface-1);
}
button--action:hover, a.button--action:hover {
  background-color: var(--aug-pink-dark);
} 
ul {
  margin-bottom: 1.5em;
  padding: 0 0 0 1em;
}
ul li::marker {
  color: var(--aug-lavendel-dark);
}

.section__wrapper { 
  padding: 3em 1em;
}
@media (min-width: 600px) {
  .section__wrapper { 
    padding: 5em 1em;
  }
}
.section__wrapper section,
.page__header__inner  {
  max-width: 50em;
  margin: 0 auto;  
}
.page__header__inner {
  display: flex;
  align-items: flex-start;
}
.feature__image {
  border-radius: 50%;
  max-width: 400px;
  height: auto;
  margin: 4em 0 2em -3em;
  z-index: 0;
  width: 55%;
}


.header__logo {
  max-width: 300px;
  width: 45%;
  height: auto;
  margin: 1em 0 2em;
  z-index: 10;
}
.section__wrapper--intro section {
  display: flex;              
  justify-content: flex-start;      
  align-items: center; 
  flex-wrap: wrap;
}

.section__wrapper--intro {
  padding-top: 2em;
  background-image: url('../img/circle.svg');
  background-repeat: no-repeat;
  background-size: 170vw 170vw;
  background-position: -100px 150px;
  transition: background-position 1500ms;
}
@media (min-width: 600px) {
  .section__wrapper--intro {
    background-position: -200px 200px;
  }
}
@media (min-width: 900px) {
  .section__wrapper--intro {
    background-position: -400px 200px;
  }
}
@media (min-width: 1200px) {
  .section__wrapper--intro {
    background-position: -600px 200px;
  }
}
.section__wrapper--intro h2 {
  margin-bottom: 1em;
}
.section__wrapper--kid {
  background-color: #b6a8ce;
}


.intro__button {
  margin-bottom: 2em;
  margin-right: 1em;
  display: inline-block;
}
.content__button {
  margin: 1em 0 0;
  display: inline-block;
}

.section__wrapper--tasks {
  background-color: var(--aug-tangerine-light);
}
.faq__doctor-image img {
  border-radius: 50%;
  margin-top: 1em;
}
.faq__doctor-wrapper {
  margin-top: 3em;
}
@media (min-width: 600px) {
  .faq__doctor-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5em;
    align-items: center;
  }
}


.section__wrapper--contact {
  background-color: var(--aug-lavendel-light);
  margin: 2em 0 0;
  padding: 3em 1em;
  font-size: 1em;
}
.section__wrapper--contact-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
@media (min-width: 800px) {
  .section__wrapper--contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2em;
  }
}

.section__wrapper--contact a:not(.button):hover {
  color: var(--col-element-1)
}

.section__wrapper--legal {
  background-color: var(--aug-lavendel-darkest);
  color: var(--col-surface-1);
  padding: 1em 1em;
}
.link--legal {
  font-size: var(--font-size-sm);
  color: var(--col-surface-1);
}
.link--legal:hover {
  color: var(--aug-lavendel-medium);
}


.back__button {
  margin-top: 2em;
  display: inline-block;
}

.section__wrapper--legal-content h2,
.section__wrapper--legal-content h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.opening-hours td {
  vertical-align: top;
}