.ax-hero {
  position: relative;
  min-height: 25vh;
  display: flex;
  align-items: flex-end;
  padding: 70px 0 30px;
  overflow: hidden;
}

/* HERO BACKGROUND */
.ax-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* HERO BG IMAGE */
.ax-bg-slide {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  opacity: 0;
  transform: scale(1.08);

  transition:
    opacity 1.6s ease,
    transform 6s ease;
}

/* ACTIVE HERO BG */
.ax-bg-slide.active {
  opacity: 1;
  transform: scale(1.02);
}

/* OVERLAY */
.ax-hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(7, 23, 28, 0.95) 0%,
    rgba(7, 23, 28, 0.85) 35%,
    rgba(7, 23, 28, 0.4) 60%,
    transparent 100%
  );

  z-index: 1;
}

/* CONTAINER */
.ax-hero-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1400px;

  margin: auto;
  padding: 0 4%;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 80px;
}

/* LEFT */
.ax-hero-left {
  max-width: 640px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 620px;
}

/* TITLE */
.ax-hero-title {
  line-height: 1.02;
  margin-bottom: 20px;
}

.ax-line1 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: nowrap;
}

.ax-line2 {
  display: block;
  margin-top: -10px;
}

.ax-gradient-text {
  background: radial-gradient(
    120% 120% at 0% 100%,
    #fff300 100%,
    #fff300 100%,
    #fff300 100%,
    #ffffff 0%,
    #ffffff 0%
  );

  font-size: 50px;
  font-weight: 700;

  line-height: 1.05;

  padding-bottom: 6px;

  display: inline-block;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}

.ax-white-text {
  color: #ffffff;

  font-size: 50px;
  font-weight: 700;

  line-height: 1.02;
}

/* TEXT */
.ax-hero-left p {
  color: #ffffff;

  font-size: 17px;

  opacity: 0.85;

  margin-bottom: 25px;
  max-width: 520px;
}

/* HERO PRIMARY CTA – IMAGE MATCH */
.ax-hero-btn-main{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: fit-content;
  flex: 0 0 auto;

  padding: 16px 32px;
  border-radius: 999px;

  /* ✅ PURE YELLOW BEFORE HOVER */
  background: #fff300;

  color: #062024;

  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  box-shadow: 0 14px 32px #00000038;
  transition: all .3s ease;
}

