:root{
  --hbj-navy:#071A33;
  --hbj-green:#0B5E4F;
  --hbj-gold:#FDB913;
  --hbj-text:#1F2937;
  --hbj-muted:#5B6472;
  --hbj-light:#F8F6F2;
  --hbj-white:#FFFFFF;
}

/* =========================
   ABOUT SECTION
========================= */

.hbj-about-section,
.hbj-about-section *{
  box-sizing:border-box;
}

.hbj-about-section{
  width:100%;
  padding:100px 0 120px;
  background:var(--hbj-light);
  font-family:Arial,Helvetica,sans-serif;
}

.hbj-container{
  width:min(1200px,calc(100% - 40px));
  margin:0 auto;

  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:70px;

  /* Align both columns from the top */
  align-items:start;
}

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

.hbj-subtitle{
  display:inline-flex;
  align-items:center;
  gap:10px;

  color:var(--hbj-green);

  font-size:13px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.hbj-subtitle::before{
  content:"";
  width:34px;
  height:3px;
  background:var(--hbj-gold);
}

.hbj-about-left h2{
  margin:18px 0 25px;

  color:var(--hbj-navy);

  font-size:48px;
  line-height:1.17;
  letter-spacing:-1px;
}

.hbj-about-left p{
  margin:0 0 22px;

  color:var(--hbj-muted);

  font-size:16px;
  line-height:1.85;
}

.hbj-about-left .hbj-intro{
  color:var(--hbj-text);
  font-size:17px;
  font-weight:500;
}

/* =========================
   FEATURES
========================= */

.hbj-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;

  margin:38px 0;
}

.hbj-feature{
  display:flex;
  align-items:flex-start;
  gap:15px;

  padding:20px;

  background:var(--hbj-white);

  border:1px solid #E7E3DB;
  border-radius:7px;

  box-shadow:0 8px 25px rgba(7,26,51,.05);

  opacity:1;
  transform:none;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.hbj-feature:hover{
  transform:translateY(-4px);
  border-color:rgba(253,185,19,.7);
  box-shadow:0 14px 32px rgba(7,26,51,.09);
}

.hbj-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;
  flex:0 0 42px;

  border-radius:50%;

  background:var(--hbj-gold);
  color:var(--hbj-navy);

  font-size:17px;
  font-weight:800;
}

.hbj-feature h3{
  margin:1px 0 7px;

  color:var(--hbj-navy);

  font-size:17px;
  line-height:1.35;
}

.hbj-feature p{
  margin:0;

  color:var(--hbj-muted);

  font-size:13px;
  line-height:1.65;
}

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

.hbj-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;

  margin-top:28px;
}

.hbj-btn-primary,
.hbj-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;

  padding:0 26px;

  border-radius:4px;

  text-decoration:none;

  font-size:13px;
  font-weight:800;

  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.hbj-btn-primary{
  background:var(--hbj-gold);
  color:var(--hbj-navy);
}

.hbj-btn-primary:hover{
  background:#EAAA00;
  color:var(--hbj-navy);
  transform:translateY(-2px);
}

.hbj-btn-secondary{
  border:2px solid var(--hbj-navy);
  background:transparent;
  color:var(--hbj-navy);
}

.hbj-btn-secondary:hover{
  background:var(--hbj-navy);
  color:#fff;
  transform:translateY(-2px);
}

/* =========================
   RIGHT IMAGE
========================= */

.hbj-about-right{
  position:relative;
  margin-top:0;
  align-self:start;
}

.hbj-about-right img{
  display:block;

  width:100%;
  height:600px;

  object-fit:cover;
  object-position:center;

  border-radius:8px;

  box-shadow:0 18px 45px rgba(7,26,51,.12);
}

/* =========================
   WHY CHOOSE US CARD
========================= */

.hbj-card{
  position:absolute;

  left:-40px;
  bottom:-45px;

  width:330px;

  padding:28px;

  border-left:4px solid var(--hbj-gold);
  border-radius:6px;

  background:var(--hbj-navy);
  color:#fff;

  box-shadow:0 20px 45px rgba(7,26,51,.22);
}

.hbj-card h3{
  margin:0 0 15px;

  color:var(--hbj-gold);

  font-size:20px;
  line-height:1.3;
}

.hbj-card ul{
  margin:0;
  padding:0;

  list-style:none;
}

.hbj-card li{
  margin:0;
  padding:7px 0;

  color:#E4EBF3;

  font-size:14px;
  line-height:1.5;
}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

  .hbj-about-section{
    padding:80px 0;
  }

  .hbj-container{
    grid-template-columns:1fr;
    gap:55px;
  }

  .hbj-about-left h2{
    font-size:40px;
  }

  .hbj-about-right{
    max-width:720px;
    margin-top:0;
  }

  .hbj-about-right img{
    height:500px;
  }

  .hbj-card{
    position:relative;

    left:auto;
    bottom:auto;

    width:100%;

    margin-top:20px;
  }

}

/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .hbj-about-section{
    padding:60px 0;
  }

  .hbj-container{
    width:min(100% - 28px,1200px);
    gap:42px;
  }

  .hbj-about-left h2{
    font-size:34px;
    letter-spacing:-.5px;
  }

  .hbj-about-left .hbj-intro{
    font-size:16px;
  }

  .hbj-features{
    grid-template-columns:1fr;
    gap:14px;
    margin:30px 0;
  }

  .hbj-buttons{
    flex-direction:column;
  }

  .hbj-btn-primary,
  .hbj-btn-secondary{
    width:100%;
  }

  .hbj-about-right img{
    height:380px;
  }

  .hbj-card{
    padding:24px 20px;
  }

}