:root {

    /* Fonts */
    --defaultFontFamily: "Outfit", sans-serif;
    --titleFontFamily: "Lora", serif;

    --fw-regular: 400;
    --fw-semi-bold: 600;
    --fw-bold: 700;
 
    --neutral-100:#fff;
    --neutral-400:#707070;
    --neutral-900:#000;

    --primary-300:#D9E5EA;
    --primary-400:#82B2C0;
    --primary-700:#5F7278;

    --secondary-400:#E8EBE3;
    --tertiary-400:#EDDCEA;

    /* Layout */
    --container-wide: 1440;
    --container-narrow: 1024;

    /* Default */
    --transition-default: all 0.3s ease-out;

    --fs-base: 1rem;

    --fs-level1-title: 30px; /* 36px */
    --fs-level2-title: 22px; /* 22px */

    --fs-level1-title-medium: 34px; /* 40px */
    --fs-level2-title-medium: 26px;  /* 40px */

    --fs-level1-title-large: 38px; /* 44px */
    --fs-level2-title-large: 30px; /* 26px */
}


/* Titles and fonts sizes */
.level-1-title {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level1-title); line-height:1.1;}
.level-2-title {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level2-title); line-height:1.1;}
.level-3-title,
.level-3-title button {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level2-title); line-height:1.1; color:var(--primary-700);}
.level-4-title {font-family:var(--titleFontFamily); font-weight:var(--fw-regular); font-size:var(--fs-level2-title); line-height:1.1; color:var(--primary-700); margin-bottom:0.4rem}

@media (min-width:768px) {
  :root {--fs-base:1.2rem;}
  .level-1-title {font-size:var(--fs-level1-title-medium);}
  .level-2-title {font-size:var(--fs-level2-title-medium);}
  .level-3-title,
  .level-3-title button {font-size:var(--fs-level2-title-medium);}
  .level-4-title {font-size:var(--fs-level2-title-medium);}
}

@media (min-width:1024px) {
  .level-1-title {font-size:var(--fs-level1-title-large);}
  .level-2-title {font-size:var(--fs-level2-title-large);}
  .level-3-title {font-size:var(--fs-level2-title-large);}
}



/* Images */
.img-fit {object-fit:cover; width:100%; height:auto;}
.img-corners {border-radius:2rem; border-top-right-radius:0;}
.img-rounded {border-radius:50%;}



/* Button */
.btn {padding:1.2rem 2rem 1.2rem 2rem; border:2px solid var(--primary-400); font-weight:var( --fw-semi-bold); color:var(--neutral-100); border:none; border-radius:12px; font-size:1rem; background:var(--primary-400); text-decoration:none; display:inline-block; white-space:nowrap; text-decoration:none;}
.btn:hover {color:var(--neutral-100); background-color:var(--primary-700); border-color:var(--primary-700);}
.btn-outline {background:var(--neutral-1400); color:var(--primary-400); border:2px solid var(--primary-400)}

@media (min-width:768px) {
    .btn {padding:1.2rem 3rem 1.2rem 3rem;}
}



/* Padding & Margins */
.pt-0 {padding-top:0 !important;}
.pt-1 {padding-top:1rem !important;}
.pt-2 {padding-top:2rem !important;}
.pt-3 {padding-top:3rem !important;}
.pt-4 {padding-top:4rem !important;}
.pt-5 {padding-top:5rem !important;}

.pb-0 {padding-bottom:0 !important;}
.pb-1 {padding-bottom:1rem !important;}
.pb-2 {padding-bottom:2rem !important;}
.pb-3 {padding-bottom:3rem !important;}
.pb-4 {padding-bottom:4rem !important;}
.pb-5 {padding-bottom:5rem !important;}

.mt-0 {margin-top:0 !important;}
.mt-1 {margin-top:1rem !important;}
.mt-2 {margin-top:2rem !important;}
.mt-3 {margin-top:3rem !important;}
.mt-4 {margin-top:4rem !important;}
.mt-5 {margin-top:5rem !important;}

