/* Hero */

.hero{
padding:60px 0 100px;
position:relative;
overflow:hidden;
}

/* Hero Grid */

.hero-grid{
display:grid;
grid-template-columns:320px 1fr 320px;
align-items:center;
gap:40px;
position:relative;
}

/* Hero Slider */

.hero-slider{
display:flex;
flex-direction:column;
gap:22px;
}

/* Hero Card */

.hero-card{
position:relative;
height:300px;
border-radius:28px;
overflow:hidden;
background:#fff;
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* Hero Image */

.hero-image{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}

/* Current Image */

.current-image,
.next-image{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* Current Image */

.current-image{
transform:translateY(0);
z-index:2;
}

/* Next Image */

.next-image{
transform:translateY(100%);
z-index:1;
}

/* Hover */

.hero-card:hover .current-image{
transform:scale(1.08);
transition:transform .6s ease;
}
/* Card Hover */

.hero-card:hover img{
transform:scale(1.08);
}

/* Number */

.number{
position:absolute;
left:18px;
bottom:18px;
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.45);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.2);
border-radius:50%;
color:#fff;
font-size:15px;
font-weight:600;
z-index:5;
}

/* Hero Content */

.hero-content{
display:flex;
justify-content:center;
align-items:center;
}

/* Hero Paper */

.hero-paper{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
min-height:944px;
padding:80px 60px;
background:#faf7f2;
border-radius:34px;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* Paper Texture */

.hero-paper::before{
content:"";
position:absolute;
inset:0;
/* background:url("../images/paper-texture.webp") center/cover; */
opacity:.15;
pointer-events:none;
}

/* Watercolor */

.hero-paper::after{
content:"";
position:absolute;
inset:0;
background:url("../images/Bg1.webp") center/cover;
pointer-events:none;
}

/* Subtitle */

.hero-subtitle{
position:relative;
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:600;
letter-spacing:4px;
color:var(--green);
margin-bottom:28px;
z-index:2;
}

/* Heading */

.hero-content h1{
position:relative;
font-family:"Cormorant Garamond",serif;
font-size:76px;
line-height:1;
font-weight:700;
color:var(--text);
margin-bottom:30px;
z-index:2;
}

/* Heading Highlight */

.hero-content h1 span{
display:block;
margin:10px 0;
font-size:84px;
font-style:italic;
color:var(--orange);
}

/* Description */

.hero-content p{
position:relative;
max-width:500px;
font-size:18px;
line-height:1.9;
color:#666;
margin-bottom:45px;
z-index:2;
}

/* Hero Buttons */

.hero-buttons{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
margin-bottom:70px;
z-index:2;
}

/* Primary Button */

.primary-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 30px;
background:var(--green);
color:#fff;
border-radius:16px;
font-weight:600;
transition:.35s;
}

/* Primary Hover */

.primary-btn:hover{
background:var(--green-dark);
transform:translateY(-4px);
}

/* Secondary Button */

.secondary-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 30px;
border:2px solid var(--orange);
color:var(--orange);
border-radius:16px;
font-weight:600;
transition:.35s;
}

/* Secondary Hover */

.secondary-btn:hover{
background:var(--orange);
color:#fff;
transform:translateY(-4px);
}

/* Hero Arrow */

.hero-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:50%;
background:rgba(109,115,81,.95);
color:#fff;
font-size:18px;
cursor:pointer;
transition:.35s;
z-index:20;
}

/* Previous */

.hero-prev{
left:295px;
}

/* Next */

.hero-next{
right:295px;
}

/* Arrow Hover */

.hero-arrow:hover{
background:var(--green-dark);
transform:translateY(-50%) scale(1.08);
}

/* Scroll */

.scroll-indicator{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
z-index:2;
}

/* Mouse */

.mouse{
width:34px;
height:56px;
display:flex;
justify-content:center;
padding-top:8px;
border:2px solid rgba(109,115,81,.5);
border-radius:30px;
}

/* Wheel */

.wheel{
width:6px;
height:10px;
background:var(--green);
border-radius:30px;
}

/* Scroll Text */

.scroll-indicator span{
font-size:12px;
font-weight:600;
letter-spacing:3px;
color:#666;
}