/* =========================================
   SAM HOME HERO
========================================= */

.sam-home-hero{
  background: #FFFFFF;
  border-radius: 24px;
  padding: 0 16px;
  overflow: hidden;
}

.sam-home-hero *{
  box-sizing: border-box;
}

.sam-home-hero__container{
  width: 100%;
}

.sam-home-hero__inner{
  max-width: 1440px;
  margin: 0 auto; /* center */
  display: flex;
  flex-wrap: wrap;
  padding: 0 40px;
}

.sam-home-hero__left{
  width: 100%;
  padding: 96px 0 0;
}

.sam-home-hero__right{
  width: 100%;
  position: relative;
}

/* =========================================
   LEFT SIDE
========================================= */

.sam-home-hero__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E9EAEB;
  border-radius: 50px;
  padding: 11px 16px;
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-size: 16.302px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.32px;
  margin-bottom: 28px;
}

.sam-home-hero__title{
  margin: 0;
  color: #132436;
  font-family: "Inter", sans-serif;
  font-size: 64px;
  line-height: 1.1em;
  letter-spacing: -3.2px;
  font-weight: 500;
}

.sam-home-hero__title-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.sam-home-hero__title-row + .sam-home-hero__title-row{
  margin-top: 6px;
}

.sam-home-hero__highlight{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FB6514;
  color: #FFFFFF;
  border-radius: 12px;
  margin: 0 12px 0 0;
  padding: 0 12px 7px 12px;
  font-size: 64px;
  line-height: 74px;
  letter-spacing: -3.2px;
}

.sam-home-hero__desc{
  margin-top: 32px;
}

.sam-home-hero__desc p{
  margin: 0 0 48px;
  color: #6B7280;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em;
}

.sam-home-hero__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 48px;
}

.sam-home-hero__btn{
  text-decoration: none;
  transition: all 0.3s ease;
}

.sam-home-hero__btn--primary{
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  background: #132436;
  border-radius: 50px;
  padding: 4px 4px 4px 20px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}

.sam-home-hero__btn--primary .sam-home-hero__btn-text{
  display: inline-flex;
  align-items: center;
}

.sam-home-hero__btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 50px;
  padding: 12px 24px;
  margin: 0 0 0 8px;
  line-height: 0;
}

.sam-home-hero__btn-icon img{
  display: block;
  width: 20px;
  height: auto;
}

.sam-home-hero__btn--secondary{
  display: inline-flex;
  align-items: center;
  color: #132436;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
}

.sam-home-hero__note{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #E9EAEB;
  border-radius: 50px;
  color: #132436;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 4px 4px 16px;
}

.sam-home-hero__note-text{
  display: inline-flex;
  align-items: center;
}

.sam-home-hero__note::after{
  content: "";
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #FFFFFF url("/assets/images/hero_icon_clock.svg") no-repeat center;
  background-size: 16px auto;
}

/* =========================================
   RIGHT SIDE
========================================= */

.sam-home-hero__media{
  position: relative;
  width: 90%;
	margin-top:-60px;
}

.sam-home-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* =========================================
   ENTRANCE ANIMATION
========================================= */

.sam-hero-animate{
  opacity: 0;
  will-change: transform, opacity;
}

.sam-hero-animate.is-inview{
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  transition-delay: var(--hero-delay, 0ms);
}

[data-hero-animate="fade-up"]{
  transform: translateY(38px);
}

[data-hero-animate="fade-left"]{
  transform: translateX(42px);
}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 576px){
  .sam-home-hero__left,
  .sam-home-hero__right{
    width: 50%;
  }
}

/* =========================================
   LAPTOP (1024px – 1399px)
========================================= */

@media (min-width: 1024px) and (max-width: 1399px){

  .sam-home-hero__inner{
    padding-left: 24px;
    padding-right: 24px;
  }

  .sam-home-hero__left{
    padding-top: 72px; /* reduce vertical space */
  }

  .sam-home-hero__title{
    font-size: 52px;
    line-height: 1.1em;
    letter-spacing: -2.4px;
  }

  .sam-home-hero__highlight{
    font-size: 52px;
    line-height: 1.1em;
    letter-spacing: -2.4px;
    padding: 0 10px 6px 10px;
  }

  .sam-home-hero__desc p{
    font-size: 17px;
    margin-bottom: 40px;
  }

  .sam-home-hero__actions{
    gap: 20px;
    margin-bottom: 40px;
  }

  .sam-home-hero__btn--primary{
    font-size: 17px;
    padding: 4px 4px 4px 18px;
  }

  .sam-home-hero__btn-icon{
    padding: 10px 20px;
  }

  .sam-home-hero__note{
    font-size: 17px;
    padding: 4px 4px 4px 14px;
  }

  .sam-home-hero__media{
    width: 95%;
    margin-top: -40px; /* reduce overlap */
  }

}

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

@media (min-width: 768px) and (max-width: 1199px){
  .sam-home-hero__inner{
    padding-left: 24px;
    padding-right: 24px;
  }

  .sam-home-hero__title,
  .sam-home-hero__highlight{
    font-size: 54px;
    letter-spacing: -2.4px;
  }

  .sam-home-hero__highlight{
    line-height: 1.1em;
  }
}

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

@media (max-width: 767px){
  .sam-home-hero{
    padding-left: 16px;
    padding-right: 16px;
  }

  .sam-home-hero__inner{
    padding-left: 0;
    padding-right: 0;
  }

  .sam-home-hero__left{
    padding-top: 54px;
  }

  .sam-home-hero__badge{
    font-size: 14px;
    line-height: 16px;
    padding: 10px 14px;
    margin-bottom: 22px;
  }

  .sam-home-hero__title{
    font-size: 36px;
    line-height: 1.12em;
    letter-spacing: -1.8px;
  }

  .sam-home-hero__highlight{
    font-size: 36px;
    line-height: 1.12em;
    letter-spacing: -1.8px;
    padding: 6px 10px 6px 10px;
    margin-right: 8px;
    border-radius: 10px;
  }

  .sam-home-hero__title-row{
    gap: 8px;
  }

  .sam-home-hero__desc{
    margin-top: 24px;
  }

  .sam-home-hero__desc p{
    font-size: 16px;
    margin-bottom: 34px;
  }

  .sam-home-hero__actions{
    gap: 18px;
    margin-bottom: 38px;
  }

  .sam-home-hero__btn--primary{
    font-size: 16px;
    padding: 4px 4px 4px 16px;
  }

  .sam-home-hero__btn-icon{
    padding: 10px 18px;
    margin-left: 8px;
  }

  .sam-home-hero__btn-icon img{
    width: 18px;
  }

  .sam-home-hero__btn--secondary{
    font-size: 16px;
  }

  .sam-home-hero__note{
    font-size: 16px;
    padding: 8px 10px 8px 14px;
    gap: 12px;
  }

  .sam-home-hero__note::after{
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    background-size: 14px auto;
  }

  .sam-home-hero__right{
    margin-top: 42px;
  }
}