@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

.hero{
min-height:100vh;
padding:160px 0 120px;
background-image: var(--hero-bg-current, url("../assets/herosection-homepages.webp"));
background-size:cover;
background-position:center;
background-repeat:no-repeat;
display:flex;
align-items:center;
position:relative;
overflow:hidden;
isolation:isolate;
color:white;
font-family:'Roboto', sans-serif;
}
.hero .Nav-heading{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(29px, 4.3vw, 39px);
  font-weight: 300;
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: 0.2px;
  text-transform: none;
  max-width: 820px;
  text-wrap: balance;
  color: #ffffff;
}

.hero::before,
.hero::after{
content:"";
position:absolute;
inset:0;
}

.hero::before{
background-image:var(--hero-bg-next, var(--hero-bg-current, url("../assets/herosection-homepages.webp")));
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transition:opacity 1.8s ease-in-out;
will-change:opacity;
z-index:0;
}

.hero.is-crossfading::before{
opacity:1;
}

.hero::after{
background:rgba(0,0,0,0.35);
z-index:1;
}
.text-hero{
  color: #ffffff;
}
.hero-content{
position:relative;
z-index:2;
max-width:760px;
padding: clamp(10px, 2vw, 20px) 0 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
}

.hero-pill{
display:inline-flex;
align-items:center;
padding:8px 16px;
border-radius:999px;
background:rgba(255,255,255,0.16);
font-size:11px;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:16px;
border:1px solid rgba(255,255,255,0.14);
font-family:'Poppins', sans-serif;
}

.hero h1{
font-size:58px;
font-weight:600;
letter-spacing:1px;
line-height:1.05;
margin:0 0 18px;
}

.hero p{
font-size:15.5px;
line-height:1.75;
opacity:0.94;
margin:0 0 22px;
max-width:660px;
text-shadow:0 4px 24px rgba(0,0,0,0.18);
}

.hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.hero-actions--glass{
  
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:min(100%, 540px);
  padding:12px;
  border-radius:5px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(6px);
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
}

.hero-btn,
.hero-link{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:9px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  min-width:0;
  font-family:'Poppins', sans-serif;
  font-weight:600;
  flex:1 1 0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-height:52px;
transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-btn{
background:rgba(255,255,255,0.08);
color:#ffffff;
border:1px solid rgba(255,255,255,0.22);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
padding-left:18px;
padding-right:18px;
gap:8px;
}

.hero-btn::after{
content:"\2192";
line-height:1;
}

.hero-link{
border:0;
background:linear-gradient(135deg, #4e6d44 0%, #365132 100%);
color:#ffffff;
min-width: 168px;
flex:0 0 auto;
box-shadow:0 12px 28px rgba(0,0,0,0.22);
gap:8px;
transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero-link::after{
content:"\2192";
font-size:14px;
line-height:1;
opacity:0.92;
transition:transform 0.2s ease;
}

.hero-btn:hover,
.hero-link:hover{
transform:translateY(-1px);
}

.hero-link:hover{
background:linear-gradient(135deg, #55764a 0%, #2f482b 100%);
box-shadow:0 16px 34px rgba(0,0,0,0.25);
}

.hero-link:hover::after{
transform:translateX(2px);
}

.hero-card{
position:relative;
margin-top: 22px;
z-index:2;
}


@media (max-width: 991px){
  .hero{
    background-attachment:scroll;
    padding:140px 0 100px;
  }
}

@media (max-width: 768px){
  .hero{
    min-height: 640px;
    height: auto;
    padding: 112px 0 72px;
    background-position: center top;
  }

  .hero::before{
    background-position:center top;
  }

  .hero-content{
    max-width: 100%;
    padding: 4px 0 0;
  }

  .hero h1{
    font-size: clamp(32px, 9vw, 44px);
    letter-spacing: 1px;
  }

  .hero .Nav-heading{
    /* font-size: clamp(35px, 10.2vw, 52px); */
    font-size: 20px;
    max-width: 100%;
  }

  .hero p{
    font-size: 10.5px;
    line-height: 1.7;
    max-width: 90%;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:10px;
  }

  .hero-btn,
  .hero-link{
    width:100%;
    justify-content:center;
    min-width:0;
    white-space:normal;
    text-overflow:clip;
  }

  .hero-card{
    width: 100%;
    margin-top: 18px;
  }

  .hero-actions--glass{
    width:100%;
    padding: 10px;
    border-radius: 20px;
    gap:10px;
    flex-direction:column;
    align-items:stretch;
  }

  .hero-btn{
    flex: 1 1 100%;
    font-size: 11px;
    line-height: 1.3;
    justify-content:center;
    padding: 12px 14px;
    min-height: 48px;
  }

  .hero-link{
    flex: 1 1 100%;
    min-width: 0;
    padding: 12px 14px;
    white-space: normal;
    min-height: 48px;
  }
}