/**
 * @package styles.css
 * @author Simply Wired <info@simplywired.ca>
 * @copyright (c) 2026, Simply Wired
 * @version 0.0.1
 */

:root {
  --primary:rgb(12, 89, 162); /* rgb(215, 25, 32) */
}
* {
  box-sizing:border-box;
}
.about-associations {
  align-items:center;
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  justify-content:center;
}
.about-associations img {
  height:auto;
  width:100%;
}
.back-to-top {
  align-items:center;
  cursor:pointer;
  background-color:rgb(51, 51, 51);
  bottom:1.375rem;
  display:none;
  font-size:1rem;
  height:2rem;
  justify-content:center;
  position:fixed;
  right:1.375rem;
  width:2rem;
}
.back-to-top a {
  color:rgb(255, 255, 255);
}
body {
  color:rgb(119, 119, 119);
  font-family:"Roboto", Helvetica, Arial, sans-serif;
  font-size:1rem;
  line-height:1.75rem;
  margin:0;
  overflow-x:hidden;
  overflow-y:scroll;
  padding:0;
  -webkit-text-size-adjust:100%;
}
.contact-information {
  background-color:rgb(247, 247, 247);
}
.contact-information > .container {
  display:grid;
  gap:2rem;
  grid-template-columns:1fr 1fr;
}
.container {
  margin-left:auto;
  margin-right:auto;
  padding-left:.75rem;
  padding-right:.75rem;
  width:100%;
}
@media(min-width:576px) {
  .container {
    max-width:540px;
  }
}
@media(min-width:768px) {
  .container {
    max-width:720px;
  }
}
@media(min-width:992px) {
  .container {
    max-width:960px;
  }
}
@media(min-width:1200px) {
  .container {
    max-width:1140px;
  }
}
@media(min-width:1400px) {
  .container {
    max-width:1320px;
  }
}
footer {
  display:flex;
  flex-direction:column;
}
footer .copyright {
  background-color:rgb(20, 22, 24);
}
footer .copyright > .container {
  color:rgb(255, 255, 255);
  display:grid;
  font-family:"Roboto", Helvetica, Arial, sans-serif;
  font-size:0.875rem;
  gap:1rem;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  padding:1.75rem 0;
}
footer .copyright .social-icons {
  align-items:center;
  display:flex;
  gap:0.75rem;
  justify-content:flex-end;
}
footer .copyright .social-icons > a {
  color:rgb(255, 255, 255);
}
footer .copyright .social-icons > a:focus, footer .copyright .social-icons > a:hover {
  color:rgb(0, 110, 255);
}
footer .office-details {
  background-color:rgb(27, 29, 31);
}
footer .office-details a {
  color:rgb(255, 255, 255);
  text-decoration:none;
}
footer .office-details .contact-hours {
  align-items:center;
  column-gap:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  row-gap:0.5rem;
}
footer .office-details .contact-hours > div {
  border-bottom:1px solid rgb(255, 255, 255);
  font-size:.75rem;
}
footer .office-details .contact-hours > div:nth-child(even) {
  text-align:right;
  white-space:nowrap;
}
footer .office-details > .container {
  color:rgb(255, 255, 255);
  display:grid;
  font-family:"Roboto", Helvetica, Arial, sans-serif;
  font-size:1rem;
  gap:1.5rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  line-height:1.75rem;
}

