html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: "Jost", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #4A4138;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.title {
font-family: "Fraunces", serif;
}
h1 {
font-size: 3rem;
color: #4A4138;
font-weight: 600;
line-height: 60px;
}
.btn {
padding: 9px 25px;
border-radius: 100px;
font-weight: 600;
letter-spacing: 1px;
}
.btn-brown {
background-color: #5B4430;
border: 1px solid #5B4430;
}
.btn-brown:hover {
background-color: #443323;
border: 1px solid #443323;
}
.btn-green {
background-color: transparent;
border: 1px solid #6F7A5E;
color: #6F7A5E;
}
.btn-green:hover {
background-color:transparent;
border: 1px solid #6F7A5E;
color: #6F7A5E;
}
.btn-centered {
display: table;
margin-right: auto;
margin-left: auto;
}
.nav-link,
.btn {
transition: all 0.2s ease;
}
.nav-link:hover,
.btn:hover {
transform: translateY(-1px);
}
span.why {
text-transform: uppercase;
color: #6F7A5E;
font-weight: 600;
font-size: 1rem;
line-height: 24px;
letter-spacing: 1px;
display: block;
margin-bottom: 10px;
}
@media (min-width: 1200px) {
.container {
max-width: 1000px;
position: relative;
}
} header {
padding: 20px 0;
background-color: #FFF;
font-size: 0.9375rem;
font-weight: 500;
z-index: 3;
position: relative;
}
header .nav-link {
color: #4A4138;
}
header .nav-link:hover {
color: #6F7A5E;
}
header .btn-reservanto {
margin-left: 16px;
}
header .btn-reservanto .nav-link {
color: #FFF;
padding: 5px 15px;
background-color: #5B4430;
border-radius: 100px;
font-weight: 600;
letter-spacing: 1px;
}
header .btn-reservanto .nav-link:hover {
background-color: #443323;
}
nav.navbar {
padding: 0;
}
@media (min-width: 768px) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 16px;
padding-left: 16px;
}
}
@media (max-width: 450px) {
header {
padding: 5px 0;
}
.custom-logo-link img {
height: 60px; width: auto;
}
} section.hero {
background: linear-gradient(180deg, #F5E9D3 0%, #FBF8F2 100%);
font-size: 1.3125rem;
color: #4A4138;
overflow: hidden;
position: relative;
}
section.hero h1.title {
max-width: 438px; width: 100%;
margin-bottom: 24px;
}
div.hero-row {
padding-top: 130px;
padding-bottom: 477px;
display: flex;
gap: 64px;
align-items: center;
z-index: 2;
position: relative;
}
div.hero-row p {
margin-bottom: 40px;
}
div.circle {
width: 480px; height: 480px;
background-color: #E3E7DC;
opacity: 0.5;
position: absolute;
top: -80px; right: -330px;
border-radius: 50%;
z-index: 1;
}
div.buttons {
display: flex;
gap: 20px;
}
@media (min-width: 992px) {
div.hero-row img.mobile {
display: none;
}
}
@media (max-width: 991px) {
div.hero-row {
padding-top: 40px;
padding-bottom: 317px;
flex-direction: column;
align-items: flex-start;
}
div.hero-row div:nth-child(2) {
display: none;
}
div.hero-row img.mobile {
margin-top: -70px;
margin-right: -12px;
margin-left: auto;
max-width: 95%;
position: relative;
display: block;
z-index: -1;
}
div.circle {
top: 115px; right: -65px;
width: 376px; height: 376px;
}
div.hero-row p {
margin-top: 30px;
margin-bottom: 40px;
text-align: center;
}
div.buttons {
justify-content: center;
}
}
@media (max-width: 450px) {
div.buttons {
flex-direction: column;
align-items: center;
}
div.buttons .btn {
min-width: 200px;
}
section.hero h1.title {
max-width: 350px; width: 100%;
margin: 0;
}
}
@media (max-width: 405px) {
div.hero-row img.mobile {
margin-top: -135px;
}
} section.services {
margin-top: -262px;
padding-bottom: 99px;
position: relative;
z-index: 2;
}
div.services-row {
display: flex;
gap: 50px;
margin-top: 60px;
}
div.service {
flex: 1;
text-align: center;
background-color: #FFF;
box-shadow: 0 4px 24px 0 rgba(74, 65, 56, 0.08);
border-radius: 250px;
overflow: hidden;
}
div.service-prev {
padding: 28px;
font-size: 0.9375rem;
}
div.service h2 {
font-size: 1.5rem;
margin-bottom: 12px;
line-height: 36px;
}
div.service p {
margin-bottom: 24px;
}
div.service a {
font-size: 1.2rem;
border-bottom: 1px solid #B5BDA7;
text-decoration: none;
color: #4A4138;
font-weight: 600;
line-height: 22.5px;
padding-bottom: 5px;
display: inline-block;
}
div.service a i {
font-size: 0.85rem;
}
.wave {
width: 1650px;
height: 500px;
background: #d5c8c0;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
z-index: -1;
}
@media (max-width: 991px) {
section.services {
margin-top: -237px;
padding-bottom: 0;
margin-bottom: 120px;
}
div.services-row {
flex-direction: column;
align-items: center;
}
div.service {
width: 100%;
border-radius: 250px 250px 30px 30px;
}
div.service img {
width: 100%;
}
.wave {
width: 1654px;
height: 381px;
top: 50%; left: 0;
transform: translateX(-50%) rotate(-90deg);
}
}
@media (max-width: 450px) {
.wave {
left: -100px;
}
} section.about {
padding-top: 90px;
padding-bottom: 90px;
font-size: 1.125rem;
}
div.about p {
margin-bottom: 35px;
}
div.about .title {
margin-bottom: 25px;
line-height: 48px;
}
div.about-row {
display: flex;
gap: 66px;
}
div.about-row > div {
flex: 1;
}
div.persons {
display: flex;
gap: 20px;
}
div.person {
flex: 1;
font-size: 0.9375rem;
text-align: center;
color: #4A4138;
}
div.person img {
border-radius: 50%;
}
span.name {
color: #4A4138;
font-size: 1.25rem;
font-family: "Fraunces", serif;
font-weight: 600;
line-height: 30px;
margin-top: 8px;
margin-bottom: 4px;
display: block;
}
div.person p {
margin-bottom: 4px;
}
div.person a {
line-height: 22.5px;
color: #6F7A5E;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
div.person a:hover {
text-decoration: none;
}
div.person:nth-child(2) {
margin-top: 72px;
}
@media (min-width: 992px) {
div.persons.mobile {
display: none;
}
}
@media (max-width: 991px) {
section.about {
padding-top: 0;
}
span.why,
div.about .title {
text-align: center;
}
div.hero-row span.why {
text-align: left;
}
div.about-row {
flex-direction: column;
align-items: center;
}
div.persons.desktop {
display: none;
}
div.persons {
flex-direction: column;
margin-top: 55px;
margin-bottom: 35px;
}
div.person {
display: flex;
gap: 20px;
text-align: left;
align-items: center;
}
div.person > div {
flex: 1;
min-width: 0;
}
div.person:nth-child(2) {
margin-top: 0;
}
div.person img {
width: 50%; height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
flex-shrink: 0;
display: block;
}
}
@media (max-width: 450px) {
div.about .btn {
display: table;
margin: 0 auto;
}
} section.our-work {
padding-top: 96px;
padding-bottom: 96px;
background: linear-gradient(180deg, #F1E9DC 0%, #E3E7DC 100%);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
border-radius: 100px;
overflow: hidden;
margin-top: 56px;
margin-bottom: 30px;
}
.gallery-grid .item {
overflow: hidden;
aspect-ratio: 4 / 5;
}
.gallery-grid img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (min-width: 992px) {
section.our-work .btn {
width: 312px;
}
}
@media (max-width: 991px) {
section.our-work {
padding-top: 40px;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid .item:nth-child(9) {
display: none;
}
section.our-work .btn {
width: 100%;
}
} section.reviews {
padding-bottom: 96px;
background-color: #E3E7DC;
}
.reviews-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 50px;
margin-bottom: 30px;
}
.reviews-grid .item {
padding: 30px;
background-color: #FFF;
border-radius: 20px;
font-size: 1.125rem;
box-shadow: 0 4px 24px 0 rgba(74, 65, 56, 0.08);
color: #4A4138;
}
p.service {
color: #8C7F6F;
font-size: 0.9375rem;
margin-bottom: 12px;
}
p.review {
font-style: italic;
line-height: 30px;
font-family: "Fraunces", serif;
margin-bottom: 20px;
}
span.client {
display: block;
font-weight: 700;
}
@media (max-width: 767px) {
.reviews-grid {
grid-template-columns: 1fr;
}
section.reviews .btn-centered {
width: 100%;
}
} div.pricelist {
margin-top: 48px;
}
div.pricelist ul.nav-pills {
background-color: #F1E9DC;
border-radius: 999px;
padding: 6px;
}
div.pricelist button.nav-link {
color: #5B4430;
font-weight: 600;
line-height: 22.5px;
padding: 10px;
}
div.pricelist button.nav-link.active {
color: #FFF;
background-color: #5B4430;
border-radius: 999px;
}
div.pricing-list {
margin-top: 20px;
margin-bottom: 24px;
}
.pricing-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding: 20px 0;
border-bottom: 1px solid #D9C8B2;
}
.pricing-name {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: #4A4138;
}
.pricing-desc {
margin: 6px 0 0;
font-family: "Fraunces", serif;
font-style: italic;
font-size: 0.875rem;
color: #8C7F6F;
}
.pricing-price {
font-size: 1.125rem;
font-weight: 600;
color: #4A4138;
white-space: nowrap;
}
p.storno {
font-size: 0.9375rem;
line-height: 27px;
margin: 0;
} section.pricelist {
padding-top: 96px;
padding-bottom: 96px;
}
@media (max-width: 991px) {
section.pricelist {
padding-top: 40px;
padding-bottom: 40px;
}
} section.reservation {
padding-top: 80px;
padding-bottom: 80px;
background-color: #5B4430;
font-size: 1.125rem;
color: #D9C8B2;
text-align: center;
}
section.reservation span.why {
color: #B5BDA7;
}
section.reservation h1 {
color: #FFF;
margin-bottom: 20px;
}
section.reservation p {
max-width: 720px; width: 100%;
font-size: 1.125rem;
line-height: 30px;
margin: 0 auto 40px auto;
}
section.reservation .btn {
font-size: 1.125rem;
color: #5B4430;
border-radius: 100px;
padding: 15px 35px;
background-color: #FFF;
letter-spacing: 1px;
border: 0;
} section.contact {
padding-top: 96px;
padding-bottom: 96px;
}
div.contact-row {
display: flex;
gap: 40px;
margin-top: 56px;
}
div.contacts {
background-color: #F1E9DC;
padding: 36px 64px 36px 36px;
border-radius: 20px;
color: #4A4138;
font-size: 0.9375rem;
flex-shrink: 0;
}
div.contact-block {
display: flex;
gap: 16px;
line-height: 27px;
font-size: 0.9375rem;
}
div.contact-block:not(:last-child) {
margin-bottom: 24px;
}
div.contact-block span {
width: 44px; height: 44px;
border-radius: 50%;
position: relative;
background-color: #FFF;
}
div.contact-block span i {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: #6F7A5E;
font-size: 1.125rem;
}
div.contact-block p {
margin: 0;
}
div.contact-block strong {
display: block;
}
div.contact-block a {
color: #6F7A5E;
text-decoration: none;
}
div.contact-block .btn-social {
padding: 8px 20px;
font-size: 0.875rem;
font-weight: 500;
line-height: 21px;
color: #5B4430;
background-color: #FFF;
border: 1px solid #D9C8B2;
}
div.contact-block .btn-social:hover {
background-color: #D9C8B2;
}
div.contact-block .btn-social i {
margin-right: 4px;
display: inline-block;
vertical-align: inherit;
margin-top: -3px;
}
div.map {
flex: 1;
}
.contact-map {
border-radius: 20px;
overflow: hidden;
height: 100%;
}
.contact-map iframe {
width: 100%;
height: 100%;
min-height: 400px;
border: 0;
display: block;
object-fit: cover;
}
@media (max-width: 991px) {
section.contact {
padding-top: 40px;
padding-bottom: 40px;
}
div.contact-row {
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 40px;
}
div.contact-row div {
width: 100%;
}
}
@media (max-width: 450px) {
div.contacts {
padding: 36px;
}
} footer {
background-color: #4A4138;
padding-top: 20px;
padding-bottom: 20px;
color: #8C7F6F;
font-size: 0.8125rem;
}
footer a {
color: #D9C8B2;
text-decoration: none;
}
footer a:hover {
color: #c3b29b;
text-decoration: none;
}
footer ul {
margin: 0;
}
footer .list-inline-item:not(:last-child) {
margin-right: 30px;
}
div.footer-row {
display: flex;
justify-content: space-between;
}
@media (max-width: 991px) {
div.footer-row {
flex-direction: column;
gap: 10px;
}
}