/*=========================================
    BailJi Organic Premium Hero
==========================================*/

.hero-section{

position:relative;

padding:100px 0;

overflow:hidden;

background:linear-gradient(135deg,#f8fff4 0%,#eef8ea 100%);

min-height:720px;

display:flex;

align-items:center;

}

/* Background */

.hero-bg{

position:absolute;

inset:0;

overflow:hidden;

z-index:0;

}

.hero-bg::before{

content:"";

position:absolute;

left:-150px;

top:-120px;

width:450px;

height:450px;

background:#7CB342;

opacity:.08;

border-radius:50%;

}

.hero-bg::after{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:500px;

height:500px;

background:#43A047;

opacity:.08;

border-radius:50%;

}

.hero-circle{

position:absolute;

border-radius:50%;

animation:floatCircle 12s linear infinite;

}

.circle-1{

width:140px;

height:140px;

background:rgba(76,175,80,.10);

left:12%;

top:18%;

}

.circle-2{

width:90px;

height:90px;

background:rgba(139,195,74,.12);

right:20%;

top:15%;

animation-delay:2s;

}

.circle-3{

width:180px;

height:180px;

background:rgba(205,220,57,.08);

right:8%;

bottom:10%;

animation-delay:4s;

}

@keyframes floatCircle{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

/* Container */

.hero-wrapper{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

/* Left */

.hero-content h5{

display:inline-block;

background:#E8F5E9;

color:#2E7D32;

padding:10px 22px;

border-radius:40px;

font-size:16px;

font-weight:600;

margin-bottom:25px;

}

.hero-content h1{

font-size:72px;

font-weight:800;

line-height:1.1;

color:#222;

margin-bottom:25px;

}

.hero-content h1 span{

color:#2E7D32;

}

.hero-content p{

font-size:20px;

line-height:1.8;

color:#666;

margin-bottom:35px;

max-width:580px;

}

/* Buttons */

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border-radius:50px;

font-size:17px;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.hero-btn-primary{

background:#2E7D32;

color:#fff;

}

.hero-btn-primary:hover{

background:#1B5E20;

color:#fff;

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(46,125,50,.25);

}

.hero-btn-outline{

border:2px solid #2E7D32;

color:#2E7D32;

background:#fff;

}

.hero-btn-outline:hover{

background:#2E7D32;

color:#fff;

}

/*=========================================
        HERO IMAGE
==========================================*/

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

z-index:2;

}

.hero-image img{

width:100%;

max-width:650px;

animation:heroFloat 5s ease-in-out infinite;

filter:drop-shadow(0 30px 50px rgba(0,0,0,.18));

transition:.5s;

}

.hero-image img:hover{

transform:scale(1.04);

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
        GLASS CARDS
==========================================*/

.hero-card{

position:absolute;

background:rgba(255,255,255,.75);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

padding:18px 22px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

min-width:220px;

transition:.35s;

z-index:5;

}

.hero-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.hero-card h4{

font-size:20px;

font-weight:700;

margin-bottom:8px;

color:#2E7D32;

}

.hero-card p{

margin:0;

font-size:15px;

color:#666;

}

/* Left Card */

.card-left{

left:-30px;

top:70px;

animation:cardFloat 6s ease-in-out infinite;

}

/* Right Card */

.card-right{

right:-30px;

bottom:90px;

animation:cardFloat 7s ease-in-out infinite;

animation-delay:1s;

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
      ORGANIC BADGE
==========================================*/

.organic-badge{

position:absolute;

top:30px;

right:70px;

width:120px;

height:120px;

border-radius:50%;

background:#2E7D32;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

font-weight:700;

letter-spacing:2px;

box-shadow:0 20px 40px rgba(46,125,50,.30);

animation:badgeSpin 10s linear infinite;

z-index:10;

}

@keyframes badgeSpin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/*=========================================
        HERO STATS
==========================================*/

.hero-stats{

display:flex;

gap:25px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-stat{

background:#fff;

padding:20px 28px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:center;

transition:.35s;

min-width:140px;

}

.hero-stat:hover{

transform:translateY(-10px);

}

.hero-stat h2{

font-size:34px;

font-weight:800;

color:#2E7D32;

margin-bottom:6px;

}

.hero-stat span{

font-size:15px;

font-weight:600;

color:#666;

}
/*=========================================
        FLOATING LEAVES
==========================================*/

.leaf{

position:absolute;

pointer-events:none;

animation:leafFloat 8s ease-in-out infinite;

z-index:3;

opacity:.95;

}

.leaf1{

width:70px;

top:40px;

left:10px;

animation-delay:0s;

}

.leaf2{

width:90px;

right:40px;

top:180px;

animation-delay:2s;

}

.leaf3{

width:60px;

bottom:40px;

left:80px;

animation-delay:4s;

}

@keyframes leafFloat{

0%{

transform:translateY(0) rotate(0deg);

}

25%{

transform:translateY(-15px) rotate(8deg);

}

50%{

transform:translateY(-30px) rotate(-8deg);

}

75%{

transform:translateY(-15px) rotate(6deg);

}

100%{

transform:translateY(0) rotate(0deg);

}

}

/*=========================================
      SCROLL INDICATOR
==========================================*/

.scroll-indicator{

position:absolute;

left:50%;

bottom:25px;

transform:translateX(-50%);

z-index:20;

}

.scroll-mouse{

width:34px;

height:58px;

border:2px solid #2E7D32;

border-radius:30px;

position:relative;

}

.scroll-mouse::before{

content:"";

position:absolute;

left:50%;

top:10px;

transform:translateX(-50%);

width:8px;

height:8px;

background:#2E7D32;

border-radius:50%;

animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

0%{

opacity:1;

top:10px;

}

100%{

opacity:0;

top:34px;

}

}

/*=========================================
      DECORATIVE SHAPES
==========================================*/

.hero-section::before{

content:"";

position:absolute;

width:280px;

height:280px;

border-radius:50%;

background:rgba(76,175,80,.07);

top:-120px;

right:-80px;

}

.hero-section::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgba(139,195,74,.08);

left:-80px;

bottom:-60px;

}

/*=========================================
      IMAGE GLOW
==========================================*/

.hero-image::before{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:radial-gradient(circle,
rgba(76,175,80,.18) 0%,
rgba(76,175,80,.08) 40%,
transparent 75%);

z-index:-1;

animation:pulseGlow 4s infinite;

}

@keyframes pulseGlow{

0%{

transform:scale(1);

opacity:.8;

}

50%{

transform:scale(1.08);

opacity:1;

}

100%{

transform:scale(1);

opacity:.8;

}

}

/*=========================================
      RESPONSIVE
==========================================*/

@media(max-width:992px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.hero-content h1{

font-size:48px;

}

.hero-content p{

font-size:18px;

margin:auto auto 30px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-stats{

justify-content:center;

}

.hero-card{

display:none;

}

.organic-badge{

display:none;

}

.hero-image img{

max-width:420px;

}

.scroll-indicator{

display:none;

}

}

@media(max-width:576px){

.hero-section{

padding:70px 20px;

min-height:auto;

}

.hero-content h1{

font-size:36px;

}

.hero-content h5{

font-size:14px;

}

.hero-content p{

font-size:16px;

}

.hero-btn{

width:100%;

justify-content:center;

}

.hero-buttons{

flex-direction:column;

}

.hero-stat{

min-width:120px;

padding:15px;

}

.hero-stat h2{

font-size:26px;

}

.hero-image img{

max-width:320px;

}

}