/* ==========================================
   HERO SECTION
========================================== */

.about-hero-section{
position:relative;
padding: 4px 0 90px;
overflow:hidden;

/* background:linear-gradient(
180deg,
#b8e3cf 0%,
#cfeee0 45%,
#bde6d6 100%
); */
}



/* ==========================================
   CONTAINER
========================================== */

.about-hero-container{

max-width:1200px;
margin:auto;
padding:0 30px;

display:grid;
grid-template-columns:1.1fr 0.9fr;
align-items:center;
gap:70px;

}



/* ==========================================
   LEFT CONTENT
========================================== */

.about-hero-content{
max-width:620px;
}



/* Title */

.about-hero-title{
margin-bottom:20px;
max-width:720px;
}



/* Description */

.about-hero-description{
max-width:620px;
margin-bottom:32px;
}



/* ==========================================
   HIGHLIGHTS
========================================== */

.about-hero-highlights{

display:grid;
grid-template-columns:1fr 1fr;

gap:12px 24px;

margin-bottom:32px;
}


/* Remove previous .highlight-icon CSS completely */

.about-hero-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 32px;
}

/* Highlight container */
.about-highlight {
  position: relative;      /* needed for ::before */
  padding-left: 20px;      /* space for the dot */
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 1.6;        /* ensures multi-line text spacing is smooth */
}

/* Bullet Dot */
.about-highlight::before {
  content: "";
  position: absolute;
  top: 0.5em;             /* aligns vertically with first line */
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(44,110,73,0.12);
}


/* ==========================================
   BUTTONS
========================================== */

.about-hero-buttons{
display:flex;
gap:18px;
}



/* Secondary button */

.btn-secondary{

border:1px solid var(--color-primary);

color:var(--color-primary);

padding:12px 26px;

border-radius:8px;

text-decoration:none;

font-weight:500;

transition:all .3s ease;
}

.btn-secondary:hover{

background:var(--color-primary);
color:#fff;

transform:translateY(-2px);
}



/* ==========================================
   RIGHT VISUAL
========================================== */

.about-hero-visual{
position:relative;
display:flex;
justify-content:center;

}



/* ==========================================
   HERO CARD
========================================== */

.about-hero-card{

   background:linear-gradient(
        5deg,
        var(--card-bg-color) 0%,
        var(--color-secondary) 100%
    );

padding:36px 34px;

border-radius:18px;

border:1px solid var(--color-border);

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

max-width:340px;

position:relative;

transition:all .4s ease;
}

.about-hero-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(0,0,0,0.12);
}



.about-hero-card h3{
margin-bottom:20px;
}



/* List */

.about-hero-card ul{
padding-left:18px;
}

.about-hero-card li{
margin-bottom:12px;
}



/* ==========================================
   GLOW DECORATION
========================================== */

.about-hero-card::before{

content:"";

position:absolute;

width:200px;
height:200px;

background:radial-gradient(
circle,
rgba(207,175,107,0.25),
transparent 70%
);

top:-60px;
right:-60px;

border-radius:50%;

z-index:-1;
}



/* ==========================================
   BACKGROUND ORGANIC SHAPES
========================================== */

.leaf{
  position:absolute;
  width:60px;
  height:60px;
  background:url('/assets/images/leaf.png') no-repeat center/contain;
  opacity:.45;
  animation:floatLeaf 7s ease-in-out infinite;
  z-index:1;
}

/* LEFT SIDE LEAVES */
.leaf-1{
  top:15%;
  left:55%;
  animation-delay:0s;
}

.leaf-2{
  top:65%;
  left:52%;
  animation-delay:2s;
}


@keyframes floatLeaf{
  0%{
    transform:translateY(0) rotate(0deg);
  }

  50%{
    transform:translateY(-20px) rotate(12deg);
  }

  100%{
    transform:translateY(0) rotate(0deg);
  }
}




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

@media (max-width:1024px){

.about-hero-container{
grid-template-columns:1fr;
text-align:center;
gap:50px;
}

.about-hero-content{
margin:auto;
}

.about-hero-description{
margin:auto;
}

.about-hero-buttons{
justify-content:center;
}

.about-hero-highlights{
grid-template-columns:1fr;
}

.about-highlight{
justify-content:center;
}

.about-hero-card{
margin:auto;
}

}