footer .office-details h3 {
  color:rgb(255, 255, 255);
  font-size:.75rem;
  margin-bottom:27px;
  text-transform:uppercase;
}
footer .office-details p ~ h3 {
  margin-top:3.375rem;
}
.gallery {
  display:flex;
  flex-wrap:wrap;
  gap:2rem 1.5rem;
  justify-content:center;
  margin:3.125rem auto 7.5rem auto;
  max-width:75rem;
}
.gallery > .gallery-item {
  flex:0 0 calc((100% - 3rem) / 3);
  text-align:center;
}
.gallery > .gallery-item img {
  aspect-ratio:16 / 10;
  border-radius:.5rem;
  display:block;
  height:auto;
  margin-bottom:0.75rem;
  object-fit:cover;
  width:100%;
}
.gallery > .gallery-item a {
  color:rgb(48, 49, 51);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:27px;
  font-weight:600;
  text-decoration:none;
}
.gallery > .gallery-item a:hover {
  text-decoration:underline;
}
header {
  align-items:center;
  background-color:rgb(20, 22, 24);
  color:rgb(255, 255, 255);
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:sticky;
  top:0;
  z-index:1000;
}
header nav {
  position:relative;
  z-index:1000;
}
header nav {
  border-top:1px solid rgba(255, 255, 255, 0.15);
  display:flex;
  flex-wrap:nowrap;
  width:100%;
}
header nav > ul {
  align-items:center;
  display:flex;
  gap:0;
  list-style:none;
  margin:0 auto;
  padding:0;
}
header nav a {
  color:rgb(255, 255, 255);
  display:block;
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:0.875rem;
  padding:1rem 1.25rem;
  position:relative;
  text-decoration:none;
  white-space:nowrap;
}
header nav a:focus-visible, header nav a:hover {
  color:rgb(0, 110, 255);
  outline:none;
}
header nav a[data-toggle="dropdown"] > i {
  border-bottom:2px solid currentColor;
  border-right:2px solid currentColor;
  display:inline-block;
  height:0.4375rem;
  margin-left:0.5rem;
  vertical-align:3px;
  transform:rotate(45deg);
  transition:transform 0.2s ease;
  width:0.4375rem;
}
header nav li {
  list-style:none;
  position:relative;
}
header nav li:focus-within > ul, header nav li:hover > ul, header nav li.is-open > ul {
  display:block;
}
header > nav > ul > li > a {
  border-bottom:3px solid transparent;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
}
header > nav > ul > li > a[aria-current=page] {
  background-color:var(--primary);
  border-bottom:3px solid rgb(255, 255, 255);
  color:rgb(255, 255, 255);
}
header > nav > ul a:focus-visible, header > nav > ul a:hover, header > nav > ul li.is-open > a {
  background-color:var(--primary);
  border-bottom:3px solid rgb(255, 255, 255);
  color:rgb(255, 255, 255);
}
header > nav > ul > li > ul a {
  font-size:.75rem;
}
header > nav > ul > li > ul > li:has(ul) > a {
  font-weight:600;
}
header nav > ul > li.is-open > a[data-toggle="dropdown"] > i {
  transform:rotate(225deg);
}
header nav ul ul {
  background-color:rgb(20, 22, 24);
  border:1px solid rgba(255, 255, 255, 0.15);
  box-shadow:0 0.3125rem 0.9375rem rgb(0 0 0 / 15%);
  display:none;
  left:0;
  margin:0;
  min-width:260px;
  padding:0;
  position:absolute;
  top:100%;
  z-index:1000;
}
header nav ul ul a {
  background-color:rgb(20, 22, 24);
  font-size:0.95rem;
  padding:.25rem 2.5rem .25rem 1rem;
  width:100%;
}
header nav ul ul a:focus-visible, header nav ul ul a:hover {
  background:rgb(30, 32, 34);
  border:0;
}
header nav ul ul a[data-toggle="dropdown"] > i {
  margin:0;
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%) rotate(-45deg);
}
header nav ul ul ul {
  left:100%;
  top:-1px;
}
.homepage-articles {
  background:radial-gradient(circle at left top, #0cb4ce 9%, #006cff 48%, #6442ff 91%);
}
.homepage-articles > .container {
  padding:6.75rem 8.5rem;
}
.homepage-articles > .container > div {
  align-items:center;
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:1.125rem;
}
.homepage-articles > .container > div img {
  height:auto;
  width:7.5rem;
}
.homepage-articles > .container > h2 {
  color:rgb(255, 255, 255);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}
.homepage-biographies {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(2, 1fr);
}
.homepage-biographies > div {
  align-items:center;
  display:flex;
  justify-content:center;
  padding:.5rem;
}
.homepage-biographies > div > div {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  justify-content:start;
}
.homepage-biographies > div > div > * {
  flex:0 0 auto;
}
.homepage-biographies > div > div h2 {
  color:rgb(48, 49, 51);
  font-family:'Quicksand', Helvetica, Arial, sans-serif;
  font-size:3.125rem;
  font-weight:300;
  line-height:3.75rem;
  margin-top:0;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0.3);
}
.homepage-biographies > div > div .button {
  background-color:rgb(0, 108, 255);
  border-radius:7.5rem;
  border:1px solid rgb(0, 108, 255);
  cursor:pointer;
  color:rgb(255, 255, 255);
  font-size:.75rem;
  font-weight:600;
  margin:1px auto;
  outline-style:none;
  padding:.8125rem 2rem;
  text-align:center;
  text-decoration-line:none;
  text-transform:uppercase;
  user-select:none;
  vertical-align:middle;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0.3);
}
.homepage-biographies > div > div .button:hover {
  background-color:rgb(255, 255, 255);
  color:rgb(0, 108, 255);
}
.homepage-biographies > div img {
  border-radius:.5rem;
  height:auto;
  width:22rem;
}
.homepage-introduction {
  background-attachment:scroll;
  background-image:url('/assets/images/Perio.jpg');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  box-sizing:border-box;
  color:rgb(255, 255, 255);
  display:grid;
  flex:1 0 auto;
  height:calc(100% + 30vh);
  min-height:calc(100vh - 125px);
  padding:2rem 0;
  place-items:center;
}
.homepage-introduction > div {
  width:min(100%, 950px);
}
.homepage-introduction > div > h1 {
  color:rgb(255, 255, 255);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:35px;
  font-weight:500;
  text-align:left;
}
.homepage-introduction > div > h2 {
  color:rgb(255, 255, 255);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:27px;
  font-weight:500;
  text-align:left;
}
.homepage-offices {
  background:rgb(255, 255, 255);
  border-radius:.5rem;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  left:50%;
  margin-top:-2.175rem;
  padding:2.175rem;
  place-items:center;
  position:absolute;
  top:100vh;
  transform:translateX(-50%);
  width:min(90%, 72rem);
  z-index:1;
}
.homepage-offices > div, .homepage-offices > div a {
  color:rgb(0, 82, 154);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:23px;
  text-align:center;
}
.homepage-tiles {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  width:100%;
}
.homepage-tiles > a {
  align-items:center;
  aspect-ratio:1 / 1;
  background:rgb(221, 221, 221) no-repeat center center;
  background-size:cover;
  color:rgb(255, 255, 255) !important;
  display:flex;
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:1.475rem;
  justify-content:center;
  text-decoration:none;
  width:100%;
}
.homepage-tiles > :nth-child(1) {
  background-image:url("/assets/images/periodontal-cosmetic-dentistry.jpg");
}
.homepage-tiles > :nth-child(2) {
  background-image:url("/assets/images/dental-implants.jpg");
}
.homepage-tiles > :nth-child(3) {
  background-image:url("/assets/images/teaching.jpg");
}
.homepage-tiles > :nth-child(4) {
  background-image:url("/assets/images/dental-hygiene.jpg");
}
.hp-field {
  height:1px;
  left:-10000px;
  overflow:hidden;
  position:absolute;
  width:1px;
}
hr.separator {
  border-top:1px solid rgb(234, 234, 234);
  margin-bottom:2.25rem;
  margin-top:2.25rem;
}
.image-left {
  border-radius:.25rem;
  float:left;
  height:auto;
  margin:1rem 1.5rem 0 0;
  max-width:50%;
}
.image-right {
  border-radius:.25rem;
  float:right;
  height:auto;
  margin:0 0 1rem 1.5rem;
  max-width:50%;
}
.image-wrap-right {
  border-radius:.5rem;
  float:right;
  height:auto;
  margin-left:.75rem;
  width:34.125rem;
}
main a, main a:visited {
  color:rgb(48, 49, 51);
  text-decoration:none;
}
main a:focus, main a:hover {
  color:rgb(0, 108, 255);
}
main > .container {
  margin-bottom:2rem;
  margin-top:1rem;
}
main h1 a, main h2 a, main h3 a, main h4 a, main h5 a, main h6 a {
  color:rgb(48, 49, 51);
  text-decoration:none;
}
main h1 a:hover, main h2 a:hover, main h3 a:hover, main h4 a:hover, main h5 a:hover, main h6 a:hover {
  color:rgb(43, 160, 163) !important;
  text-decoration:none !important;
}
main h1 {
  color:rgb(48, 49, 51);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:35px;
  font-weight:600;
  line-height:1.2;
  margin:27px 0 0;
  text-align:center;
  text-transform:uppercase;
}
main h2 {
  color:rgb(48, 49, 51);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:27px;
  font-weight:600;
  line-height:1.2;
  margin:27px 0 0;
}
main h3 {
  color:rgb(48, 49, 51);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:23px;
  font-weight:600;
  line-height:1.2;
  margin:27px 0 0;
}
main h4 {
  color:rgb(48, 49, 51);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:19px;
  font-weight:600;
  line-height:1.2;
  margin:27px 0 0;
}
main h5 {
  color:rgb(48, 49, 51);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.2;
  margin:27px 0 0;
}
.page-introduction {
  display:grid;
  gap:2rem;
  grid-template-columns:1fr 1fr;
}
.page-introduction > :nth-child(1) {
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-introduction > :nth-child(1) > h1 {
  border-bottom:2px solid rgb(224, 224, 224);
  margin-bottom:2.25rem;
  padding-bottom:2.25rem;
}
.page-introduction > :nth-child(2) > img {
  border-radius:.5rem;
  height:auto;
  width:100%;
}
.panel-list > .panel-item {
   border-bottom:1px solid rgb(0, 0, 0);
 }
.panel-list > .panel-item > .panel-heading {
  margin:0;
  padding:0;
}
.panel-list > .panel-item > .panel-heading button {
  align-items:center;
  background-color:transparent;
  border:none;
  color:rgb(43, 160, 163);
  display:flex;
  font-family:Raleway, Arial, Helvetica, sans-serif;
  font-size:1.125rem;
  margin:10px 0 0 0;
  padding:.75rem 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.panel-list > .panel-item > .panel-heading button::before {
  align-items:center;
  background-color:rgb(51, 51, 51);
  color:rgb(255, 255, 255);
  content:"+";
  display:flex;
  float:left;
  font-size:13px;
  height:1.375rem;
  justify-content:center;
  margin-right:1.125rem;
  padding:.28rem;
  width:1.375rem;
}
.panel-list > .panel-item > .panel-heading button:hover::before {
  background-color:rgb(43, 160, 163);
}
.panel-list > .panel-item > .panel-heading.is-open button::before {
  content:"−";
}
.panel-list > .panel-item > .panel-panel[hidden] {
  display: none;
}
.mb-1 {
  margin-bottom:1rem;
}
.site-name {
  background-color:rgb(20, 22, 24);
  display:flex;
  height:4rem;
}
.site-name > h1 {
  padding:0;
  margin:auto;
}
.site-name > h1 > a {
  color:rgb(255, 255, 255);
  font-family:'Roboto', Helvetica, Arial, sans-serif;
  font-size:0.875rem;
  font-weight:600;
  text-decoration:none;
}
table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}
table, td, th {
  border:1px solid rgb(221, 221, 221);
}
td, th {
  text-align:left;
  padding:.5rem 1.125rem;
}