/* 🔥 HOVER (UNCHANGED EFFECT, just moved gradient here) */
.ax-hero-btn-main:hover{
  background: radial-gradient(
    120% 120% at 0% 100%,
    #fff300 80%,
    #fff300 40%,
    #fff300 20%,
    #ffffff 40%,
    #ffffff 10%
  );
  background-size: 200% 100%;
  background-position: right;

  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

/* arrow */
.ax-hero-btn-main .ax-btn-arrow{
  font-size: 17px;
  transition: transform .2s ease;
}

.ax-hero-btn-main:hover .ax-btn-arrow{
  transform: translateX(6px);
}

/* click */
.ax-hero-btn-main:active{
  transform: translateY(-1px);
}

/* =========================
      RIGHT FLOAT CARD
========================= */

.ax-hero-card {
  width: 330px;
  height: 260px;
  flex-shrink: 0;

  background: rgba(255,255,255,0.10);

  backdrop-filter: blur(18px);

  border-radius: 26px;

  overflow: hidden;

  box-shadow: 0 40px 80px rgba(0,0,0,0.45);

  transition: transform .3s ease;
}

.ax-hero-card:hover {
  transform: translateY(-6px);
}

/* HEADER */
.ax-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px 5px;

  color: #fff;

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

/* ARROW */
/* ARROW */
.ax-card-arrow{

    position:absolute;

    top:14px;
    right:14px;

    width:52px;
    height:52px;

    border-radius:50%;

    background:#ffffff;
    color:#081f25;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    font-weight:600;

    z-index:100;

    transition:.3s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.ax-card-item:hover .ax-card-arrow{

    background:#fff300;

    transform:translateY(-2px);

}


/* CARD SLIDER */
.ax-card-slider {
  position: relative;

  width: 100%;
  height: 210px;

  overflow: hidden;
}

/* CARD ITEM */
.ax-card-item {
  position: absolute;
  inset: 0;

  opacity: 0;

  transform: scale(1.05);

  transition:
    opacity 1s ease,
    transform 4s ease;

  pointer-events: none;
}

/* ACTIVE CARD */
.ax-card-item.active {
  opacity: 1;

  transform: scale(1);

  pointer-events: auto;
}

/* CARD IMAGE */
.ax-card-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: 24px;
}

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

/* ==========================
   TABLET
========================== */
@media (max-width:992px){

  .ax-hero{
    min-height:65vh;
    padding:80px 0 45px;
    align-items:center;
  }

  .ax-hero-container{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:35px;
    padding:0 30px;
    text-align:center;
  }

  .ax-hero-left{
    min-height:auto;
    max-width:650px;
    align-items:center;
  }

  .ax-hero-title{
    margin-bottom:18px;
  }

  .ax-line1{
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
  }

  .ax-line2{
    margin-top:2px;
    text-align:center;
  }

  .ax-gradient-text,
  .ax-white-text{
    font-size:38px;
    line-height:1.18;
  }

  .ax-hero-left p{
    font-size:16px;
    line-height:1.8;
    max-width:520px;
    margin:0 auto 24px;
  }

  .ax-hero-btn-main{
    margin:0 auto;
  }

  .ax-hero-card{
    width:340px;
    height:255px;
  }

  .ax-card-slider{
    height:205px;
  }

}


/* ==========================
   MOBILE
========================== */
@media (max-width:768px){

  .ax-hero{

    min-height:75vh;
    padding:90px 0 35px;

    align-items:center;
  }

  .ax-hero::before{

    background:linear-gradient(
      180deg,
      rgba(7,23,28,.90) 0%,
      rgba(7,23,28,.72) 45%,
      rgba(7,23,28,.42) 100%
    );

  }

  .ax-hero-container{

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:28px;

    padding:0 20px;

    text-align:center;
  }

  .ax-hero-left{

    max-width:100%;
    min-height:auto;

    align-items:center;
  }

  .ax-hero-title{
    margin-bottom:16px;
  }

  .ax-line1{
    display:block;
  }

  .ax-line2{
    display:block;
    margin-top:5px;
  }

  .ax-gradient-text,
  .ax-white-text{

    font-size:30px;
    line-height:1.25;
  }

  .ax-hero-left p{

    font-size:15px;

    line-height:1.7;

    max-width:100%;

    margin:0 auto 22px;
  }

  .ax-hero-btn-main{

    width:210px;

    justify-content:center;

    margin:0 auto;
  }

  .ax-hero-card{

    width:100%;
    max-width:320px;

    height:235px;
  }

  .ax-card-header{

    font-size:15px;

    padding:12px;
  }

 .ax-card-arrow{

    width:44px;
    height:44px;

    top:12px;
    right:12px;

    font-size:17px;
}

  .ax-card-slider{
    height:180px;
  }

}


/* ==========================
   SMALL MOBILE
========================== */
@media (max-width:480px){

  .ax-hero{

    min-height:68vh;

    padding:80px 0 30px;
  }

  .ax-hero-container{
    padding:0 16px;
  }

  .ax-gradient-text,
  .ax-white-text{

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

  .ax-hero-left p{

    font-size:14px;

    line-height:1.7;
  }

  .ax-hero-btn-main{

    width:100%;
    max-width:220px;

    padding:14px 18px;

    font-size:15px;
  }

  .ax-hero-card{

    width:100%;
    max-width:280px;

    height:205px;
  }

  .ax-card-slider{
    height:155px;
  }

  .ax-card-header{

    font-size:13px;
  }
.ax-card-arrow{

    width:40px;
    height:40px;

    top:-50px;
    right:10px;

    font-size:15px;
}
}