/* ========== HERO SECTION ========== */
   .hero {
       position: relative;
       width: 100%;
       overflow: hidden;
       margin-top: 50px;
       padding: 0 24px;
   }

   .hero__mask {
       position: relative;
       width: 100%;
       aspect-ratio: 1570 / 624;
       overflow: hidden;
       -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1570 624' xmlns='http://www.w3.org/2000/svg'><path d='M0 50C0 22.3858 22.3858 0 50 0H1520C1547.61 0 1570 22.3858 1570 50V534.23C1570 560.136 1550.35 581.722 1524.53 583.858C1395.43 594.539 1020.03 623.691 773 623.276C527.382 622.863 170.691 594.561 45.4868 583.955C19.7182 581.772 0 560.198 0 534.337V50Z' fill='white'/></svg>");
       -webkit-mask-size: 100% 100%;
       -webkit-mask-repeat: no-repeat;
       mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1570 624' xmlns='http://www.w3.org/2000/svg'><path d='M0 50C0 22.3858 22.3858 0 50 0H1520C1547.61 0 1570 22.3858 1570 50V534.23C1570 560.136 1550.35 581.722 1524.53 583.858C1395.43 594.539 1020.03 623.691 773 623.276C527.382 622.863 170.691 594.561 45.4868 583.955C19.7182 581.772 0 560.198 0 534.337V50Z' fill='white'/></svg>");
       mask-size: 100% 100%;
       mask-repeat: no-repeat;
   }

   .hero__bg-wrap {
       position: absolute;
       inset: 0;
       overflow: hidden;
   }

   .hero__bg {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .hero__container {
       position: relative;
       z-index: 2;
       width: 100%;
       height: 100%;
   }

   .hero__content {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 24px !important;
       position: relative;
       z-index: 2;
   }


   .hero__bg {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .hero__overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to left, rgba(237, 50, 55, 0.6), rgba(42, 42, 43, 0.7));
       border-radius: var(--radius-xl);
   }

   .hero__container {
       position: relative;
       max-width: 1570px;
       margin: 0 auto;
       padding: 0 175px;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .hero__content {
       max-width: 750px;
       text-align: center;
   }

   .hero__title {
       font-size: var(--font-size-4xl);
       font-weight: 900;
       color: var(--color-white);
       line-height: 80px;
       text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
       margin-bottom: 8px;
   }

   .hero__subtitle {
       font-size: var(--font-size-3xl);
       font-weight: 800;
       color: var(--color-white);
       line-height: 80px;
       text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
       margin-bottom: 32px;
   }

   .hero__actions {
       display: flex;
       gap: 16px;
       justify-content: center;
       flex-wrap: wrap;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 220px;
       height: 60px;
       padding: 19px 34px;
       font-size: var(--font-size-md);
       font-weight: 600;
       white-space: nowrap;
       cursor: pointer;
       border-radius: 16px 32px 16px 32px;
       opacity: 1;
       transition: all 0.3s ease-in-out;
   }

   .btn:hover {
       opacity: 0.8;
   }

   .btn--outline-white {
       border: 2px solid var(--color-white);
       color: var(--color-white);
       background: transparent;
   }

   .btn--dark {
       background: var(--color-dark-alt);
       color: var(--color-white);
   }

   .btn--primary {
       background: var(--color-primary);
       color: var(--color-white);
   }

   .btn--outline-dark {
       border: 2px solid var(--color-dark);
       color: var(--color-dark);
       background: transparent;
   }