.sec-hero-v1::before,
.sec-hero-v1::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.sec-hero-v1::before {
  background-image: var(--hero-v1-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}
.sec-hero-v1.green::after {
  background: linear-gradient(180deg, rgba(38, 204, 122, 0) 0%, rgba(38, 204, 122, 0.2) 100%);
}
.sec-hero-v1.pink::after {
  background: linear-gradient(180deg, rgba(238, 43, 122, 0) 0%, rgba(238, 43, 122, 0.2) 100%);
}
.sec-hero-v1.blue::after {
  background: linear-gradient(180deg, rgba(12, 140, 233, 0) 0%, rgba(12, 140, 233, 0.2) 100%);
}
.hero-v1-item {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 19.2rem 0 10.4rem;
}
.hero-v1-item .container-xl {
  margin-bottom: 0;
}
.hero-v1-item::after,
.hero-v1-item::before {
  position: absolute;
  content: "";
  right: 0;
}
.hero-v1-item::before {
  top: 24rem;
  width: 41.4rem;
  height: 14.4rem;
  background-image: url(../images/shape-right-white-01.png);
  background-size: cover;
  background-position: center;
}
.hero-v1-item::after {
  width: 90rem;
  height: 90rem;
  bottom: 0;
  background-size: cover;
  background-position: center;
}
.green .hero-v1-item::after {
  background-image: url(../images/round-shape-green.png);
}
.pink .hero-v1-item::after {
  background-image: url(../images/round-shape-pink.png);
}
.blue .hero-v1-item::after {
  background-image: url(../images/round-shape-blue.png);
}
.hero-v1-text {
  position: relative;
  z-index: 2;
}
.hero-v1-text .fw-72 {
  margin-bottom: 0.8rem;
}
.green .hero-v1-text .fw-72 {
  text-shadow: 0px 0px 48px var(--green-60);
}
.pink .hero-v1-text .fw-72 {
  text-shadow: 0px 0px 48px var(--pink-60);
}
.blue .hero-v1-text .fw-72 {
  text-shadow: 0px 0px 48px var(--blue-60);
}
.hero-v1-text .h2,
.hero-v1-text .h1 {
  margin-bottom: 6.4rem;
}
.hero-v1-text .fw-72:last-child,
.hero-v1-text .h2:last-child,
.hero-v1-text .h1:last-child {
  margin-bottom: 0;
}
.hero-v1-text p {
  max-width: 84rem;
  font-size: 2rem;
  line-height: 3.2rem;
  margin-bottom: 3.2rem;
}
.hero-tab ul {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 2rem;
  gap: 3.2rem;
}
.hero-tab-item {
  position: relative;
  color: var(--white);
  display: block;
  font-size: 3rem;
  line-height: 4rem;
}
li.active .hero-tab-item {
  font-weight: bold;
}
li.active .hero-tab-item::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -2.1rem;
  height: 0.5rem;
  width: 100%;
}
.green li.active .hero-tab-item::after {
  background: var(--green-60);
}
.pink li.active .hero-tab-item::after {
  background: var(--pink-60);
}
.blue li.active .hero-tab-item::after {
  background: var(--blue-60);
}
.hero-tab-info {
  display: none;
}
.hero-tab-info.active {
  display: block;
}
@media(min-width:1500px) and (max-width:1559.98px) {
  .hero-v1-item {
    padding: 17rem 0 8rem;
  }
}
@media(min-width:1460px) and (max-width:1499.98px) {
  .hero-v1-item {
    padding: 17rem 0 8rem;
  }
  .hero-v1-item::before {
    width: 34.5rem;
    height: 12rem;
  }
  .sec-hero-v1:has(.h1) .hero-v1-item::before {
    top: 22rem;
  }
  .hero-v1-item::after {
    width: 60rem;
    height: 60rem;
  }
  .hero-v1-text .h2,
  .hero-v1-text .h1 {
    margin-bottom: 5.6rem;
  }
  .hero-v1-text p {
    max-width: 81rem;
    font-size: 1.9rem;
    line-height: 3.1rem;
    margin-bottom: 2.8rem;
  }
  .hero-tab-item {
    font-size: 2.7rem;
    line-height: 3.7rem;
  }
}
@media(min-width:1360px) and (max-width:1459.98px) {
  .hero-v1-item {
    padding: 18rem 0 8rem;
  }
  .hero-v1-item::before {
    width: 34.5rem;
    height: 12rem;
  }
  .sec-hero-v1:has(.h1) .hero-v1-item::before {
    top: 22rem;
  }
  .hero-v1-item::after {
    width: 60rem;
    height: 60rem;
  }
  .hero-v1-text .h2,
  .hero-v1-text .h1 {
    margin-bottom: 4.8rem;
  }
  .hero-v1-text p {
    max-width: 74rem;
    font-size: 1.7rem;
    line-height: 2.8rem;
    margin-bottom: 2.4rem;
  }
  .hero-tab-item {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
@media(min-width:1200px) and (max-width:1359.98px) {
  .hero-v1-item {
    padding: 17.6rem 0 8rem;
  }
  .hero-v1-item::before {
    width: 31.5rem;
    height: 10.9rem;
    top: 16rem;
  }
  .sec-hero-v1:has(.h1) .hero-v1-item::before {
    top: 20rem;
  }
  .hero-v1-item::after {
    width: 60rem;
    height: 60rem;
  }
  .hero-v1-text .h2,
  .hero-v1-text .h1 {
    margin-bottom: 4.8rem;
  }
  .hero-v1-text p {
    max-width: 69rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin-bottom: 2.4rem;
  }
  .hero-v1-text p br {
    display: none;
  }
  .hero-tab-item {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }
}
@media(min-width:992px) and (max-width:1199.98px) {
  .hero-v1-item {
    padding: 14rem 0 8rem;
  }
  .hero-v1-item::before {
    width: 26.5rem;
    height: 9.2rem;
    top: 16rem;
  }
  .sec-hero-v1:has(.h1) .hero-v1-item::before {
    top: 18rem;
  }
  .hero-v1-item::after {
    width: 50rem;
    height: 50rem;
  }
  .hero-v1-text .h2,
  .hero-v1-text .h1 {
    margin-bottom: 4rem;
  }
  .hero-v1-text p {
    max-width: 69rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
    margin-bottom: 2.4rem;
  }
  .hero-v1-text p br {
    display: none;
  }
  .hero-tab ul {
    gap: 2.4rem;
  }
  .hero-tab-item {
    font-size: 2rem;
    line-height: 3rem;
  }
}
@media(min-width:768px) and (max-width:991.98px) {
  .hero-v1-item {
    min-height: 60rem;
    padding: 14rem 0 8rem;
  }
  .hero-v1-item::before {
    width: 22.5rem;
    height: 7.8rem;
    top: 12rem;
  }
  .sec-hero-v1:has(.h1) .hero-v1-item::before {
    top: 14rem;
  }
  .hero-v1-item::after {
    width: 30rem;
    height: 30rem;
  }
  .hero-v1-text .h2,
  .hero-v1-text .h1 {
    margin-bottom: 4rem;
  }
  .hero-v1-text p {
    max-width: 54rem;
    font-size: 1.5rem;
    line-height: 2.6rem;
    margin-bottom: 2rem;
  }
  .hero-v1-text p br {
    display: none;
  }
  .hero-tab ul {
    gap: 2.4rem;
  }
  .hero-tab-item {
    font-size: 2rem;
    line-height: 3rem;
  }
}
@media(max-width:767.98px) {
  .hero-v1-item {
    min-height: 56rem;
    padding: 12rem 0 5.6rem;
  }
  .hero-v1-item::before {
    width: 22.5rem;
    height: 7.8rem;
    top: 10rem;
  }
  .sec-hero-v1:has(.h1) .hero-v1-item::before {
    top: 10rem;
  }
  .hero-v1-item::after {
    width: 30rem;
    height: 30rem;
  }
  .hero-v1-text .h2,
  .hero-v1-text .h1 {
    margin-bottom: 3.2rem;
  }
  .hero-v1-text p {
    font-size: 1.5rem;
    line-height: 2.4rem;
    margin-bottom: 1.6rem;
    max-width: 100%;
  }
  .hero-v1-text br {
    display: none;
  }
  .hero-tab ul {
    padding-bottom: 1.6rem;
    gap: 2rem;
  }
  .hero-tab-item {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
  li.active .hero-tab-item::after {
    bottom: -1.7rem;
    height: 0.3rem;
  }
}