/* Start custom CSS for html, class: .elementor-element-5f19df0 *//* =========================================================
KAUSORA LEAF — CONTACT HERO
========================================================= */
.kl-contact-hero{
position:relative;
width:100%;
height:455px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:#263A18;
color:#fff;
}
/* =========================================================
BACKGROUND IMAGE
========================================================= */
.kl-contact-bg{
position:absolute;
inset:0;
overflow:hidden;
}
.kl-contact-bg img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform:scale(1.06);
transition:
transform 1.2s ease;
}
/* =========================================================
OVERLAY
========================================================= */
.kl-contact-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
90deg,
rgba(16,25,9,.64),
rgba(21,31,12,.40),
rgba(16,25,9,.64)
);
}
.kl-contact-overlay::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
rgba(0,0,0,.02),
rgba(0,0,0,.28)
);
}
/* =========================================================
FALLING TEA LEAVES
========================================================= */
.kl-contact-leaves{
position:absolute;
inset:0;
z-index:4;
overflow:hidden;
pointer-events:none;
}
.kl-contact-leaf{
position:absolute;
top:-25px;
display:block;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#A1AD70,
#5C7032
);
opacity:.38;
filter:
drop-shadow(
0 2px 3px
rgba(0,0,0,.25)
);
animation:
klContactLeafFall
var(--contact-time)
linear
var(--contact-delay)
infinite;
}
.kl-contact-leaf::after{
content:"";
position:absolute;
width:84%;
height:1px;
top:50%;
left:8%;
background:
rgba(255,255,255,.55);
transform:
rotate(-15deg);
}
@keyframes klContactLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.4;
}
45%{
transform:
translate3d(
calc(var(--contact-drift) * .4),
210px,
0
)
rotate(
calc(var(--contact-rotation) * .45)
)
scale(1);
}
72%{
transform:
translate3d(
calc(var(--contact-drift) * -.25),
350px,
0
)
rotate(
calc(var(--contact-rotation) * .75)
)
scale:.9;
}
100%{
transform:
translate3d(
var(--contact-drift),
510px,
0
)
rotate(
var(--contact-rotation)
)
scale:.65;
opacity:0;
}
}
/* =========================================================
CENTER CONTENT
========================================================= */
.kl-contact-content{
position:relative;
z-index:5;
width:90%;
max-width:700px;
text-align:center;
opacity:0;
transform:
translateY(24px);
transition:
opacity .9s ease,
transform .9s
cubic-bezier(.2,.7,.2,1);
}
.kl-contact-content.kl-contact-visible{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
KICKER
========================================================= */
.kl-contact-kicker{
display:block;
margin-bottom:15px;
color:#E0C887;
font-size:8px;
font-weight:700;
letter-spacing:.34em;
}
/* =========================================================
TITLE
========================================================= */
.kl-contact-content h1{
margin:0;
color:#fff;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(58px,7vw,86px);
line-height:.85;
font-weight:400;
letter-spacing:-.04em;
text-shadow:
0 5px 25px
rgba(0,0,0,.2);
}
/* =========================================================
DIVIDER
========================================================= */
.kl-contact-divider{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:135px;
margin:
19px auto 17px;
}
.kl-contact-divider span{
flex:1;
height:1px;
background:
rgba(224,200,135,.75);
}
.kl-contact-divider i{
width:5px;
height:5px;
background:#DCC17B;
transform:rotate(45deg);
}
/* =========================================================
DESCRIPTION
========================================================= */
.kl-contact-content p{
max-width:580px;
margin:0 auto;
color:
rgba(255,255,255,.87);
font-size:10px;
line-height:1.85;
}
/* =========================================================
BOTTOM INDICATOR
========================================================= */
.kl-contact-scroll{
position:absolute;
bottom:21px;
left:50%;
z-index:6;
transform:
translateX(-50%);
display:flex;
align-items:center;
gap:8px;
color:
rgba(255,255,255,.62);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-contact-scroll i{
width:4px;
height:4px;
display:block;
border-radius:50%;
background:#D6BD7B;
animation:
klContactPulse
1.7s ease-in-out
infinite;
}
@keyframes klContactPulse{
0%,
100%{
opacity:.35;
transform:
translateY(0);
}
50%{
opacity:1;
transform:
translateY(4px);
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-contact-hero{
height:430px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-contact-hero{
height:390px;
}
.kl-contact-bg img{
object-position:center center;
transform:scale(1.04);
}
.kl-contact-overlay{
background:
linear-gradient(
180deg,
rgba(16,25,9,.45),
rgba(16,25,9,.60)
);
}
.kl-contact-kicker{
font-size:6.5px;
letter-spacing:.28em;
margin-bottom:13px;
}
.kl-contact-content h1{
font-size:56px;
}
.kl-contact-divider{
width:110px;
margin:
17px auto 14px;
}
.kl-contact-content p{
width:94%;
font-size:9px;
line-height:1.75;
}
.kl-contact-scroll{
bottom:17px;
}
.kl-contact-leaf{
opacity:.32;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-contact-hero{
height:370px;
}
.kl-contact-content h1{
font-size:51px;
}
.kl-contact-content p{
font-size:8.5px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-contact-leaf,
.kl-contact-scroll i{
animation:none !important;
}
.kl-contact-content{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-93a14f2 *//* =========================================================
KAUSORA LEAF — CONTACT INFORMATION
========================================================= */
.kl-contact-info{
--green:#263A18;
--deep:#17240F;
--gold:#B7964E;
--gold-light:#D8C17D;
--muted:rgba(38,58,24,.48);
--line:rgba(38,58,24,.12);
position:relative;
width:100%;
overflow:hidden;
background:#fff;
color:var(--green);
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-ci-leaves{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}
.kl-ci-leaf{
position:absolute;
top:-30px;
border-radius:
100% 0 100% 0;
background:
linear-gradient(
135deg,
#52662D,
#263A18
);
opacity:.22;
animation:
klCiLeafFall
var(--ci-time)
linear
var(--ci-delay)
infinite;
}
.kl-ci-leaf::after{
content:"";
position:absolute;
top:50%;
left:8%;
width:84%;
height:1px;
background:
rgba(255,255,255,.5);
transform:rotate(-15deg);
}
@keyframes klCiLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.22;
}
45%{
transform:
translate3d(
calc(var(--ci-drift) * .4),
300px,
0
)
rotate(
calc(var(--ci-rotate) * .45)
)
scale(1);
}
75%{
transform:
translate3d(
calc(var(--ci-drift) * -.25),
600px,
0
)
rotate(
calc(var(--ci-rotate) * .75)
);
}
100%{
transform:
translate3d(
var(--ci-drift),
900px,
0
)
rotate(
var(--ci-rotate)
)
scale(.65);
opacity:0;
}
}
/* =========================================================
WRAPPER
========================================================= */
.kl-ci-wrap{
position:relative;
z-index:3;
width:min(1100px,90%);
margin:auto;
padding:
90px 0;
display:grid;
grid-template-columns:
.9fr 1.1fr;
gap:85px;
align-items:center;
}
/* =========================================================
LEFT
========================================================= */
.kl-ci-left{
opacity:0;
transform:
translateX(-25px);
transition:
opacity .8s ease,
transform .8s
cubic-bezier(.2,.7,.2,1);
}
.kl-ci-left.kl-ci-visible{
opacity:1;
transform:
translateX(0);
}
.kl-ci-kicker{
display:block;
margin-bottom:14px;
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.27em;
}
.kl-ci-left h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px,5.5vw,68px);
line-height:.84;
font-weight:400;
letter-spacing:-.045em;
}
.kl-ci-left h2 em{
color:var(--gold);
font-style:italic;
}
.kl-ci-intro{
max-width:390px;
margin:
21px 0 35px;
color:var(--muted);
font-size:9px;
line-height:1.9;
}
/* =========================================================
CONTACT DETAILS
========================================================= */
.kl-ci-details{
border-top:
1px solid var(--line);
}
.kl-ci-detail{
display:flex;
align-items:center;
gap:13px;
min-height:73px;
border-bottom:
1px solid var(--line);
text-decoration:none;
color:var(--green);
transition:
padding-left .35s ease,
background .35s ease;
}
.kl-ci-detail:hover{
padding-left:8px;
}
.kl-ci-icon{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
flex:none;
border:
1px solid
rgba(183,150,78,.35);
border-radius:50%;
color:var(--gold);
font-size:13px;
}
.kl-ci-detail > span:nth-child(2){
flex:1;
}
.kl-ci-detail small{
display:block;
margin-bottom:4px;
color:
rgba(38,58,24,.35);
font-size:5.5px;
font-weight:700;
letter-spacing:.18em;
}
.kl-ci-detail strong{
display:block;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:18px;
font-weight:500;
}
.kl-ci-detail > i{
color:var(--gold);
font-size:15px;
font-style:normal;
transition:
transform .3s ease;
}
.kl-ci-detail:hover > i{
transform:
rotate(45deg);
}
/* =========================================================
FORM BOX
========================================================= */
.kl-ci-form-box{
position:relative;
padding:
38px;
background:#F7F4EA;
border:
1px solid
rgba(183,150,78,.22);
opacity:0;
transform:
translateX(25px);
transition:
opacity .8s ease .1s,
transform .8s
cubic-bezier(.2,.7,.2,1);
}
.kl-ci-form-box.kl-ci-visible{
opacity:1;
transform:
translateX(0);
}
/* decorative corner */
.kl-ci-form-box::before{
content:"";
position:absolute;
top:13px;
left:13px;
width:48px;
height:48px;
border-top:
1px solid var(--gold);
border-left:
1px solid var(--gold);
}
.kl-ci-form-box::after{
content:"";
position:absolute;
right:13px;
bottom:13px;
width:48px;
height:48px;
border-right:
1px solid var(--gold);
border-bottom:
1px solid var(--gold);
}
.kl-ci-form-head{
margin-bottom:25px;
}
.kl-ci-form-head span{
color:var(--gold);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-ci-form-head h3{
margin:
7px 0 0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:32px;
font-weight:500;
}
/* =========================================================
FORM
========================================================= */
.kl-ci-form{
position:relative;
z-index:2;
}
.kl-ci-input-row{
display:grid;
grid-template-columns:
1fr 1fr;
gap:14px;
}
.kl-ci-form > div{
margin-bottom:15px;
}
.kl-ci-form label{
display:block;
margin-bottom:6px;
color:
rgba(38,58,24,.6);
font-size:6.5px;
font-weight:700;
letter-spacing:.08em;
}
.kl-ci-form input,
.kl-ci-form select,
.kl-ci-form textarea{
width:100%;
box-sizing:border-box;
border:
1px solid
rgba(38,58,24,.13);
background:#fff;
color:var(--green);
outline:none;
font-family:inherit;
font-size:8px;
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.kl-ci-form input,
.kl-ci-form select{
height:43px;
padding:
0 12px;
}
.kl-ci-form textarea{
padding:12px;
resize:vertical;
min-height:100px;
line-height:1.7;
}
.kl-ci-form input:focus,
.kl-ci-form select:focus,
.kl-ci-form textarea:focus{
border-color:
rgba(183,150,78,.7);
box-shadow:
0 0 0 3px
rgba(183,150,78,.08);
}
.kl-ci-form input::placeholder,
.kl-ci-form textarea::placeholder{
color:
rgba(38,58,24,.3);
}
/* =========================================================
SUBMIT
========================================================= */
.kl-ci-submit{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:56px;
padding:
0 11px 0 18px;
border:0;
background:var(--green);
color:#fff;
cursor:pointer;
font-family:inherit;
font-size:7px;
font-weight:700;
letter-spacing:.17em;
transition:
transform .3s ease,
box-shadow .3s ease;
}
.kl-ci-submit:hover{
transform:
translateY(-3px);
box-shadow:
0 12px 28px
rgba(38,58,24,.18);
}
.kl-ci-submit i{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:50%;
background:var(--gold-light);
color:var(--green);
font-size:15px;
font-style:normal;
transition:
transform .35s ease;
}
.kl-ci-submit:hover i{
transform:
rotate(45deg);
}
.kl-ci-note{
margin:
9px 0 0;
text-align:center;
color:
rgba(38,58,24,.32);
font-size:5.5px;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-ci-wrap{
gap:45px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-ci-wrap{
width:91%;
padding:
65px 0;
display:flex;
flex-direction:column;
gap:50px;
}
.kl-ci-left{
width:100%;
}
.kl-ci-left h2{
font-size:48px;
}
.kl-ci-intro{
font-size:8.5px;
margin-bottom:28px;
}
.kl-ci-detail{
min-height:67px;
}
.kl-ci-detail strong{
font-size:17px;
}
.kl-ci-form-box{
width:100%;
box-sizing:border-box;
padding:
30px 18px;
}
.kl-ci-form-head h3{
font-size:29px;
}
.kl-ci-input-row{
grid-template-columns:1fr;
gap:0;
}
.kl-ci-form input,
.kl-ci-form select{
height:46px;
font-size:9px;
}
.kl-ci-form textarea{
font-size:9px;
}
.kl-ci-leaf{
opacity:.16;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-ci-left h2{
font-size:44px;
}
.kl-ci-detail strong{
font-size:16px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-ci-leaf{
animation:none !important;
}
.kl-ci-left,
.kl-ci-form-box,
.kl-ci-detail{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */