#common-home .koder-home-hero {
            display: flex !important;
            flex-wrap: nowrap;
            align-items: flex-start;
            gap: clamp(14px, 1.35vw, 22px);
            margin: 8px 0 22px;
            width: 100%;
          }

          #common-home .koder-home-hero-banner {
            flex: 0 0 clamp(320px, 32%, 460px);
            max-width: 460px;
            min-width: 280px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: clamp(18px, 1.6vw, 26px);
            height: var(--koder-home-hero-row-height, clamp(270px, 18.5vw, 320px));
            min-height: 0;
            padding: clamp(22px, 2vw, 34px);
            border: 1px solid #dee2e6;
            border-top: 4px solid #6fbf45;
            border-radius: 8px;
            background-color: #050807;
            background-image:
              linear-gradient(90deg, rgba(3, 7, 6, 0.98) 0%, rgba(6, 13, 10, 0.91) 52%, rgba(21, 58, 30, 0.62) 100%),
              url('extension/oc_theme_koder/catalog/view/image/main-banner-bg.png?v=1.3.9.78');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
            overflow: hidden;
          }

          #common-home .koder-home-hero-slider {
            flex: 1 1 auto;
            min-width: 0;
            width: 100%;
            height: var(--koder-home-hero-row-height, clamp(270px, 18.5vw, 320px));
          }

          #common-home .koder-home-hero-slider > * {
            max-width: 100%;
          }

          #common-home .koder-home-hero-slider .carousel,
          #common-home .koder-home-hero-slider [id^="carousel-banner-"],
          #common-home .koder-home-hero-slider [id^="slideshow"] {
            height: var(--koder-home-hero-row-height, clamp(270px, 18.5vw, 320px));
            overflow: hidden;
          }

          #common-home .koder-home-hero-slider .carousel-inner,
          #common-home .koder-home-hero-slider .carousel-item {
            height: 100%;
          }

          #common-home .koder-home-hero-slider img {
            width: 100%;
            max-width: none;
            height: 100%;
            object-fit: cover;
            object-position: center center;
          }

          #common-home .koder-home-hero-full .koder-home-hero-banner {
            flex: 1 1 100%;
            max-width: none;
            min-height: 172px;
          }

          #common-home .koder-home-hero-text > :first-child {
            margin-top: 0;
          }

          #common-home .koder-home-hero-text > :last-child {
            margin-bottom: 0;
          }

          #common-home .koder-home-hero-text h1,
          #common-home .koder-home-hero-text h2,
          #common-home .koder-home-hero-text h3 {
            color: #ffffff;
            font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
            font-weight: 800;
            line-height: 1.12;
            margin-bottom: clamp(12px, 1.2vw, 18px);
            text-transform: uppercase;
            letter-spacing: 0;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
          }

          #common-home .koder-home-hero-text h1,
          #common-home .koder-home-hero-text h2 {
            color: #ffffff;
            font-size: clamp(28px, 2.25vw, 40px);
          }

          #common-home .koder-home-hero-compact .koder-home-hero-text h1,
          #common-home .koder-home-hero-compact .koder-home-hero-text h2 {
            font-size: clamp(25px, 1.85vw, 32px);
          }

          #common-home .koder-home-hero-tight .koder-home-hero-text h1,
          #common-home .koder-home-hero-tight .koder-home-hero-text h2 {
            font-size: clamp(23px, 1.65vw, 28px);
            line-height: 1.08;
          }

          #common-home .koder-home-hero-text h2 strong,
          #common-home .koder-home-hero-text h1 strong,
          #common-home .koder-home-hero-text em {
            color: #7cc948;
            font-style: normal;
          }

          #common-home .koder-home-hero-text p,
          #common-home .koder-home-hero-text li {
            color: rgba(255, 255, 255, 0.82);
            font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
            font-size: clamp(15px, 1.06vw, 18px);
            line-height: 1.52;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
          }

          #common-home .koder-home-hero-compact .koder-home-hero-text p,
          #common-home .koder-home-hero-compact .koder-home-hero-text li {
            font-size: clamp(14px, 0.9vw, 16px);
            line-height: 1.42;
          }

          #common-home .koder-home-hero-tight .koder-home-hero-text p,
          #common-home .koder-home-hero-tight .koder-home-hero-text li {
            font-size: 14px;
            line-height: 1.36;
          }

          #common-home .koder-home-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(12px, 1vw, 16px);
            align-items: center;
          }

          #common-home .koder-home-hero-actions .btn {
            min-width: min(100%, 136px);
            min-height: clamp(48px, 3.1vw, 54px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 clamp(20px, 1.6vw, 28px);
            font-size: clamp(15.5px, 0.98vw, 17px);
            font-weight: 700;
            line-height: 1.25;
            white-space: normal;
            border-radius: 6px;
          }

          #common-home .koder-home-hero-compact .koder-home-hero-banner {
            gap: 16px;
            padding: 22px;
          }

          #common-home .koder-home-hero-tight .koder-home-hero-banner {
            gap: 14px;
            padding: 20px;
          }

          #common-home .koder-home-hero-compact .koder-home-hero-actions,
          #common-home .koder-home-hero-tight .koder-home-hero-actions {
            flex-wrap: nowrap;
            gap: 12px;
          }

          #common-home .koder-home-hero-compact .koder-home-hero-actions .btn,
          #common-home .koder-home-hero-tight .koder-home-hero-actions .btn {
            flex: 1 1 0;
            min-width: 0;
            padding-left: 12px;
            padding-right: 12px;
          }

          #common-home .koder-home-hero-tight .koder-home-hero-actions .btn {
            min-height: 46px;
          }

          @media (min-width: 992px) {
            #common-home .koder-home-hero-full .koder-home-hero-banner {
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
            }

            #common-home .koder-home-hero-full .koder-home-hero-text {
              max-width: 760px;
            }
          }

          @media (min-width: 992px) and (max-width: 1399.98px) {
            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-banner {
              gap: 14px;
              padding: 20px;
            }

            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-text h1,
            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-text h2 {
              font-size: clamp(23px, 1.9vw, 30px);
              line-height: 1.08;
            }

            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-text p,
            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-text li {
              font-size: clamp(14px, 1vw, 16px);
              line-height: 1.38;
            }

            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-actions {
              flex-wrap: nowrap;
              gap: 12px;
            }

            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-actions .btn {
              flex: 1 1 0;
              min-width: 0;
              min-height: 46px;
              padding-left: 12px;
              padding-right: 12px;
            }
          }

          @media (max-width: 991.98px) {
            #common-home .koder-home-hero {
              flex-direction: column;
              gap: 14px;
              margin-top: 6px;
              margin-bottom: 22px;
            }

            #common-home .koder-home-hero:not(.koder-home-hero-full) {
              gap: 0;
            }

            #common-home .koder-home-hero:not(.koder-home-hero-full) .koder-home-hero-banner {
              display: none;
            }

            #common-home .koder-home-hero-banner {
              flex: 1 1 auto;
              max-width: none;
              min-width: 0;
              height: auto;
              min-height: 0;
              padding: 24px;
            }

            #common-home .koder-home-hero-slider {
              height: auto;
            }

            #common-home .koder-home-hero-slider .carousel,
            #common-home .koder-home-hero-slider [id^="carousel-banner-"],
            #common-home .koder-home-hero-slider [id^="slideshow"] {
              height: auto;
              overflow: visible;
            }

            #common-home .koder-home-hero-slider .carousel-inner,
            #common-home .koder-home-hero-slider .carousel-item {
              height: auto;
            }

            #common-home .koder-home-hero-slider img {
              height: auto;
              object-fit: contain;
            }

            #common-home .koder-home-hero-text h1,
            #common-home .koder-home-hero-text h2 {
              font-size: clamp(26px, 4vw, 34px);
            }
          }

          @media (max-width: 575.98px) {
            #common-home .koder-home-hero-banner {
              padding: 20px;
              gap: 18px;
            }

            #common-home .koder-home-hero-text h1,
            #common-home .koder-home-hero-text h2 {
              font-size: clamp(23px, 6vw, 30px);
            }

            #common-home .koder-home-hero-actions {
              align-items: stretch;
            }

            #common-home .koder-home-hero-actions .btn {
              width: 100%;
            }
          }