/* Start custom CSS for html, class: .elementor-element-e285315 *//* =========================================================
KAUSORA LEAF — BULK ENQUIRY HERO
========================================================= */
.kl-bulk-hero{
position:relative;
width:100%;
height:455px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:#263A18;
color:#fff;
}
/* =========================================================
BACKGROUND IMAGE
========================================================= */
.kl-bulk-bg{
position:absolute;
inset:0;
overflow:hidden;
}
.kl-bulk-bg img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform:scale(1.06);
transition:
transform 1.2s ease;
}
/* =========================================================
OVERLAY
========================================================= */
.kl-bulk-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-bulk-overlay::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
rgba(0,0,0,.02),
rgba(0,0,0,.28)
);
}
/* =========================================================
FALLING LEAVES
========================================================= */
.kl-bulk-leaves{
position:absolute;
inset:0;
z-index:4;
overflow:hidden;
pointer-events:none;
}
.kl-bulk-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:
klBulkLeafFall
var(--bulk-time)
linear
var(--bulk-delay)
infinite;
}
.kl-bulk-leaf::after{
content:"";
position:absolute;
width:84%;
height:1px;
top:50%;
left:8%;
background:
rgba(255,255,255,.55);
transform:rotate(-15deg);
}
@keyframes klBulkLeafFall{
0%{
transform:
translate3d(
0,
-30px,
0
)
rotate(0deg)
scale(.6);
opacity:0;
}
12%{
opacity:.4;
}
45%{
transform:
translate3d(
calc(var(--bulk-drift) * .4),
210px,
0
)
rotate(
calc(var(--bulk-rotation) * .45)
)
scale(1);
}
72%{
transform:
translate3d(
calc(var(--bulk-drift) * -.25),
350px,
0
)
rotate(
calc(var(--bulk-rotation) * .75)
)
scale:.9;
}
100%{
transform:
translate3d(
var(--bulk-drift),
510px,
0
)
rotate(
var(--bulk-rotation)
)
scale:.65;
opacity:0;
}
}
/* =========================================================
CENTER CONTENT
========================================================= */
.kl-bulk-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-bulk-content.kl-bulk-visible{
opacity:1;
transform:
translateY(0);
}
/* =========================================================
KICKER
========================================================= */
.kl-bulk-kicker{
display:block;
margin-bottom:15px;
color:#E0C887;
font-size:8px;
font-weight:700;
letter-spacing:.34em;
}
/* =========================================================
TITLE
========================================================= */
.kl-bulk-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-bulk-divider{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:135px;
margin:
19px auto 17px;
}
.kl-bulk-divider span{
flex:1;
height:1px;
background:
rgba(224,200,135,.75);
}
.kl-bulk-divider i{
width:5px;
height:5px;
background:#DCC17B;
transform:rotate(45deg);
}
/* =========================================================
DESCRIPTION
========================================================= */
.kl-bulk-content p{
max-width:580px;
margin:0 auto;
color:
rgba(255,255,255,.87);
font-size:10px;
line-height:1.85;
letter-spacing:.01em;
}
/* =========================================================
BOTTOM INDICATOR
========================================================= */
.kl-bulk-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-bulk-scroll i{
width:4px;
height:4px;
display:block;
border-radius:50%;
background:#D6BD7B;
animation:
klBulkPulse
1.7s ease-in-out
infinite;
}
@keyframes klBulkPulse{
0%,
100%{
opacity:.35;
transform:
translateY(0);
}
50%{
opacity:1;
transform:
translateY(4px);
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-bulk-hero{
height:430px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-bulk-hero{
height:390px;
}
.kl-bulk-bg img{
object-position:center center;
transform:scale(1.04);
}
.kl-bulk-overlay{
background:
linear-gradient(
180deg,
rgba(16,25,9,.45),
rgba(16,25,9,.60)
);
}
.kl-bulk-kicker{
font-size:6.5px;
letter-spacing:.28em;
margin-bottom:13px;
}
.kl-bulk-content h1{
font-size:56px;
}
.kl-bulk-divider{
width:110px;
margin:
17px auto 14px;
}
.kl-bulk-content p{
width:94%;
font-size:9px;
line-height:1.75;
}
.kl-bulk-scroll{
bottom:17px;
}
.kl-bulk-leaf{
opacity:.32;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-bulk-hero{
height:370px;
}
.kl-bulk-content h1{
font-size:51px;
}
.kl-bulk-content p{
font-size:8.5px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-bulk-leaf,
.kl-bulk-scroll i{
animation:none !important;
}
.kl-bulk-content{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9422300 *//* =========================================================
KAUSORA LEAF — BULK INQUIRY FORM
========================================================= */
.kl-bulk-form-section{
--green:#263A18;
--deep:#17240F;
--gold:#B7964E;
--gold-light:#D7BF7D;
--cream:#F7F3E8;
--paper:#FCFBF7;
--line:rgba(38,58,24,.11);
position:relative;
width:100%;
overflow:hidden;
background:
radial-gradient(
circle at 10% 15%,
rgba(183,150,78,.08),
transparent 28%
),
#FCFBF7;
color:var(--green);
}
/* =========================================================
DECORATIVE LEAVES
========================================================= */
.kl-form-leaf{
position:absolute;
z-index:1;
color:#60713A;
opacity:.12;
font-size:90px;
pointer-events:none;
user-select:none;
}
.kl-form-leaf-1{
top:40px;
left:-28px;
transform:
rotate(-45deg);
}
.kl-form-leaf-2{
top:50px;
right:-30px;
transform:
rotate(35deg);
}
.kl-form-leaf-3{
bottom:80px;
left:-35px;
font-size:75px;
transform:
rotate(30deg);
}
.kl-form-leaf-4{
bottom:45px;
right:-30px;
font-size:80px;
transform:
rotate(-35deg);
}
/* =========================================================
WRAPPER
========================================================= */
.kl-bulk-form-wrap{
position:relative;
z-index:3;
width:min(1100px,90%);
margin:auto;
padding:
85px 0 80px;
}
/* =========================================================
HEADING
========================================================= */
.kl-form-heading{
max-width:650px;
margin:
0 auto 50px;
text-align:center;
}
.kl-form-kicker{
display:block;
margin-bottom:14px;
color:var(--gold);
font-size:7px;
font-weight:700;
letter-spacing:.28em;
}
.kl-form-heading h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px,6vw,68px);
line-height:.85;
font-weight:400;
letter-spacing:-.04em;
}
.kl-form-heading h2 em{
color:var(--gold);
font-style:italic;
}
.kl-form-heading p{
max-width:520px;
margin:
18px auto 0;
color:
rgba(38,58,24,.5);
font-size:10px;
line-height:1.8;
}
/* =========================================================
FORM
========================================================= */
.kl-bulk-form{
position:relative;
padding:
45px;
background:
rgba(255,255,255,.82);
border:
1px solid
rgba(183,150,78,.22);
box-shadow:
0 30px 90px
rgba(38,58,24,.075);
}
/* GOLD CORNERS */
.kl-bulk-form::before,
.kl-bulk-form::after{
content:"";
position:absolute;
width:65px;
height:65px;
pointer-events:none;
}
.kl-bulk-form::before{
top:12px;
left:12px;
border-top:
1px solid
var(--gold);
border-left:
1px solid
var(--gold);
}
.kl-bulk-form::after{
right:12px;
bottom:12px;
border-right:
1px solid
var(--gold);
border-bottom:
1px solid
var(--gold);
}
/* =========================================================
BLOCK
========================================================= */
.kl-form-block{
padding-bottom:38px;
margin-bottom:38px;
border-bottom:
1px solid var(--line);
}
.kl-block-heading{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}
.kl-block-heading > span{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border:
1px solid
rgba(183,150,78,.55);
border-radius:50%;
color:var(--gold);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:15px;
}
.kl-block-heading small{
display:block;
margin-bottom:3px;
color:var(--gold);
font-size:6px;
font-weight:700;
letter-spacing:.2em;
}
.kl-block-heading h3{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:27px;
font-weight:500;
}
/* =========================================================
INPUT GRID
========================================================= */
.kl-input-grid{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:19px;
}
.kl-field{
position:relative;
}
.kl-field label{
display:block;
margin-bottom:7px;
color:
rgba(38,58,24,.65);
font-size:7px;
font-weight:700;
letter-spacing:.07em;
}
.kl-field label b{
color:#A44832;
}
.kl-field label span{
color:
rgba(38,58,24,.35);
font-weight:400;
margin-left:5px;
}
.kl-field input,
.kl-field select,
.kl-field textarea{
width:100%;
box-sizing:border-box;
border:
1px solid
rgba(38,58,24,.13);
outline:none;
background:#fff;
color:var(--green);
border-radius:0;
font-family:inherit;
font-size:9px;
transition:
border-color .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.kl-field input,
.kl-field select{
height:47px;
padding:
0 14px;
}
.kl-field textarea{
resize:vertical;
min-height:130px;
padding:14px;
line-height:1.7;
}
.kl-field input::placeholder,
.kl-field textarea::placeholder{
color:
rgba(38,58,24,.3);
}
.kl-field input:focus,
.kl-field select:focus,
.kl-field textarea:focus{
border-color:
rgba(183,150,78,.75);
background:#fff;
box-shadow:
0 0 0 3px
rgba(183,150,78,.08);
}
/* =========================================================
PHONE
========================================================= */
.kl-phone-field{
display:flex;
height:47px;
border:
1px solid
rgba(38,58,24,.13);
background:#fff;
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.kl-phone-field:focus-within{
border-color:
rgba(183,150,78,.75);
box-shadow:
0 0 0 3px
rgba(183,150,78,.08);
}
.kl-phone-field span{
display:flex;
align-items:center;
padding:
0 13px;
border-right:
1px solid
rgba(38,58,24,.1);
color:
rgba(38,58,24,.55);
font-size:9px;
}
.kl-phone-field input{
flex:1;
height:100%;
border:0;
box-shadow:none;
}
/* =========================================================
OTP
========================================================= */
.kl-otp-box{
display:grid;
grid-template-columns:
1fr auto;
gap:20px;
align-items:center;
margin:
-10px 0 42px;
padding:
18px 20px;
background:
#F5F1E7;
border:
1px solid
rgba(183,150,78,.18);
}
.kl-otp-copy{
display:flex;
align-items:center;
gap:13px;
}
.kl-otp-icon{
display:flex;
align-items:center;
justify-content:center;
width:35px;
height:35px;
border-radius:50%;
background:#fff;
color:var(--gold);
}
.kl-otp-copy small{
display:block;
margin-bottom:3px;
color:var(--gold);
font-size:5.5px;
font-weight:700;
letter-spacing:.16em;
}
.kl-otp-copy strong{
display:block;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:20px;
font-weight:500;
}
.kl-otp-copy p{
margin:2px 0 0;
color:
rgba(38,58,24,.43);
font-size:7px;
}
.kl-send-otp,
#klVerifyOtp{
height:38px;
padding:
0 17px;
border:1px solid var(--gold);
background:transparent;
color:var(--green);
cursor:pointer;
font-size:6px;
font-weight:700;
letter-spacing:.14em;
transition:
background .3s ease,
color .3s ease;
}
.kl-send-otp:hover,
#klVerifyOtp:hover{
background:var(--green);
color:#fff;
}
.kl-otp-verify{
grid-column:
1 / -1;
display:none;
grid-template-columns:
1fr auto;
gap:8px;
}
.kl-otp-verify.kl-show-otp{
display:grid;
}
.kl-otp-verify input{
height:38px;
border:
1px solid
rgba(38,58,24,.13);
padding:
0 13px;
outline:none;
}
.kl-otp-status{
grid-column:
1 / -1;
font-size:7px;
}
.kl-otp-status.success{
color:#4E752D;
}
.kl-otp-status.error{
color:#A44832;
}
.kl-otp-status.warning{
color:#A27630;
}
/* =========================================================
PRODUCT SECTION
========================================================= */
.kl-product-instruction{
margin:
-10px 0 24px;
color:
rgba(38,58,24,.42);
font-size:8px;
}
/* PRODUCT GRID */
.kl-bulk-products{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:12px;
}
.kl-bulk-product{
position:relative;
}
.kl-bulk-product
> input{
position:absolute;
opacity:0;
pointer-events:none;
}
.kl-bulk-product label{
position:relative;
display:flex;
align-items:center;
gap:13px;
min-height:78px;
padding:9px;
border:
1px solid
rgba(38,58,24,.1);
background:#fff;
cursor:pointer;
transition:
border-color .3s ease,
background .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.kl-bulk-product label:hover{
border-color:
rgba(183,150,78,.55);
transform:
translateY(-2px);
box-shadow:
0 8px 25px
rgba(38,58,24,.06);
}
.kl-bulk-product.kl-selected label{
border-color:var(--gold);
background:
#FBF8EF;
box-shadow:
0 8px 25px
rgba(183,150,78,.08);
}
/* PRODUCT IMAGE */
.kl-product-photo{
width:60px;
height:60px;
flex:none;
overflow:hidden;
background:#F0ECE1;
}
.kl-product-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:
transform .5s ease;
}
.kl-bulk-product label:hover
.kl-product-photo img{
transform:
scale(1.08);
}
/* NAME */
.kl-product-name{
min-width:0;
}
.kl-product-name small{
display:block;
margin-bottom:4px;
color:var(--gold);
font-size:5px;
font-weight:700;
letter-spacing:.16em;
}
.kl-product-name strong{
display:block;
color:var(--green);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:18px;
line-height:1;
font-weight:500;
}
/* CHECK */
.kl-product-check{
margin-left:auto;
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
flex:none;
border:
1px solid
rgba(38,58,24,.15);
border-radius:50%;
color:transparent;
font-size:10px;
transition:
background .3s ease,
color .3s ease,
border-color .3s ease;
}
.kl-bulk-product.kl-selected
.kl-product-check{
border-color:var(--gold);
background:var(--gold);
color:#fff;
}
/* QUANTITY */
.kl-quantity{
width:100%;
height:37px;
margin-top:7px;
padding:0 10px;
border:
1px solid
rgba(38,58,24,.1);
outline:none;
background:#fff;
color:var(--green);
font-family:inherit;
font-size:7px;
cursor:pointer;
transition:
border-color .3s ease;
}
.kl-quantity:focus{
border-color:var(--gold);
}
.kl-quantity:disabled{
opacity:.35;
cursor:not-allowed;
}
/* =========================================================
MESSAGE
========================================================= */
.kl-message-field{
position:relative;
}
.kl-character-count{
position:absolute;
right:12px;
bottom:10px;
color:
rgba(38,58,24,.3);
font-size:6px;
}
/* =========================================================
SUMMARY
========================================================= */
.kl-enquiry-summary{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:-5px;
padding:
18px 20px;
background:var(--green);
color:#fff;
}
.kl-summary-label{
display:block;
margin-bottom:4px;
color:var(--gold-light);
font-size:5.5px;
font-weight:700;
letter-spacing:.2em;
}
.kl-enquiry-summary strong{
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:20px;
font-weight:500;
}
.kl-summary-icon{
display:flex;
align-items:center;
justify-content:center;
width:37px;
height:37px;
border:
1px solid
rgba(214,189,123,.4);
border-radius:50%;
font-size:15px;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
.kl-submit-button{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:62px;
margin-top:13px;
padding:
0 12px 0 23px;
border:0;
background:
linear-gradient(
100deg,
#263A18,
#354C20
);
color:#fff;
cursor:pointer;
overflow:hidden;
font-family:inherit;
font-size:8px;
font-weight:700;
letter-spacing:.18em;
transition:
transform .35s ease,
box-shadow .35s ease;
}
.kl-submit-button::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:80%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.14),
transparent
);
transform:
skewX(-20deg);
transition:
left .7s ease;
}
.kl-submit-button:hover::before{
left:130%;
}
.kl-submit-button:hover{
transform:
translateY(-3px);
box-shadow:
0 15px 35px
rgba(38,58,24,.2);
}
.kl-submit-button i{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:50%;
background:var(--gold-light);
color:var(--green);
font-size:17px;
font-style:normal;
transition:
transform .35s ease;
}
.kl-submit-button:hover i{
transform:
rotate(45deg);
}
/* =========================================================
NOTE
========================================================= */
.kl-form-note{
margin:
11px 0 0;
text-align:center;
color:
rgba(38,58,24,.32);
font-size:6.5px;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:850px){
.kl-bulk-form{
padding:35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-bulk-form-wrap{
width:91%;
padding:
65px 0 55px;
}
.kl-form-heading{
margin-bottom:35px;
}
.kl-form-heading h2{
font-size:48px;
}
.kl-form-heading p{
font-size:9px;
}
.kl-bulk-form{
padding:
25px 17px;
}
.kl-bulk-form::before,
.kl-bulk-form::after{
width:42px;
height:42px;
}
.kl-input-grid{
grid-template-columns:1fr;
gap:16px;
}
.kl-block-heading{
margin-bottom:20px;
}
.kl-block-heading h3{
font-size:24px;
}
.kl-otp-box{
grid-template-columns:1fr;
gap:14px;
padding:16px;
}
.kl-otp-action{
width:100%;
}
.kl-send-otp{
width:100%;
}
.kl-otp-verify{
grid-template-columns:1fr;
}
#klVerifyOtp{
width:100%;
}
.kl-bulk-products{
grid-template-columns:1fr;
}
.kl-product-name strong{
font-size:17px;
}
.kl-enquiry-summary{
padding:16px;
}
.kl-submit-button{
min-height:58px;
padding-left:17px;
font-size:7px;
}
.kl-form-leaf{
font-size:60px;
opacity:.08;
}
.kl-form-leaf-1{
left:-25px;
}
.kl-form-leaf-2{
right:-25px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-form-heading h2{
font-size:44px;
}
.kl-bulk-form{
padding:
23px 14px;
}
.kl-product-photo{
width:55px;
height:55px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-bulk-product label,
.kl-product-photo img,
.kl-submit-button,
.kl-submit-button i{
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-50589a6 *//* =========================================================
KAUSORA LEAF
BULK ENQUIRY — WHAT HAPPENS NEXT
========================================================= */
.kl-process-section{
--kl-green:#263A18;
--kl-deep:#17240F;
--kl-gold:#B7964E;
--kl-gold-light:#D8C17D;
--kl-text:#263A18;
--kl-muted:rgba(38,58,24,.48);
--kl-line:rgba(38,58,24,.11);
position:relative;
width:100%;
overflow:hidden;
background:#FFFFFF;
color:var(--kl-text);
}
/* =========================================================
DECORATIVE LEAVES
========================================================= */
.kl-process-leaf{
position:absolute;
z-index:1;
pointer-events:none;
user-select:none;
color:#52672E;
opacity:.08;
font-size:100px;
}
.kl-process-leaf-1{
top:70px;
left:-35px;
transform:
rotate(-38deg);
}
.kl-process-leaf-2{
top:48%;
right:-42px;
transform:
rotate(42deg);
}
.kl-process-leaf-3{
bottom:30px;
left:8%;
font-size:55px;
transform:
rotate(25deg);
}
/* =========================================================
WRAPPER
========================================================= */
.kl-process-wrap{
position:relative;
z-index:3;
width:min(1100px,90%);
margin:auto;
padding:
90px 0 80px;
}
/* =========================================================
HEADING
========================================================= */
.kl-process-heading{
max-width:650px;
margin:
0 auto 55px;
text-align:center;
opacity:0;
transform:
translateY(20px);
transition:
opacity .8s ease,
transform .8s ease;
}
.kl-process-heading.kl-process-visible{
opacity:1;
transform:
translateY(0);
}
.kl-process-kicker{
display:block;
margin-bottom:14px;
color:var(--kl-gold);
font-size:7px;
font-weight:700;
letter-spacing:.28em;
}
.kl-process-heading h2{
margin:0;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:
clamp(48px,6vw,68px);
line-height:.88;
font-weight:400;
letter-spacing:-.04em;
}
.kl-process-heading h2 em{
color:var(--kl-gold);
font-style:italic;
}
.kl-process-heading p{
max-width:520px;
margin:
18px auto 0;
color:var(--kl-muted);
font-size:9px;
line-height:1.85;
}
/* =========================================================
GRID
========================================================= */
.kl-process-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:14px;
}
/* =========================================================
CARD
========================================================= */
.kl-process-card{
position:relative;
min-height:285px;
padding:
23px 21px 22px;
background:#FFFFFF;
border:
1px solid
var(--kl-line);
overflow:hidden;
opacity:0;
transform:
translateY(28px);
transition:
opacity .7s ease,
transform .55s
cubic-bezier(.2,.7,.2,1),
border-color .3s ease,
box-shadow .35s ease;
transform-style:preserve-3d;
}
/* stagger */
.kl-process-card:nth-child(1){
transition-delay:.02s;
}
.kl-process-card:nth-child(2){
transition-delay:.08s;
}
.kl-process-card:nth-child(3){
transition-delay:.14s;
}
.kl-process-card:nth-child(4){
transition-delay:.20s;
}
.kl-process-card:nth-child(5){
transition-delay:.26s;
}
.kl-process-card:nth-child(6){
transition-delay:.32s;
}
.kl-process-card.kl-process-visible{
opacity:1;
transform:
translateY(0);
}
/* TOP */
.kl-process-top{
display:flex;
align-items:center;
justify-content:space-between;
}
.kl-process-number{
color:
rgba(38,58,24,.25);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:28px;
line-height:1;
}
.kl-process-icon{
display:flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
border:
1px solid
rgba(183,150,78,.38);
border-radius:50%;
color:var(--kl-gold);
font-size:13px;
transition:
background .3s ease,
color .3s ease,
transform .35s ease;
}
/* GOLD LINE */
.kl-process-line{
width:28px;
height:2px;
margin:
28px 0 25px;
background:
linear-gradient(
90deg,
var(--kl-gold),
transparent
);
transition:
width .45s ease;
}
/* LABEL */
.kl-process-label{
display:block;
margin-bottom:8px;
color:var(--kl-gold);
font-size:5.5px;
font-weight:700;
letter-spacing:.2em;
}
/* TITLE */
.kl-process-card h3{
margin:0;
max-width:220px;
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size:25px;
line-height:1;
font-weight:500;
}
/* DESCRIPTION */
.kl-process-card p{
max-width:245px;
margin:
12px 0 0;
color:var(--kl-muted);
font-size:7.5px;
line-height:1.75;
}
/* =========================================================
CARD HOVER
========================================================= */
.kl-process-card:hover{
border-color:
rgba(183,150,78,.5);
box-shadow:
0 20px 50px
rgba(38,58,24,.09);
}
.kl-process-card:hover
.kl-process-line{
width:70px;
}
.kl-process-card:hover
.kl-process-icon{
background:var(--kl-green);
color:#fff;
transform:
rotate(12deg);
}
/* =========================================================
SUPPORT LINK
========================================================= */
.kl-support-link{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:15px;
padding-bottom:4px;
border-bottom:
1px solid
rgba(183,150,78,.55);
color:var(--kl-green);
text-decoration:none;
font-size:7px;
font-weight:700;
transition:
color .3s ease,
gap .3s ease;
}
.kl-support-link span{
color:var(--kl-gold);
transition:
transform .3s ease;
}
.kl-support-link:hover{
color:var(--kl-gold);
gap:13px;
}
.kl-support-link:hover span{
transform:
rotate(45deg);
}
/* =========================================================
BOTTOM NOTE
========================================================= */
.kl-process-note{
display:flex;
align-items:center;
gap:20px;
margin-top:22px;
padding:
19px 22px;
background:#F7F4EA;
border:
1px solid
rgba(183,150,78,.17);
opacity:0;
transform:
translateY(15px);
transition:
opacity .7s ease,
transform .7s ease;
}
.kl-process-note.kl-process-visible{
opacity:1;
transform:
translateY(0);
}
.kl-note-leaf{
display:flex;
align-items:center;
justify-content:center;
flex:none;
width:40px;
height:40px;
border-radius:50%;
background:#fff;
font-size:17px;
}
.kl-note-content span{
display:block;
margin-bottom:4px;
color:var(--kl-gold);
font-size:5.5px;
font-weight:700;
letter-spacing:.2em;
}
.kl-note-content p{
margin:0;
color:
rgba(38,58,24,.43);
font-size:7.5px;
line-height:1.6;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:900px){
.kl-process-grid{
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.kl-process-wrap{
width:91%;
padding:
65px 0 55px;
}
.kl-process-heading{
margin-bottom:35px;
}
.kl-process-heading h2{
font-size:48px;
}
.kl-process-heading p{
font-size:8.5px;
}
.kl-process-grid{
grid-template-columns:1fr;
gap:10px;
}
.kl-process-card{
min-height:auto;
padding:
20px;
}
.kl-process-card h3{
font-size:24px;
}
.kl-process-card p{
max-width:100%;
font-size:8px;
}
.kl-process-line{
margin:
20px 0 20px;
}
.kl-process-note{
align-items:flex-start;
padding:17px;
}
.kl-note-content p{
font-size:7px;
}
.kl-process-leaf{
font-size:65px;
opacity:.055;
}
.kl-process-leaf-1{
left:-25px;
}
.kl-process-leaf-2{
right:-25px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:390px){
.kl-process-heading h2{
font-size:44px;
}
.kl-process-card{
padding:18px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
.kl-process-heading,
.kl-process-card,
.kl-process-note{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c384671 *//* ===================================================== */
/* KAUSORA LEAF - BRANDING MATCHED CUSTOM CSS */
/* Theme Colors Extracted Directly From Logo: */
/* - Deep Forest Green (#0D3B18) */
/* - Elegant Regal Gold (#C89D2B / #D4AF37) */
/* - Soft Natural Cream Background (#FAF8F3) */
/* ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Poppins:wght@400;500;600&display=swap');
:root {
--brand-green: #0d3b18; /* Deep Emerald Green from Logo 'Kausora' */
--brand-green-hover: #07240e; /* Darker Shade for Hover */
--brand-gold: #c89d2b; /* Rich Metallic Gold from Logo 'Leaf' */
--brand-gold-light: #e6c56c; /* Accent Light Gold */
--brand-gold-bg: #fcf8ed; /* Soft Gold Tint Background */
--bg-cream: #f8f6f0; /* Premium Natural Off-White Background */
--card-white: #ffffff; /* Clean Card Background */
--text-dark: #121f14; /* Soft Dark Text */
--text-muted: #536356; /* Muted Text */
--border-gold: #e5d5a6; /* Soft Gold Border */
--border-green: #2a5233; /* Accent Green Border */
--shadow-premium: 0 10px 30px rgba(13, 59, 24, 0.08);
}
.bulk-inquiry-section {
padding: 60px 20px;
background-color: var(--bg-cream);
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
position: relative;
}
.bulk-container {
max-width: 980px;
margin: 0 auto;
}
/* Heading Section */
.bulk-heading {
text-align: center;
margin-bottom: 40px;
}
.bulk-badge {
background: var(--brand-gold-bg);
color: var(--brand-green);
border: 1px solid var(--border-gold);
padding: 8px 22px;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
display: inline-block;
margin-bottom: 15px;
text-transform: uppercase;
}
.bulk-heading h2 {
font-family: 'Cinzel', serif; /* Premium luxury font for Kausora Leaf */
font-size: 36px;
font-weight: 700;
color: var(--brand-green);
margin-bottom: 12px;
letter-spacing: 0.5px;
}
.bulk-heading p {
color: var(--text-muted);
font-size: 15px;
max-width: 680px;
margin: 0 auto;
line-height: 1.7;
}
/* Form Cards */
.form-card {
background: var(--card-white);
padding: 35px;
border-radius: 16px;
box-shadow: var(--shadow-premium);
margin-bottom: 30px;
border: 1px solid var(--border-gold);
position: relative;
}
.card-title {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 600;
color: var(--brand-green);
margin-bottom: 22px;
padding-bottom: 12px;
border-bottom: 2px solid var(--brand-gold);
display: flex;
align-items: center;
gap: 10px;
}
.card-subtitle {
font-size: 14px;
color: var(--text-muted);
margin-top: -14px;
margin-bottom: 22px;
}
/* Grids & Form Controls */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
color: var(--brand-green);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--border-gold);
border-radius: 8px;
font-size: 14px;
background-color: #fafbf9;
color: var(--text-dark);
outline: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--brand-green);
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(13, 59, 24, 0.12);
}
.form-group small {
display: block;
margin-top: 6px;
color: var(--text-muted);
font-size: 12px;
}
/* Product Cards Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 20px;
}
.product-card {
border: 1.5px solid var(--border-gold);
border-radius: 12px;
padding: 16px;
background: #ffffff;
text-align: center;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-card:hover {
border-color: var(--brand-green);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(13, 59, 24, 0.1);
}
.product-image {
width: 100%;
height: 140px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 14px;
background: var(--bg-cream);
border: 1px solid var(--border-gold);
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.product-card:hover .product-image img {
transform: scale(1.06);
}
.product-content h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 10px;
color: var(--brand-green);
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.product-content label {
font-size: 11px;
color: var(--brand-gold);
font-weight: 600;
display: block;
margin-bottom: 5px;
text-align: left;
text-transform: uppercase;
}
.product-content select {
padding: 9px 10px;
font-size: 13px;
border-radius: 6px;
border: 1px solid var(--border-gold);
background: #ffffff;
}
/* Agreement Checkbox */
.agreement-box {
margin-bottom: 22px;
}
.checkbox-wrapper {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.checkbox-wrapper input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--brand-green);
cursor: pointer;
margin-top: 2px;
}
/* WhatsApp / Support Contact Box */
.contact-box {
background: var(--brand-gold-bg);
border: 1px dashed var(--brand-gold);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 25px;
}
.contact-icon {
font-size: 34px;
color: var(--brand-green);
}
.contact-content h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: var(--brand-green);
}
.contact-content p {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 10px;
}
.whatsapp-btn {
display: inline-block;
background: var(--brand-green);
color: #ffffff;
font-size: 13px;
font-weight: 600;
padding: 8px 18px;
border-radius: 25px;
text-decoration: none;
transition: background 0.3s ease;
}
.whatsapp-btn:hover {
background: var(--brand-green-hover);
color: #ffffff;
}
/* Submit Button */
.submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--brand-green) 0%, #154c21 100%);
color: #ffffff;
padding: 16px;
border: 1px solid var(--brand-gold);
border-radius: 8px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
box-shadow: 0 6px 20px rgba(13, 59, 24, 0.2);
transition: all 0.3s ease;
}
.submit-btn:hover {
background: var(--brand-green-hover);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(13, 59, 24, 0.3);
}
/* Popups & Overlays */
.success-popup,
.form-loader {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(13, 35, 18, 0.7);
backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
z-index: 99999;
}
.popup-content,
.loader-box {
background: #ffffff;
padding: 40px 30px;
border-radius: 16px;
text-align: center;
max-width: 400px;
width: 90%;
border: 1.5px solid var(--brand-gold);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.popup-icon {
width: 65px;
height: 65px;
background: var(--brand-gold-bg);
color: var(--brand-green);
border: 1px solid var(--border-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: bold;
margin: 0 auto 18px auto;
}
.popup-content h3 {
font-family: 'Cinzel', serif;
font-size: 22px;
color: var(--brand-green);
margin-bottom: 10px;
}
.popup-content p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 22px;
line-height: 1.6;
}
.popup-whatsapp-btn {
background: var(--brand-green);
color: #fff;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: inline-block;
}
/* Spinner */
.loader-spinner {
width: 48px;
height: 48px;
border: 4px solid var(--brand-gold-bg);
border-top: 4px solid var(--brand-green);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 18px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Toast Message */
.toast-message {
position: fixed;
bottom: 25px;
right: 25px;
background: var(--brand-green);
border: 1px solid var(--brand-gold);
color: #ffffff;
padding: 14px 22px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transform: translateY(100px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
z-index: 9999;
}
.toast-message.show {
transform: translateY(0);
opacity: 1;
}
.toast-content h5 {
font-size: 13px;
margin: 0;
color: var(--brand-gold-light);
}
.toast-content p {
font-size: 12px;
margin: 0;
}
/* Floating Elements */
.scroll-top-btn {
display: none;
position: fixed;
bottom: 85px;
right: 25px;
background: var(--brand-green);
border: 1px solid var(--brand-gold);
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 998;
transition: all 0.2s;
}
.scroll-top-btn:hover {
background: var(--brand-green-hover);
}
.floating-whatsapp {
position: fixed;
bottom: 25px;
left: 25px;
background: var(--brand-green);
border: 1px solid var(--brand-gold);
color: #fff;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
box-shadow: 0 6px 16px rgba(0,0,0,0.2);
z-index: 998;
text-decoration: none;
transition: transform 0.2s;
}
.floating-whatsapp:hover {
transform: scale(1.08);
}
.thank-you-note {
text-align: center;
padding: 30px 20px 0 20px;
}
.thank-you-content h3 {
font-family: 'Cinzel', serif;
font-size: 20px;
color: var(--brand-green);
margin-bottom: 8px;
}
.thank-you-content p {
font-size: 14px;
color: var(--text-muted);
}
/* Responsive Fixes */
@media (max-width: 768px) {
.form-card {
padding: 22px 18px;
}
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
gap: 12px;
}
.product-image {
height: 110px;
}
.bulk-heading h2 {
font-size: 26px;
}
}/* End custom CSS */