.g-0,
.gy-0,
.row {
--bs-gutter-y: 0
}
.btn,
.btn:hover {
color: var(--white)
}
body,
input,
select,
textarea {
font-family: var(--montserrat);
color: var(--cafe-royale)
}
.nav.next,
.nav.prev,
.side-gallery h2,
.side-gallery h5,
.titleThird,
body,
h1,
h2,
h3,
h4,
h5,
h6,
input,
label,
select,
textarea {
color: var(--black)
}
a,
header {
transition: .3s
}
.titleHead,
.titleRetreat span,
.wedTitle span {
font-family: var(--caslon-stdbold)
}
.bookBtn,
.btn,
.nav {
cursor: pointer
}
.text-truncate,
footer {
overflow: hidden
}
.row>*,
.svgCntr svg,
img {
max-width: 100%
}
.footerLinks ul,
.socialLinks ul{
margin: 0;
list-style: none
}
nav.navbar ul {list-style: none;}
@font-face {
font-family: itc_caslon_224_stdbook;
src: url(//picholavilas.com/wp-content/themes/pichola-vilas/assets/css/font/caslon-224-std-book-webfont.woff2) format("woff2"), url(//picholavilas.com/wp-content/themes/pichola-vilas/assets/css/font/caslon-224-std-book-webfont.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: swap
}
@font-face {
font-family: itc_caslon_224_stdbold;
src: url(//picholavilas.com/wp-content/themes/pichola-vilas/assets/css/font/caslon-224-std-bold-webfont.woff2) format("woff2"), url(//picholavilas.com/wp-content/themes/pichola-vilas/assets/css/font/caslon-224-std-bold-webfont.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: swap
}
:root {
--zorba: #a38f84;
--cafe-royale: #6a4c3d;
--cafe-royale-light: #c89f85;
--spring-wood: #faf7f2;
--ebb: #f6f0e9;
--rice-cake: #fefdfb;
--dawn-pink: #eeeae9;
--black: #012824;
--white: #ffffff;
--body-bg: var(--white);
--section-bg: var(--ebb);
--btn-bg: var(--black);
--btn-bg-hover: #01282496;
--montserrat: "Montserrat", sans-serif;
--caslon-stdbook: "itc_caslon_224_stdbook";
--caslon-stdbold: "itc_caslon_224_stdbold"
}
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
scroll-behavior: smooth;
font-size: 100%
}
.btn,
body {
font-size: 16px
}
body {
line-height: 1.6;
background: var(--body-bg);
font-weight: 500
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
line-height: 1.2;
margin-bottom: .5em
}
p {
margin-bottom: 0
}
a {
color: var(--black);
text-decoration: none
}
a:hover {
color: #01282496;
}
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto
}
.container-fluid {
width: 100%;
padding-right: var(--bs-gutter-x, .75rem);
padding-left: var(--bs-gutter-x, .75rem);
margin-right: auto;
margin-left: auto
}
.row {
--bs-gutter-x: 1.5rem;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5)
}
.row>* {
flex-shrink: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y)
}
.g-0,
.gx-0 {
--bs-gutter-x: 0
}
.g-1,
.gx-1 {
--bs-gutter-x: 0.25rem
}
.g-1,
.gy-1 {
--bs-gutter-y: 0.25rem
}
.g-2,
.gx-2 {
--bs-gutter-x: 0.5rem
}
.g-2,
.gy-2 {
--bs-gutter-y: 0.5rem
}
.g-3,
.gx-3 {
--bs-gutter-x: 1rem
}
.g-3,
.gy-3 {
--bs-gutter-y: 1rem
}
.g-4,
.gx-4 {
--bs-gutter-x: 1.5rem
}
.g-4,
.gy-4 {
--bs-gutter-y: 1.5rem
}
.g-5,
.gx-5 {
--bs-gutter-x: 3rem
}
.g-5,
.gy-5 {
--bs-gutter-y: 3rem
}
@media (min-width:0) {
.col-1 {
flex: 0 0 8.3333%;
max-width: 8.3333%
}
.col-2 {
flex: 0 0 16.6667%;
max-width: 16.6667%
}
.col-3 {
flex: 0 0 25%;
max-width: 25%
}
.col-4 {
flex: 0 0 33.3333%;
max-width: 33.3333%
}
.col-5 {
flex: 0 0 41.6667%;
max-width: 41.6667%
}
.col-6 {
flex: 0 0 50%;
max-width: 50%
}
.col-7 {
flex: 0 0 58.3333%;
max-width: 58.3333%
}
.col-8 {
flex: 0 0 66.6667%;
max-width: 66.6667%
}
.col-9 {
flex: 0 0 75%;
max-width: 75%
}
.col-10 {
flex: 0 0 83.3333%;
max-width: 83.3333%
}
.col-11 {
flex: 0 0 91.6667%;
max-width: 91.6667%
}
.col-12 {
flex: 0 0 100%;
max-width: 100%
}
}
@media (min-width:576px) {
.container {
max-width: 540px
}
.col-sm-1 {
flex: 0 0 auto;
width: 8.33333333%
}
.col-sm-2 {
flex: 0 0 auto;
width: 16.66666667%
}
.col-sm-3 {
flex: 0 0 auto;
width: 25%
}
.col-sm-4 {
flex: 0 0 auto;
width: 33.33333333%
}
.col-sm-5 {
flex: 0 0 auto;
width: 41.66666667%
}
.col-sm-6 {
flex: 0 0 auto;
width: 50%
}
.col-sm-7 {
flex: 0 0 auto;
width: 58.33333333%
}
.col-sm-8 {
flex: 0 0 auto;
width: 66.66666667%
}
.col-sm-9 {
flex: 0 0 auto;
width: 75%
}
.col-sm-10 {
flex: 0 0 auto;
width: 83.33333333%
}
.col-sm-11 {
flex: 0 0 auto;
width: 91.66666667%
}
.col-sm-12 {
flex: 0 0 auto;
width: 100%
}
.g-sm-0,
.gx-sm-0 {
--bs-gutter-x: 0
}
.g-sm-0,
.gy-sm-0 {
--bs-gutter-y: 0
}
.g-sm-1,
.gx-sm-1 {
--bs-gutter-x: 0.25rem
}
.g-sm-1,
.gy-sm-1 {
--bs-gutter-y: 0.25rem
}
.g-sm-2,
.gx-sm-2 {
--bs-gutter-x: 0.5rem
}
.g-sm-2,
.gy-sm-2 {
--bs-gutter-y: 0.5rem
}
.g-sm-3,
.gx-sm-3 {
--bs-gutter-x: 1rem
}
.g-sm-3,
.gy-sm-3 {
--bs-gutter-y: 1rem
}
.g-sm-4,
.gx-sm-4 {
--bs-gutter-x: 1.5rem
}
.g-sm-4,
.gy-sm-4 {
--bs-gutter-y: 1.5rem
}
.g-sm-5,
.gx-sm-5 {
--bs-gutter-x: 3rem
}
.g-sm-5,
.gy-sm-5 {
--bs-gutter-y: 3rem
}
}
@media (min-width:665px) {
.container {
max-width: 640px
}
}
@media (min-width:768px) {
.container {
max-width: 720px
}
.col-md-1 {
flex: 0 0 auto;
width: 8.33333333%
}
.col-md-2 {
flex: 0 0 auto;
width: 16.66666667%
}
.col-md-3 {
flex: 0 0 auto;
width: 25%
}
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%
}
.col-md-5 {
flex: 0 0 auto;
width: 41.66666667%
}
.col-md-6 {
flex: 0 0 auto;
width: 50%
}
.col-md-7 {
flex: 0 0 auto;
width: 58.33333333%
}
.col-md-8 {
flex: 0 0 auto;
width: 66.66666667%
}
.col-md-9 {
flex: 0 0 auto;
width: 75%
}
.col-md-10 {
flex: 0 0 auto;
width: 83.33333333%
}
.col-md-11 {
flex: 0 0 auto;
width: 91.66666667%
}
.col-md-12 {
flex: 0 0 auto;
width: 100%
}
.g-md-0,
.gx-md-0 {
--bs-gutter-x: 0
}
.g-md-0,
.gy-md-0 {
--bs-gutter-y: 0
}
.g-md-1,
.gx-md-1 {
--bs-gutter-x: 0.25rem
}
.g-md-1,
.gy-md-1 {
--bs-gutter-y: 0.25rem
}
.g-md-2,
.gx-md-2 {
--bs-gutter-x: 0.5rem
}
.g-md-2,
.gy-md-2 {
--bs-gutter-y: 0.5rem
}
.g-md-3,
.gx-md-3 {
--bs-gutter-x: 1rem
}
.g-md-3,
.gy-md-3 {
--bs-gutter-y: 1rem
}
.g-md-4,
.gx-md-4 {
--bs-gutter-x: 1.5rem
}
.g-md-4,
.gy-md-4 {
--bs-gutter-y: 1.5rem
}
.g-md-5,
.gx-md-5 {
--bs-gutter-x: 3rem
}
.g-md-5,
.gy-md-5 {
--bs-gutter-y: 3rem
}
.p-md-0 {
padding: 0 !important
}
.p-md-1 {
padding: .25rem !important
}
.p-md-2 {
padding: .5rem !important
}
.p-md-3 {
padding: 1rem !important
}
.p-md-4 {
padding: 1.5rem !important
}
.p-md-5 {
padding: 3rem !important
}
.px-md-0 {
padding-right: 0 !important;
padding-left: 0 !important
}
.px-md-1 {
padding-right: .25rem !important;
padding-left: .25rem !important
}
.px-md-2 {
padding-right: .5rem !important;
padding-left: .5rem !important
}
.px-md-3 {
padding-right: 1rem !important;
padding-left: 1rem !important
}
.px-md-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important
}
.px-md-5 {
padding-right: 3rem !important;
padding-left: 3rem !important
}
.py-md-0 {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.py-md-1 {
padding-top: .25rem !important;
padding-bottom: .25rem !important
}
.py-md-2 {
padding-top: .5rem !important;
padding-bottom: .5rem !important
}
.py-md-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important
}
.py-md-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important
}
.py-md-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important
}
.pt-md-0 {
padding-top: 0 !important
}
.pt-md-1 {
padding-top: .25rem !important
}
.pt-md-2 {
padding-top: .5rem !important
}
.pt-md-3 {
padding-top: 1rem !important
}
.pt-md-4 {
padding-top: 1.5rem !important
}
.pt-md-5 {
padding-top: 3rem !important
}
.pe-md-0 {
padding-right: 0 !important
}
.pe-md-1 {
padding-right: .25rem !important
}
.pe-md-2 {
padding-right: .5rem !important
}
.pe-md-3 {
padding-right: 1rem !important
}
.pe-md-4 {
padding-right: 1.5rem !important
}
.pe-md-5 {
padding-right: 3rem !important
}
.pb-md-0 {
padding-bottom: 0 !important
}
.pb-md-1 {
padding-bottom: .25rem !important
}
.pb-md-2 {
padding-bottom: .5rem !important
}
.pb-md-3 {
padding-bottom: 1rem !important
}
.pb-md-4 {
padding-bottom: 1.5rem !important
}
.pb-md-5 {
padding-bottom: 3rem !important
}
.ps-md-0 {
padding-left: 0 !important
}
.ps-md-1 {
padding-left: .25rem !important
}
.ps-md-2 {
padding-left: .5rem !important
}
.ps-md-3 {
padding-left: 1rem !important
}
.ps-md-4 {
padding-left: 1.5rem !important
}
.ps-md-5 {
padding-left: 3rem !important
}
.d-md-flex {
display: flex !important
}
}
@media (min-width:800px) {
.container {
max-width: 790px
}
}
@media (min-width:992px) {
.container {
max-width: 960px
}
.d-lg-flex {
display: flex !important
}
.col-lg-1 {
flex: 0 0 auto;
width: 8.33333333%
}
.col-lg-2 {
flex: 0 0 auto;
width: 16.66666667%
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%
}
.col-lg-5 {
flex: 0 0 auto;
width: 41.66666667%
}
.col-lg-6 {
flex: 0 0 auto;
width: 50%
}
.col-lg-7 {
flex: 0 0 auto;
width: 58.33333333%
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.66666667%
}
.col-lg-9 {
flex: 0 0 auto;
width: 75%
}
.col-lg-10 {
flex: 0 0 auto;
width: 83.33333333%
}
.col-lg-11 {
flex: 0 0 auto;
width: 91.66666667%
}
.col-lg-12 {
flex: 0 0 auto;
width: 100%
}
.order-lg-0 {
order: 0 !important
}
.order-lg-1 {
order: 1 !important
}
.order-lg-2 {
order: 2 !important
}
.order-lg-3 {
order: 3 !important
}
.order-lg-4 {
order: 4 !important
}
.order-lg-5 {
order: 5 !important
}
.order-lg-last {
order: 6 !important
}
.g-lg-0,
.gy-lg-0 {
--bs-gutter-y: 0
}
.g-lg-1,
.gx-lg-1 {
--bs-gutter-x: 0.25rem
}
.g-lg-1,
.gy-lg-1 {
--bs-gutter-y: 0.25rem
}
.g-lg-2,
.gx-lg-2 {
--bs-gutter-x: 0.5rem
}
.g-lg-2,
.gy-lg-2 {
--bs-gutter-y: 0.5rem
}
.g-lg-3,
.gx-lg-3 {
--bs-gutter-x: 1rem
}
.g-lg-3,
.gy-lg-3 {
--bs-gutter-y: 1rem
}
.g-lg-4,
.gx-lg-4 {
--bs-gutter-x: 1.5rem
}
.g-lg-4,
.gy-lg-4 {
--bs-gutter-y: 1.5rem
}
.g-lg-5,
.gx-lg-5 {
--bs-gutter-x: 3rem
}
.g-lg-5,
.gy-lg-5 {
--bs-gutter-y: 3rem
}
.py-lg-0 {
padding-top: 0 !important;
padding-bottom: 0 !important
}
.py-lg-1 {
padding-top: .25rem !important;
padding-bottom: .25rem !important
}
.py-lg-2 {
padding-top: .5rem !important;
padding-bottom: .5rem !important
}
.py-lg-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important
}
.py-lg-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important
}
.py-lg-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important
}
.pt-lg-0 {
padding-top: 0 !important
}
.pt-lg-1 {
padding-top: .25rem !important
}
.pt-lg-2 {
padding-top: .5rem !important
}
.pt-lg-3 {
padding-top: 1rem !important
}
.pt-lg-4 {
padding-top: 1.5rem !important
}
.pt-lg-5 {
padding-top: 3rem !important
}
.pe-lg-0 {
padding-right: 0 !important
}
.pe-lg-1 {
padding-right: .25rem !important
}
.pe-lg-2 {
padding-right: .5rem !important
}
.pe-lg-3 {
padding-right: 1rem !important
}
.pe-lg-4 {
padding-right: 1.5rem !important
}
.pe-lg-5 {
padding-right: 3rem !important
}
.pb-lg-0 {
padding-bottom: 0 !important
}
.pb-lg-1 {
padding-bottom: .25rem !important
}
.pb-lg-2 {
padding-bottom: .5rem !important
}
.pb-lg-3 {
padding-bottom: 1rem !important
}
.pb-lg-4 {
padding-bottom: 1.5rem !important
}
.pb-lg-5 {
padding-bottom: 3rem !important
}
}
@media (min-width:1200px) {
.container {
max-width: 1140px
}
.col-xl-1 {
flex: 0 0 auto;
width: 8.33333333%
}
.col-xl-2 {
flex: 0 0 auto;
width: 16.66666667%
}
.col-xl-3 {
flex: 0 0 auto;
width: 25%
}
.col-xl-4 {
flex: 0 0 auto;
width: 33.33333333%
}
.col-xl-5 {
flex: 0 0 auto;
width: 41.66666667%
}
.col-xl-6 {
flex: 0 0 auto;
width: 50%
}
.col-xl-7 {
flex: 0 0 auto;
width: 58.33333333%
}
.col-xl-8 {
flex: 0 0 auto;
width: 66.66666667%
}
.col-xl-9 {
flex: 0 0 auto;
width: 75%
}
.col-xl-10 {
flex: 0 0 auto;
width: 83.33333333%
}
.col-xl-11 {
flex: 0 0 auto;
width: 91.66666667%
}
.col-xl-12 {
flex: 0 0 auto;
width: 100%
}
}
@media (min-width:1400px) {
.container {
max-width: 1320px
}
.col-xxl-1 {
flex: 0 0 auto;
width: 8.33333333%
}
.col-xxl-2 {
flex: 0 0 auto;
width: 16.66666667%
}
.col-xxl-3 {
flex: 0 0 auto;
width: 25%
}
.col-xxl-4 {
flex: 0 0 auto;
width: 33.33333333%
}
.col-xxl-5 {
flex: 0 0 auto;
width: 41.66666667%
}
.col-xxl-6 {
flex: 0 0 auto;
width: 50%
}
.col-xxl-7 {
flex: 0 0 auto;
width: 58.33333333%
}
.col-xxl-8 {
flex: 0 0 auto;
width: 66.66666667%
}
.col-xxl-9 {
flex: 0 0 auto;
width: 75%
}
.col-xxl-10 {
flex: 0 0 auto;
width: 83.33333333%
}
.col-xxl-11 {
flex: 0 0 auto;
width: 91.66666667%
}
.col-xxl-12 {
flex: 0 0 auto;
width: 100%
}
}
@media (min-width:1600px) {
.container {
max-width: 1600px
}
}
.btn,
label {
display: inline-block
}
img {
height: auto
}
.btn {
padding: 12px 28px;
border: none;
border-radius: 4px;
background-color: var(--btn-bg);
transition: background .3s
}
.btn:hover {
background-color: var(--btn-bg-hover)
}
.btn-sm {
padding: 8px 18px;
font-size: 14px
}
.btn-lg {
padding: 16px 32px;
font-size: 18px
}
.card {
background: var(--white);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
transition: transform .3s
}
.card:hover {
transform: translateY(-5px)
}
.centerImg,
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.fw-light {
font-weight: 300
}
.fw-normal {
font-weight: 400
}
.fw-medium,
.mediaCnt,
label,
nav.navbar li a {
font-weight: 500
}
.emailCntr .btn,
.fw-semibold {
font-weight: 600
}
.fw-bold {
font-weight: 700
}
.footerLinks ul li,
.side-gallery h5,
.text-uppercase,
.titleHead,
.wedTitle,
h6.ftHead,
nav.navbar li a {
text-transform: uppercase
}
.text-lowercase {
text-transform: lowercase
}
.text-capitalize {
text-transform: capitalize
}
.text-truncate {
text-overflow: ellipsis;
white-space: nowrap
}
.d-none {
display: none !important
}
.d-block {
display: block !important
}
.d-inline {
display: inline !important
}
.d-inline-block {
display: inline-block !important
}
.d-flex {
display: flex !important
}
.d-inline-flex {
display: inline-flex !important
}
.flex-row {
flex-direction: row !important
}
.flex-column {
flex-direction: column !important
}
.justify-center {
justify-content: center !important
}
.justify-between {
justify-content: space-between !important
}
.align-center {
align-items: center !important
}
.position-relative {
position: relative !important
}
.position-absolute {
position: absolute !important
}
.position-fixed {
position: fixed !important
}
.position-sticky {
position: sticky !important
}
.overflow-hidden {
overflow: hidden !important
}
.overflow-auto {
overflow: auto !important
}
.rounded {
border-radius: .25rem
}
.rounded-sm {
border-radius: .2rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded-pill {
border-radius: 50rem
}
.rounded-circle {
border-radius: 50%
}
.z-0 {
z-index: 0 !important
}
z-1 {
z-index: 1 !important
}
z-10 {
z-index: 10 !important
}
z-50 {
z-index: 50 !important
}
z-100 {
z-index: 100 !important
}
z-999 {
z-index: 999 !important
}
.ms-auto {
margin-left: auto
}
.me-auto {
margin-right: auto
}
.h-100 {
height: 100%
}
.mt-1 {
margin-top: 8px !important
}
.mt-2 {
margin-top: 16px !important
}
.mt-3 {
margin-top: 24px !important
}
.mt-4 {
margin-top: 32px !important
}
.mt-5 {
margin-top: 40px !important
}
.mb-0 {
margin-bottom: 0 !important
}
.mb-1 {
margin-bottom: 8px !important
}
.mb-2 {
margin-bottom: 16px !important
}
.mb-3 {
margin-bottom: 24px !important
}
.mb-4 {
margin-bottom: 32px !important
}
.mb-5 {
margin-bottom: 40px !important
}
.pt-1 {
padding-top: 8px !important
}
.pt-2 {
padding-top: 16px !important
}
.pt-3 {
padding-top: 24px !important
}
.pt-4 {
padding-top: 32px !important
}
.pt-5 {
padding-top: 40px !important
}
.pt-90 {
padding-top: 90px !important
}
.pb-0 {
padding-bottom: 0 !important
}
.pb-1 {
padding-bottom: 8px !important
}
.pb-2 {
padding-bottom: 16px !important
}
.pb-3 {
padding-bottom: 24px !important
}
.pb-4 {
padding-bottom: 32px !important
}
.pb-5 {
padding-bottom: 40px !important
}
.pl-1 {
padding-left: 8px !important
}
.pl-2 {
padding-left: 16px !important
}
.pl-3 {
padding-left: 24px !important
}
.pl-4 {
padding-left: 32px !important
}
.pl-5 {
padding-left: 40px !important
}
.pr-1 {
padding-right: 8px !important
}
.pr-2 {
padding-right: 16px !important
}
.pr-3 {
padding-right: 24px !important
}
.pr-4 {
padding-right: 32px !important
}
.pr-5 {
padding-right: 40px !important
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important
}
.my-2 {
margin-top: 16px !important;
margin-bottom: 16px !important
}
.px-2 {
padding-left: 16px !important;
padding-right: 16px !important
}
.py-2 {
padding-top: 16px !important;
padding-bottom: 16px !important
}
.py-3 {
padding-top: 22px !important;
padding-bottom: 22px !important
}
input,
select,
textarea {
font-size: 1rem;
padding: 10px 14px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
background-color: var(--white);
transition: border-color .3s, box-shadow .3s
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--btn-bg);
box-shadow: 0 0 0 2px rgba(106, 76, 61, .2)
}
input::placeholder,
textarea::placeholder {
color: #aaa;
opacity: 1
}
label {
margin-bottom: 6px
}
.input-sm {
padding: 6px 10px;
font-size: .875rem
}
.input-lg {
padding: 14px 20px;
font-size: 1.125rem
}
.form-group {
margin-bottom: 1.25rem
}
.is-invalid {
border-color: #dc3545 !important;
background-color: #fff5f5
}
.is-valid {
border-color: #198754 !important;
background-color: #f6fff8
}
.reveal {
opacity: 0;
transform: translateY(40px);
transition: .6s ease-out
}
.animate-on-scroll.visible,
.reveal.visible {
opacity: 1;
transform: translateY(0)
}
::-webkit-scrollbar {
width: 8px
}
::-webkit-scrollbar-thumb {
background-color: #d9dfde;
border-radius: 8px
}
::-webkit-scrollbar-track {
background: var(--spring-wood)
}
header {
display: block;
width: 100%;
z-index: 99;
position: fixed;
top: 0
}
.sticky {
box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
background-color: #d9dfde;
z-index: 100;
transition: 0.3s ease-in-out;
}
.sticky .openNav{
padding: 1rem 4rem;
}
nav.navbar li {
padding-right: 5rem
}
nav.navbar li a {
font-size: 1.1rem;
color: var(--black)
}
nav.navbar li:last-child {
padding-right: 0
} .mobLogo,
.closeMobMenu {
display: none;
}
.openNav {
padding: 2rem 4rem;
display: flex;
align-items: center;
gap: 2.2rem;
transition: 0.3s ease-in-out;
}
nav.navbar {
width: 100%;
max-width: 100%;
}
nav.navbar {
background: #fff;
height: 100vh;
max-width: 300px;
transition: .6s ease-in-out;
position: absolute;
margin-left: -650px;
z-index: 99;
top: 0;
}
.show nav.navbar {
margin-left: 0;
}
.navOverlay {
background-color: #33333360;
-webkit-backdrop-filter: blur(1rem);
backdrop-filter: blur(0.2rem);
cursor: pointer;
width: 0;
height: 100%;
position: fixed;
inset: 0%;
z-index: 0;
overflow: hidden;
transition: width 0.29s ease-in-out;
}
.closeMobMenu {
text-align: right;
padding: 15px;
}
.offcanvasMenu {
padding: 1.75rem 1rem 0;
border-top: 1px solid #ccc;
}
.show .navOverlay {
width: 100%;
transition: width 0.29s ease-in-out;
}
.openNav .icon-menu {
font-size: 2rem;
}
.sticky .centerLogo {
display: block;
line-height: 0
}
a.centerLogo img {
max-width: 60px
}
li.logoccontainer {
flex: 1;
text-align: center;
display: none;
}
nav.navbar li {
margin-bottom: 1rem;
} .banner,
.srvcImg,
.wedding-slider {
position: relative
}
.gallery::after,
.mediaCnt,
.nextprev,
.slide,
.srvTitle {
position: absolute
}
.banner-container {
display: flex;
justify-content: center;
align-content: center;
height: 100%;
background-color: var(--white)
}
.overlay-container {
position: absolute;
align-content: center;
text-align: center;
max-width: 1050px;
width: 100%
}
.emailCntr,
.gallery,
.slider-main {
position: relative
}
.logo {
margin-top: 110px
}
.titleHead {
font-size: clamp(2rem, 4vw, 2.5rem);
color: #012824;
margin-top: 70px;
letter-spacing: 5px;
}
.footerTitle,
.srvTitle,
.titleRetreat,
.titleThird,
.wedTitle, .roomName {
font-family: var(--caslon-stdbook)
}
.bookNow {
margin-top: 154px
}
.footerLinks {
background: #d9dfde;
margin-top: 0px
}
.bookBtn {
background: #fdfdfd57;
border: 1px solid #012824;
padding: 14px;
width: 260px;
border-radius: 10px;
font-size: 1.875rem;
text-transform: uppercase;
color: var(--black);
font-weight: 500;
box-shadow: 0 0 5px 1px #01282487;
}
.gallery::after {
background-color: #e3e8ef;
}
.weddingRetreatBG {
background-color: var(--white);
padding-bottom:40px;
} .titleRetreat {
font-size: 4rem;
color: var(--black);
margin-top: 50px
}
.weddingRetreat p {
font-size: 1.75rem;
font-weight: 500;
color: var(--black);
text-align: center
}
.wedTitle {
font-size: 3rem;
color: var(--black);
padding-bottom: 0;
margin: 26px 0 0 0;
}
.wedTitle span {
display: block;
font-size: 3.719rem;
color: var(--black) !important
}
.brideGroom {
margin-top: 160px;
box-shadow: 3px 2px 7px 4px #939393;
padding: 16px;
border-radius: 4px;
line-height: 0;
}
.titleThird {
font-size: 3.5rem;
padding-bottom: 50px;
color: var(--black);
}
.services {
background-color: #fef6fa;
padding: 60px 0;
}
.testimonial {
padding-top: 50px;
background: var(--ebb);
padding-bottom: 110px;
}
.mb-6 {
margin-bottom: 3.5rem;
}
.srvTitle {
font-size: 2.5rem;
color: var(--white);
background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0, rgb(0 0 0 / 66%) 100%);
width: 100%;
left: 0;
right: 0;
bottom: -13px;
text-align: center;
padding: 18px 0 35px
}
.mediaCnt {
align-content: center;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 23px
}
.mediaCnt p {
font-size: 1.3rem
}
.bookNowcnt {
margin-top: 45px;
width: 100%
}
footer {
margin-top: 0px
}
.bookNowcnt>.btn {
display: block;
width: 100%;
font-size: 1.338rem
}
.gallery {
padding: 82px 0 0;
background-color: var(--white);
}
.gallery::after {
content: "";
width: 65%;
padding: 15px;
height: 60%;
top: 0;
right: 0;
z-index: -1
} .slider-main {
width: 100%;
display: block;
height: min-content;
float: left;
height: min-content;
position: relative;
}
.slide {
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s
}
.gallery img{
box-shadow: 3px 2px 7px 4px #939393;
}
.animate-on-scroll,
.fade-in {
opacity: 0;
transition: .6s ease-out
}
.slide.active {
opacity: 1;
z-index: 1;
position: relative;
}
.gallery img,
.testimonial img {
padding: 16px;
border-radius: 4px;
line-height: 0;
background: #fff;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.caption {
margin-top: 50px;
padding: 10px;
font-size: 1.438rem
}
.nav {
transform: translateY(-50%);
border: none;
z-index: 2
}
.nav.next,
.nav.prev {
font-size: 2.5rem;
background: 0 0
}
span.icon-chevron-left,
span.icon-chevron-right {
font-weight: 700 !important
}
.side-gallery {
display: flex;
flex-direction: column;
gap: 20px
}
.side-gallery h5 {
font-size: 1.625rem;
font-weight: 500
}
.side-gallery h2 {
font-size: 26px;
line-height: 1.2
}
.side-gallery span {
font-weight: 400;
color: var(--cafe-royale-light)
}
.side-gallery img,
.wedingEvents img {
width: 100%
}
.glrytltCnt {
display: flex;
flex-direction: column;
height: 100%;
padding-left: 40px;
padding-top: 80px;
justify-content: space-between
}
.wedingEvents {
padding-left: 40px;
padding-top: 60px; }
.nextprev {
right: 60px;
bottom: -82px;
z-index: 99
}
.testi_text {
background-color: var(--white);
padding: 160px 38px 50px;
margin-top: 160px
}
.testi_text p {
font-size: 1.75rem;
line-height: 3.43rem;
color: var(--black);
font-weight: 500
}
.emailCntr {
background-color: var(--white);
padding: 50px 0 0;
}
.form-control {
outline: 0
}
.form-control:focus {
box-shadow: none;
outline: 0
}
.subscribe {
background-color: transparent;
border: 0;
border-bottom: 2px solid var(--black);
padding: 20px 0;
border-radius: 0
}
.subscribe::placeholder {
font-size: 1.6rem;
color: #01282496;
}
.emailCntr .btn {
border-radius: 3px;
font-size: 1.504rem;
padding: 16px 31px;
border: 1px solid var(--black);
color: var(--black);
background: var(--white);
}
.emailCntr .btn:hover {
background: var(--black);
color: var(--white);
}
.svgCntr {
line-height: 0;
text-align: center;
margin: 3px 0
}
.ftFlower {
position: absolute;
bottom: -61px;
left: 50%;
z-index: 9;
transform: translate(-50%, 0)
}
.emailCntr form {
padding-bottom: 124px
}
.footerTitle {
font-size: 3.1rem
}
h6.ftHead {
font-size: 1rem;
font-family: Montserrat, sans-serif;
font-weight: 700
}
.footerLinks ul li {
color: var(--zorba);
margin-bottom: 6px
}
.footerNote {
border-top: 1px solid var(--cafe-royale);
padding: 15px;
margin-top: 18px
}
.socialLinks ul {
display: flex;
flex-wrap: wrap;
gap: 1rem
}
.socialLinks ul li a {
font-size: 1.3rem;
color: var(--white);
background: #000;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%
}
.animate-on-scroll {
transform: translateY(50px)
}
.fade-in {
transform: scale(.95)
}
.fade-in.visible {
opacity: 1;
transform: scale(1)
} .searchWarp{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(27, 27, 27, 0.95);
z-index: 9999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease-in-out,
visibility 0.3s ease-in-out;
}
.searchWarp.show{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.search-container{
max-width: 1200px;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.search-container input[type="text"]{
position: relative;
font-style: normal;
font-weight: 600;
font-size: 35px;
line-height: 1.54;
text-transform: none;
letter-spacing: 0;
word-spacing: 0;
height: auto;
margin: 0;
padding-right: 45px;
background: transparent;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
border-width: 0;
border-bottom-width: 1px;
border-radius: 0;
z-index: 1;
-webkit-box-shadow: none;
box-shadow: none;
}
.search-container input[type="text"]::placeholder{
color: #fff;
}
button.searchEvent, button.searchEvent:hover {
font-size: 15px;
overflow: hidden;
position: absolute;
right: 10px;
bottom: 10px;
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #ffffff;
background: transparent;
border-width: 0;
cursor: pointer;
z-index: 2;
} .stript {
position: absolute;
margin-top: -61px;
line-height: 0;
right: 0;
left: 0;
}
.weddingImg {
box-shadow: 3px 2px 7px 4px #939393;
padding: 16px;
border-radius: 4px;
line-height: 0;
background: #fff;
} .roomType{
padding:60px 0  60px 0;
}
.gallery{
padding:85px 0  60px 0;
margin-top: 40px;
}
.splide {
position: relative;
}
.room-section{
padding:80px 0;
}
.roomtitle {
font-size: 42px;
color: var(--black);
text-transform: inherit;
font-weight: 500;
}
.heading{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom: 40px;
}
.heading h2{
font-size:56px;
color:#0d2e2a;
margin:0;
}
.room-nav {
display: flex;
align-items: center;
gap: 15px;
}
.btn-outline {
padding: 8px 24px;
border: 1px solid #0d2e2a;
border-radius: 40px;
color: #0d2e2a;
text-decoration: none;
font-size: 14px;
transition: .3s;
}
.btn-outline:hover {
background: #0d2e2a;
color: #fff;
}
.splide__pagination {
display: none;
}
.room-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
border: 1px solid #f3f3f3;
cursor: move;
}
.room-card img {
display: block;
width: 100%;
height: 330px;
object-fit: cover;
}
.room-content {
padding: 25px;
}
.room-content .roomName {
margin: 0 0 5px;
font-size: 42px;
color: #0d2e2a;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 25px;
}
.features span {
padding: 4px 25px;
border-radius: 30px;
background: #f3f3f3;
font-size: 13px;
}
.room-content a {
display: inline-block;
margin-bottom: 25px;
color: #1d56d7;
text-decoration: none;
font-size: 13px;
}
.room-content button {
max-width: 312px;
width: 100%;
padding: 10px;
margin: 0 auto;
display: block;
border: 0;
border-radius: 50px;
background: #042d29;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.custom-prev,
.custom-next {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #0d2e2a;
border-radius: 50%;
background: #fff;
color: #0d2e2a;
cursor: pointer;
transition: .3s;
}
.custom-prev:hover,
.custom-next:hover {
background: #0d2e2a;
color: #fff;
}
.banner, .banner img{
height: 100vh;
}
.srvcImg .innerImg {
border-radius: 46% 45% 0 0;
overflow: hidden;
}
.how-to-get{
background-color: #d0e2e4;
padding: 40px 0;
}
.how-to-get-title{
font-size: 42px;
color: var(--black);
text-transform: inherit;
font-weight: 500;
text-align: center;
}
.left-side {
display: flex;
align-items: center;
gap: 1.7rem;
padding-right: 15px;
padding-top: 25px;
padding-bottom: 25px;
border-right: 2px solid #d0e2e4;
min-width: 330px;
max-width: 330px;
}
.py-0{
padding-top: 0;
padding-bottom: 0;
}
.right-side{
padding:25px 35px;
}
.icon {
min-width: 85px;
}
.left-content {
font-size: 24px;
line-height: 30px;
}
.inner-title {
font-size: 20px;
}
.contactBtn {
text-align: center;
margin-bottom: 125px;
}
.contactBtn button.btn {
background-color: var(--black);
border-radius: 30px;
text-transform: uppercase;
font-size: 20px;
color: #fff;
font-weight: 500;
padding: 10px 25px;
}