.mb-0 {margin-bottom:0 !important;}
.mb-1 {margin-bottom:1rem !important;}
.mb-2 {margin-bottom:2rem !important;}
.mb-3 {margin-bottom:3rem !important;}
.mb-4 {margin-bottom:4rem !important;}
.mb-5 {margin-bottom:5rem !important;}



/* containers */
.container {width:min(100%, var(--container-wide)*1px); margin:0 auto; padding:0 1rem;}
.container-narrow {width:min(100%, var(--container-narrow)*1px);}
section {padding:80px 0;}
.section-secondary {background: var(--secondary-400);}
.section-secondary .icon {background: var(--neutral-100);}

.columns-two {display:grid; column-gap:3rem; row-gap:1rem;}
.columns-two-offset {display:grid; column-gap:3rem; row-gap:1rem;}

.border-bottom {position:relative;}
.border-bottom::before {content:""; position:absolute; bottom:0; left:1rem; width:calc(100% - 2rem); border-bottom:3px solid var(--primary-400);}

@media (min-width:768px) {
    .container {padding:0 2rem;}
    .columns-two:not(.profile-columns) {grid-template-columns:1fr 1fr;}
    .border-bottom::before {width:calc(100% - 4rem); left:2rem;}
    .columns-two-offset {grid-template-columns:0.9fr 2.1fr;}
}
@media (min-width:968px) {
    .columns-two.profile-columns {grid-template-columns:1fr 1fr;}
}

/* Title */
.title { text-align:center; margin-bottom:6rem; border-radius:0 0 44px 44px; min-height:240px; position:relative;}
.title .level-1-title {color:var(--neutral-100);}
.title::before {content:''; position:absolute; top:0; right:0; width:100%; height:100%; background:var(--primary-400); border-radius:0 0 44px 44px; z-index:-1;}
.title .title-background {padding:0 2rem; position:relative; overflow:hidden; min-height:240px; display:flex; justify-content:center; align-items:center;}
.title .title-background::after {content:''; opacity:0.1; background:url(/images/line-graphic.svg) no-repeat center right -5rem; position:absolute; top:0; right:0; width:600px;  height:100%; background-size:auto 200%; transition: var(--transition-default);}
.title .title-icon {background:var(--primary-300); border-radius:50%; border:6px solid var(--neutral-100); width:90px; height:90px; display:flex; justify-content:center; align-items:center; position:absolute; left:50%; bottom:-45px; translate:-50% 0;}
.title .title-icon svg {position: absolute; top:50%; left:50%; width:50%; translate:-50% -70%;}
.title .title-icon img {width:70%; height:auto; margin-top:-0.5rem;}

@media (min-width:768px) {
  .title {margin-bottom:8rem;}
  .title .title-icon {width:120px; height:120px; bottom:-60px;}
}

@media (min-width:992px) {
    .title::after {background-size:auto 300%;}
}



/* Appointment CTA */
.appointment-cta {background:var(--tertiary-400); padding:3rem 0; text-align:center; margin-top:8rem;}
.cta-container {display:flex; justify-content:center; align-items:center; gap:1rem; flex-wrap:wrap;}
.cta-container img {max-width:120px;}

@media (min-width:576px) {
  .cta-container {gap:3rem;}
}



/* Tables */
.table-wrapper {overflow-x:auto;}
table {font-size:1rem; text-align:left; margin-bottom:1.75rem; border-collapse:collapse; border-spacing:0; width:100%;}
table th,
table td {padding:0.5rem 0.5rem 0.5rem 0; vertical-align:top; border-bottom: 1px solid var(--primary-400);}
table tr:last-child td {border-bottom:none;}

/* Chrome, Edge, Safari */
.table-wrapper::-webkit-scrollbar {height:8px;}
.table-wrapper::-webkit-scrollbar-track {background:#eee;}
.table-wrapper::-webkit-scrollbar-thumb {background-color:#888; border-radius:4px;}

/* Profile */
.profile-img {max-width:200px; margin:0 auto 2rem auto;}    

@media (min-width:576px) {
  .profile-img {max-width:260px; margin:0 0 -2rem auto;}
}