/* ================= ABOUT HERO ================= */
:root{
  /* COLORS */
  --gold:#D3653C;
  --dark:#1c1c1c;
  --text:#4a4a4a;
  --light:#f5f7f2;
  --green:#2f5d50;

 /* SPACING SCALE (8px system like premium UI) */
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-32:32px;
  --space-40:40px;
  --space-48:48px;
  --space-64:64px;
  --space-80:80px;

  /* SECTION SPACING */
  --section-padding:80px;

  /* RADIUS */
  --radius:10px;

  /* SHADOW */
  --shadow:0 10px 30px rgba(0,0,0,0.05);
}


.about-hero{
  position:relative;
  height:100vh;
  min-height:400px;
  overflow:hidden;
}

/* BACKGROUND IMAGE */
.about-bg img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* LEFT LIGHT OVERLAY */
.about-hero::before{
 content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    #f5f7f2 0%,
    #f5f7f2 35%,
    rgba(245,247,242,0.7) 50%,
    transparent 65%
  );
  z-index:1;
}

/* CONTENT */
.about-content-box{
  position:relative;
  z-index:3;
  max-width:650px;
  padding:160px 80px;
}
.about-content-box h1{
  color:#1c1c1c;
}

.about-content-box p{
  color:#4a4a4a;
}

/* TAG */
.about-tag{
  color:#D3653C;
  font-size:12px;
  letter-spacing:2px;
}

/* HEADLINE */
.about-content-box h1{
  font-family:Montserrat, serif;
  font-size:55px;
  line-height:1.15;
  font-weight:600;
  margin:15px 0;
}

/* GOLD WORD */
.about-content-box h1 span{
  color:#D3653C;
}

/* TEXT */
.about-content-box p{
  color:#000;
  font-size:15px;
  line-height:1.6;
  margin-bottom:20px;
}

/* BUTTON */
.about-content-box .btn{
  background:#2f5d50;
  color:#fff;
  padding:12px 22px;
  border-radius:6px;
  text-decoration:none;
  display:inline-block;
}

/* ================= CURVE ================= */

.curve-box{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:180px;
  background:#f5f7f2;
  z-index:3;

  /* 🔥 MIRRORED (RIGHT → LEFT CUT) */
 clip-path: polygon(
  0% 100%,
  0% 0%,
  30% 10%,
  50% 35%,
  75% 60%,
  100% 60%,
  100% 100%
);

  box-shadow:0 -10px 25px rgba(0,0,0,0.06);
}



/* ================= BADGES ================= */

.badges{
  position:absolute;
  bottom:40px;
  left:80px;
  display:flex;
  gap:35px;
  z-index:5;
  align-items:center;
  color:#1c1c1c;

}

.badge-item{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}
.badge-item strong{
  font-size:16px;
}

.badge-item span{
  font-size:12px;
  opacity:0.85;
}
.badge-item i{
  background:rgba(201,167,77,0.08);
  padding:10px;
  border-radius:50%;
}

@media(max-width:768px){

  .badges{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:20px;
  }

  .badge-item::after{
    display:none;
  }
  .about-hero{
  position:relative;
  height:80vh;
  min-height:400px;
  overflow:hidden;
}

}

/* divider */
.badge-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-30px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:28px;
  background:rgba(0,0,0,0.08);
}

/* icon */
.badge-item i{
  font-size:22px;
  color:#D3653C;
}

/* text */
.badge-item strong{
  display:block;
  font-size:16px; 
  color:#1c1c1c;   /* dark */
  font-weight:600;

}

.badge-item span{
  font-size:13px;
  color:#4a4a4a;   
}

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

/* Tablet */
@media(max-width:1024px){

  .about-content-box{
    padding:140px 50px;
  }

  .about-content-box h1{
    font-size:48px;
  }

  .badges{
    left:50px;
    gap:30px;
  }

  .curve-box{
    height:130px;
  }
}

/* ================= PREMIUM MOBILE HERO ================= */
/* ================= LUXURY MOBILE HERO ================= */

@media(max-width:768px){

  .about-hero{
    display:block !important;

  /* IMAGE */
  .about-bg img{
    filter:blur(3px) brightness(0.9);
    transform:scale(1.08);
  }

  /* REMOVE DARK OVERLAY */
  .about-hero::before{
    display:none;
  }

  /* ================= FLOATING CONTENT ================= */

  .about-content-box{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    left:0 !important;
      padding-bottom:10px; 
  }

  .about-bg{
    width:100% !important;
  }

  /* TAG */
  .about-tag{
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:10px;
    font-weight:600;
  }

  /* HEADLINE */
  .about-content-box h1{
    font-size:28px;
    line-height:1.25;
    margin-bottom:12px;
    color:#1c1c1c;
  }

  .about-content-box h1 span{
    color:#D3653C;
  }

  /* TEXT */
  .about-content-box p{
    font-size:14px;
    line-height:1.6;
    color:#000;
    margin-bottom:18px;
    font-weight:500;
  }

  /* BUTTON */
  .about-content-box .btn{
    width:100%;
    padding:14px;
    font-size:14px;
    border-radius:8px;
  }

  /* REMOVE CURVE */
  .curve-box{
    display:none;
  }

  /* ================= BADGES ================= */

 .badges{
    position:absolute; 
    left:0;
    width:100%;
    bottom:10px; 
    display:grid;
    grid-template-columns:1fr 1fr;   /* ✅ 2 x 2 grid */
    gap:14px;

    padding:0 16px;
    z-index:5;
  }

  .badge-item{
    display:flex;
    align-items:center;
    gap:10px;

    background:rgba(255,255,255,0.95);   /* clean card */
    padding:10px 12px;
    border-radius:8px;

    box-shadow:0 4px 12px rgba(0,0,0,0.06);
  }

  /* REMOVE divider */
  .badge-item::after{
    display:none;
  }

  /* ICON */
  .badge-item i{
    font-size:18px;
    color:#D3653C;
    min-width:22px;
  }

  /* TEXT */
  .badge-item strong{
    font-size:14px;
    font-weight:600;
    color:#111;   /* ✅ BLACK */
    display:block;
    line-height:1.2;
  }

  .badge-item span{
    font-size:11px;
    color:#000;
  }


 
/* Small Mobile */
@media(max-width:480px){

  .about-content-box h1{
    font-size:28px;
  }
}