@charset "UTF-8";
@import url("https://use.typekit.net/irb5bac.css");
::-moz-selection {
  background: rgba(150, 37, 39, 0.1);
}

::selection {
  background: rgba(150, 37, 39, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background-color: #faf4e8;
  color: #695243;
  font-family: "kepler-std", serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 300;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.6rem;
  font-weight: 300;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

p a {
  position: relative;
  padding: 0 0.3rem;
}
p a::after {
  transition: all 0.3s;
  content: "";
  display: block;
  position: absolute;
  height: 0.2rem;
  background-color: rgba(105, 82, 67, 0.1);
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
p a:hover {
  color: #faf4e8;
}
p a:hover::after {
  background-color: #962527;
  height: 1.2em;
}

img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

nav ul {
  list-style: none;
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
  opacity: 0.8;
}

button,
a.button {
  color: inherit;
  background-color: transparent;
  border: 1px solid #695243;
  border-radius: 0.6rem;
  display: inline-block;
  font-family: inherit;
  opacity: 1;
  outline: none;
  padding: 0.6rem 2.4rem;
  text-align: center;
  transition: opacity 0.3s;
}
button.button-primary,
a.button.button-primary {
  color: #faf4e8;
  background-color: #962527;
  border: 0;
}
button.button-phone,
a.button.button-phone {
  border: 1px solid #962527;
  overflow: hidden;
  position: relative;
}
button.button-phone::after,
a.button.button-phone::after {
  background-color: #faf4e8;
  outline: 2px solid #962527;
  border-radius: 0.6rem;
  color: #962527;
  content: "☎ " attr(data-phone);
  left: 0;
  padding: 0.45rem 0.6rem;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translate(0, -100%);
  transition: transform 0.3s;
  width: calc(100% - 1.2rem);
  z-index: 1;
}
button:focus, button:hover, button:active,
a.button:focus,
a.button:hover,
a.button:active {
  opacity: 0.8;
}
button:focus.button-phone, button:hover.button-phone, button:active.button-phone,
a.button:focus.button-phone,
a.button:hover.button-phone,
a.button:active.button-phone {
  opacity: 1;
}
button:focus.button-phone::after, button:hover.button-phone::after, button:active.button-phone::after,
a.button:focus.button-phone::after,
a.button:hover.button-phone::after,
a.button:active.button-phone::after {
  transform: translate(0, 0);
}

/* width */
::-webkit-scrollbar {
  background: #faf4e8;
  width: 0.4rem;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 0.4rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #962527;
  border-radius: 0.4rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #bf2f32;
}

header {
  background-color: #faf4e8;
  left: 0;
  padding: 2.4rem min(10vh, 10vw);
  top: 0;
  width: 100%;
  z-index: 10;
}
header nav {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.6rem;
  justify-content: space-between;
}
header nav h1 a img {
  height: 6.4rem;
  width: auto;
}
header nav span {
  display: none;
}

section img {
  border: 0.6rem solid #faf4e8;
  border-radius: 0.6rem;
  box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.25);
  height: 100%;
  object-fit: cover;
  position: relative;
}

section figure {
  position: relative;
}
section figure figcaption {
  bottom: 0;
  color: #faf4e8;
  font-size: 0.8rem;
  margin: 1.2rem;
  left: 0;
  opacity: 0.8;
  position: absolute;
  right: 0;
  text-align: right;
  text-shadow: 0 0 0.3rem black;
}

section {
  padding: min(10vh, 10vw);
}
section.hero {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
  grid-template-areas: "text" "images";
  position: relative;
  align-items: center;
}
section.hero .content.text {
  grid-area: text;
}
section.hero .content.text * + * {
  margin-top: 2.4rem;
}
section.hero .content.text h2 {
  font-size: 4.8rem;
}
section.hero .content.text h3 {
  font-size: 2.4rem;
}
section.hero .content.images {
  display: grid;
  gap: 1.6rem;
  grid-area: images;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b" "c b";
}
section.hero .content.images figure:nth-child(1) {
  grid-area: a;
}
section.hero .content.images figure:nth-child(2) {
  grid-area: b;
}
section.hero .content.images figure:nth-child(3) {
  grid-area: c;
}
section.hero::after {
  content: url(../img/logo/logo_icon.svg);
  left: min(5vh, 5vw);
  opacity: 0.05;
  position: absolute;
  top: min(5vh, 5vw);
  width: 50%;
  z-index: -2;
}
section.hero.h {
  padding-top: 0;
}
section.section .section-title {
  color: #962527;
  background-color: rgba(150, 37, 39, 0.1);
  border-radius: 0.6rem;
  display: inline-block;
  font-family: inherit;
  outline: none;
  padding: 0.6rem 2.4rem;
}
section.section .main-section-title {
  font-size: 2.4rem;
  margin-top: 2.4rem;
}
section.section .section-description {
  margin-top: 2.4rem;
}
section.section .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
section.section ul.grid {
  list-style: none;
}
section.section ul.grid li {
  aspect-ratio: 1/1;
}
section.section ul.grid li .text {
  background-color: rgba(250, 244, 232, 0.9);
  bottom: 2.4rem;
  color: #962527;
  left: 50%;
  padding: 2.4rem;
  position: absolute;
  text-align: center;
  top: auto;
  transform: translate(-50%, 0);
  width: calc(100% - 4.8rem);
  z-index: 2;
}
section.section ul.grid li .text h4 {
  font-weight: 600;
}
section.section ul.grid li .text p {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: all 0.3s;
}
section.section ul.grid li:focus .text, section.section ul.grid li:hover .text, section.section ul.grid li:active .text {
  max-height: calc(100% - 4.8rem);
  overflow-y: auto;
}
section.section ul.grid li:focus .text p, section.section ul.grid li:hover .text p, section.section ul.grid li:active .text p {
  height: auto;
  margin-top: 1em;
  opacity: 1;
}
section.section ul.grid li a {
  border: 0.6rem solid #faf4e8;
  border-radius: 0.6rem;
  box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.25);
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  z-index: 0;
}
section.section ul.grid li a img {
  border: 0;
}
section.section ul.grid li figure {
  aspect-ratio: 1/1;
}
section.section.text * + * {
  margin-top: 2.4rem;
}
section.section.text h4,
section.section.text h5,
section.section.text h6 {
  font-size: 2rem;
  font-weight: 600;
}
section.section.text p {
  line-height: 1.5;
}
section.section.centered {
  text-align: center;
}
section.section.centered .main-section-title {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
}
section.section.centered .main-section-title .line {
  background-color: #695243;
  flex-grow: 1;
  height: 1px;
  margin-top: 0;
  opacity: 0;
}
section.section.centered .main-section-title span {
  margin-top: 0;
  padding: 0 1.6rem;
}
section.section.aboutus {
  margin: min(10vh, 10vw);
  padding: 2.4rem;
  border: 1px solid #962527;
  border-radius: 2.4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  grid-template-areas: "text" "images";
}
section.section.aboutus .content.text {
  grid-area: text;
  align-self: center;
}
section.section.aboutus .content.text .counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 2.4rem;
}
section.section.aboutus .content.text .counters p span {
  display: block;
  font-size: 3.2rem;
  font-weight: 600;
}
section.section.aboutus .content.images {
  display: grid;
  gap: 1.6rem;
  grid-area: images;
  grid-template-columns: 1fr;
}
section.section.aboutus .content.images figure,
section.section.aboutus .content.images img {
  aspect-ratio: 1/1;
}
section.section.cta {
  background-color: rgba(150, 37, 39, 0.1);
  text-align: center;
}
section.section.cta .main-section-title {
  margin-top: 0;
}
section.section.cta .button {
  margin-top: 2.4rem;
}

