@font-face {
  font-family: 'Averta';
  src: url('../fonts/AvertaDemoPE-Regular.otf') format('opentype');
  font-style: normal;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial, sans-serif;}

/* MAIN SECTION */
.hero {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px;
  gap: 40px;
  position: relative;              /* IMPORTANT */
  background: #f4f4f4 url('../../assets/images/ageBG.webp') center/cover no-repeat;
  overflow: hidden;                /* for clean edges */
}

/* OVERLAY LAYER */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);     /* adjust darkness */
  z-index: 1;
}

/* MAKE HERO CONTENT ABOVE OVERLAY */
.hero > * {
  position: relative;
  z-index: 2;
}


/* MOBILE MODE */
@media(max-width:768px){
  .hero{
    flex-direction:column;
    text-align:center;
    padding:20px;
    background:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee') center/cover no-repeat;
  }
}

/* LEFT SIDE CONTENT */
.hero-content{
  flex:1;
      min-width: 40vh;
  display: flex;
    flex-direction: column;
    /* align-content: space-around; */
    justify-content: center;
    align-items: center;
}
.hero-logo{
  width:110px;
  margin-bottom:20px;
}
.hero-title{
  font-size:60px;
  font-weight:700;
  margin-bottom:15px;
  color: #fff;
}
.hero-text{
  font-size:22px;
  font-weight: bold;
  margin-bottom:25px;
  line-height:1.5;
  color: #fff;
}
.hero-btn{
  padding:14px 26px;
  font-size:25px;
  background:#0b8a2f;
  color:white;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:.3s ease;
}
.hero-btn:hover{background:#0a7528;}

/* RIGHT SIDE MOBILE FRAME */
.hero-mobile{
  flex:1;
  display:flex;
  justify-content:center;
}

/* PHONE FRAME */
.phone-frame{
      min-width: 60vh;
  height:500px;
  background:white;
  border-radius:40px;
  padding:18px;
  position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
  overflow:hidden;
  border:10px solid #000;
}

/* SCREEN AREA */
.phone-screen{
  width:100%;
  height:100%;
  border-radius:28px;
  overflow:hidden;
  background:#fff;
}

/* CHATBOT IMAGE */
.phone-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:28px;
  animation:glow 2s infinite ease-in-out;
}

/* Glow effect */
@keyframes glow{
  0%{filter:drop-shadow(0 0 6px rgba(0,255,100,0.3));}
  50%{filter:drop-shadow(0 0 16px rgba(0,255,100,0.6));}
  100%{filter:drop-shadow(0 0 6px rgba(0,255,100,0.3));}
}

footer {
    background-color: #47423e;
    padding: 6px 10px;
    text-align: center;
}

footer a, footer a:hover {
    text-decoration: none;
    color: #ffffff;
    margin-bottom: 0px;
    font-size: 20px;
}

/* MOBILE RESPONSIVE FIX */
@media(max-width:768px){
  .phone-frame{
    width:260px;
    height:520px;
  }
  .hero-logo {
    display: none;
}
}