footer {
  background-color: #962527;
  color: #faf4e8;
  display: grid;
  font-size: 1.2rem;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  padding: min(10vh, 10vw);
  text-align: center;
  align-items: center;
}
footer a.logo img {
  height: 4.8rem;
  width: auto;
}
footer nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: center;
}
footer nav ul li a {
  color: #faf4e8;
  padding: 0.6rem;
}
footer nav ul li a img {
  width: 2.4rem;
}

@media screen and (max-width: 759px) {
  section.hero .content.images {
    gap: 0.6rem;
    border-radius: 0.6rem;
    border: 0.6rem solid #faf4e8;
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.25);
  }
  section.hero .content.images img {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}
@media screen and (min-width: 760px) {
  section.hero {
    gap: 1.6rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text images";
  }
  section.section .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.6rem;
    margin-top: 2.4rem;
  }
  section.section.aboutus {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.6rem;
    grid-template-areas: "text images images";
  }
  section.section.aboutus .content.text {
    align-self: center;
  }
  section.section.aboutus .content.images {
    display: grid;
    gap: 1.6rem;
    grid-area: images;
    grid-template-columns: 1fr 1fr;
  }
  section.section.aboutus .content.images figure,
  section.section.aboutus .content.images img {
    aspect-ratio: auto;
  }
  section.section.aboutus .content.images figure {
    height: 100%;
  }
  section.section.aboutus .content.images img {
    border-radius: 0.6rem;
    height: 100%;
    object-fit: cover;
    position: relative;
    box-shadow: 6px 6px 32px 0 rgba(0, 0, 0, 0.5);
    border: 0.6rem solid #faf4e8;
  }
  section.section.aboutus .content.images figure:nth-child(1) {
    bottom: -20%;
  }
  section.section.aboutus .content.images figure:nth-child(2) {
    top: -20%;
  }
  section.section.centered .main-section-title .line {
    opacity: 0.5;
  }
  footer {
    gap: 1.6rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  footer .logo {
    text-align: left;
  }
  footer nav ul {
    flex-direction: row;
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1020px) {
  section.hero {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "text images images";
  }
  section.hero .content.images {
    display: grid;
    grid-area: images;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b c" "d b f";
  }
  section.hero .content.images figure {
    height: 100%;
  }
  section.hero .content.images img {
    border: 0.6rem solid #faf4e8;
    border-radius: 0.6rem;
    height: 100%;
    object-fit: cover;
  }
  section.hero .content.images figure:nth-child(1) {
    bottom: 20%;
    grid-area: d;
    position: relative;
    right: -20%;
    z-index: 1;
  }
  section.hero .content.images figure:nth-child(1) img {
    box-shadow: 6px 6px 32px 0 rgba(0, 0, 0, 0.5);
  }
  section.hero .content.images figure:nth-child(2) {
    grid-area: b;
    z-index: 0;
  }
  section.hero .content.images figure:nth-child(2) img {
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.25);
  }
  section.hero .content.images figure:nth-child(3) {
    grid-area: c;
    left: -20%;
    position: relative;
    top: 20%;
    z-index: 1;
  }
  section.hero .content.images figure:nth-child(3) img {
    box-shadow: 6px 6px 32px 0 rgba(0, 0, 0, 0.5);
  }
  section.section ul.grid li a:focus, section.section ul.grid li a:hover, section.section ul.grid li a:active {
    box-shadow: 6px 6px 32px 0 rgba(0, 0, 0, 0.5);
    opacity: 0.8;
    transform: scale(1.05);
    z-index: 1;
  }
  section.section.aboutus .content.images figure,
  section.section.aboutus .content.images img {
    aspect-ratio: 1/1;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80%;
  }
  header {
    padding: 2.4rem min(30vh, 30vw);
  }
  footer,
  section {
    padding: min(10vh, 10vw) min(30vh, 30vw);
  }
  section.hero {
    height: calc(100vh - 11.2rem);
  }
  section.section.aboutus {
    margin: min(10vh, 10vw) min(30vh, 30vw);
  }
  section.section.aboutus .content.images figure,
  section.section.aboutus .content.images img {
    aspect-ratio: 1/1;
  }
}/*# sourceMappingURL=screen.css.map */