make the design of this html :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hashcat Command Generator</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet">
    <style>
        /* Styling inspired by NetworkChuck Academy */

        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            background-color: #1a1a1a;
            color: #f0f0f0;
        }

        .navbar {
            background-color: #111;
            padding: 15px;
            text-align: center;
        }

        .navbar h1 {
            margin: 0;
            font-weight: 300;
        }

        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
            background-color: #222;
            border-radius: 8px;
        }

        .field {
            margin-bottom: 20px;
            max-width: 600px;
        }

        label {
            display: block;
            font-weight: 400;
            margin-bottom: 10px;
            color: #ffcc00;
        }

        input[type="text"], textarea, select {
            width: 100%;
            padding: 12px;
            box-sizing: border-box;
            border: none;
            border-radius: 4px;
            background-color: #333;
            color: #fff;
        }

        textarea {
            resize: vertical;
        }

        button {
            padding: 15px 30px;
            font-size: 16px;
            background-color: #ffcc00;
            color: #1a1a1a;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #e6b800;
        }

        #command {
            background-color: #333;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
            word-break: break-all;
            position: relative;
        }

        #command code {
            display: block;
            overflow-x: auto;
        }

        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #ffcc00;
            color: #1a1a1a;
            border: none;
            padding: 8px;
            cursor: pointer;
            border-radius: 4px;
        }

        .copy-btn:hover {
            background-color: #e6b800;
        }

        @media (max-width: 600px) {
            .container {
                margin: 20px;
            }
        }
    </style>
    <script>
        function generateCommand() {
            const data = {
                hash_input: document.getElementById('hash_input').value,
                hash_mode: document.getElementById('hash_mode').value,
                wordlist_path: document.getElementById('wordlist_path').value,
                attack_mode: document.getElementById('attack_mode').value,
                rule_file: document.getElementById('rule_file').value,
                workload_profile: document.getElementById('workload_profile').value,
                output_format: document.getElementById('output_format').value,
                device: document.getElementById('device').value,
            };

            fetch('/generate_command', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                document.getElementById('command_text').innerText = result.command;
                document.getElementById('command_block').style.display = 'block';
            });
        }

        function copyCommand() {
            const commandText = document.getElementById('command_text').innerText;
            navigator.clipboard.writeText(commandText).then(function() {
                alert('Command copied to clipboard!');
            }, function(err) {
                alert('Failed to copy command: ', err);
            });
        }
    </script>
</head>
<body>
    <div class="navbar">
        <h1>Hashcat Command Generator</h1>
    </div>
    <div class="container">
        <div class="field">
            <label for="hash_input">Hash Input:</label>
            <textarea id="hash_input" rows="4" placeholder="Enter your hash(es) here..."></textarea>
        </div>
        <div class="field">
            <label for="hash_mode">Hash Type:</label>
            <select id="hash_mode">
                {% for mode in hash_modes %}
                <option value="{{ mode.value }}">{{ mode.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <label for="wordlist_path">Wordlist File Path:</label>
            <input type="text" id="wordlist_path" placeholder="/path/to/wordlist.txt">
        </div>
        <div class="field">
            <label for="attack_mode">Attack Mode:</label>
            <select id="attack_mode">
                {% for mode in attack_modes %}
                <option value="{{ mode.value }}">{{ mode.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <label for="rule_file">Rule File Path (optional):</label>
            <input type="text" id="rule_file" placeholder="/path/to/rules.rule">
        </div>
        <div class="field">
            <label for="workload_profile">Workload Profile:</label>
            <select id="workload_profile">
                {% for profile in workload_profiles %}
                <option value="{{ profile.value }}">{{ profile.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <label for="output_format">Output Format:</label>
            <select id="output_format">
                {% for fmt in output_formats %}
                <option value="{{ fmt.value }}">{{ fmt.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <label for="device">Device Selection:</label>
            <select id="device">
                {% for dev in devices %}
                <option value="{{ dev.value }}">{{ dev.name }}</option>
                {% endfor %}
            </select>
        </div>
        <button onclick="generateCommand()">Generate Command</button>

        <div id="command_block" style="display: none;">
            <h2>Generated Command:</h2>
            <div id="command">
                <code id="command_text"></code>
                <button class="copy-btn" onclick="copyCommand()">Copy</button>
            </div>
        </div>
    </div>
</body>
</html>
 
look like design :
<!doctype html>
<html lang="en">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-TTDXZLG');</script>
<!-- End Google Tag Manager -->
<head>
    
              <meta name="csrf-param" content="authenticity_token">
              <meta name="csrf-token" content="Ua/KwPysP9cLJhtdMH80BmEzDCyBC6JPBD++585/MBWjFm+C2CQ62UQUkhxdi9EJYm5CMhXrnbCJQXo+KQn79Q==">
            
    <title>
        
            The NetworkChuck Academy
        
    </title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <meta property="og:type" content="website">
<meta property="og:url" content="https://academy.networkchuck.com">
<meta name="twitter:card" content="summary_large_image">

    <meta property="og:title" content="The NetworkChuck Academy">
    <meta name="twitter:title" content="The NetworkChuck Academy">



    
        <link href="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/sites/2147658501/images/3f37db4-d3ff-223e-58b5-307a6d4fc66_favicon-32x32.png?v=2" rel="shortcut icon" />
    
    <link rel="canonical" href="https://academy.networkchuck.com" />

    <!-- Google Fonts ====================================================== -->
    
        <link href="//fonts.googleapis.com/css?family=Muli:400,700,400italic,700italic|Oswald:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    

    <!-- Kajabi CSS ======================================================== -->
    <link rel="stylesheet" media="screen" href="https://kajabi-app-assets.kajabi-cdn.com/assets/core-4d08d258547af8a29fc4738e545ca8e26d95e11b829a9db5a0b36d047fb91843.css" />

    

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" crossorigin="anonymous">

    <link rel="stylesheet" media="screen" href="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2155008837/assets/styles.css?1724715549857182" />

    <!-- Customer CSS ====================================================== -->
    <link rel="stylesheet" media="screen" href="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2155008837/assets/overrides.css?1724715549857182" />
    <style>
    /* Custom CSS Added Via Theme Settings */
    /* This removes the shadow from the form button and creates a bit more spacing inside the button */

.btn {
padding: 12px 40px;
-webkit-box-shadow: 0 0px 0px #f9f9f9;
box-shadow: 0px 0px 0px #f9f9f9;
}


/* This increases the font size of the medium sized button */

.btn--medium {
font-size: 24px;
}


/* This increases the font size of the link lists */

.link-list__link {
font-size: 18px;
}


/* This makes the form fields rounded and increased the padding so that the text doesn't get cut off by the rounded corners */

.form-control {
border-radius: 30px;
padding-left: 24px;
padding-right: 24px;
}


/* This reduces the h1 font size of the blog post title on the blog feed page on desktop  */

@media (min-width: 768px) {
h1.blog-post-body__title {
font-size: 58px !important;
}
}


/* This moves the podcast intro section up higher so that it is behind the transparent header. Delete this code if not using a transparent header for the website theme */

.podcast-intro { 
margin-top: -80px !important;
padding-top: 80px !important;
}


/* This moves the coaching product hero section up higher so that it is behind the transparent header. Delete this code if not using a transparent header for the website theme */

.coaching-programs__container { 
margin-top: -94px !important;
}

.coaching-programs__header  {
padding-top: 94px !important;
}


/* This creates a new class for bulleted lists with black arrows */

.bullet-arrow {
list-style-type: none;
}

.bullet-arrow li {
list-style-type: none;
position: relative;
padding-left: 6px;
}

.bullet-arrow li:before {
content: '\2771 \2771';
color: #000000;
font-size: 16px;
position: absolute;
top: 6px;
left: -20px;
}


/* This creates a new class for bulleted lists with pink arrows */

.bullet-arrow-pink {
list-style-type: none;
}

.bullet-arrow-pink li {
list-style-type: none;
position: relative;
padding-left: 6px;
}

.bullet-arrow-pink li:before {
content: '\2771 \2771';
color: #FF65BE;
font-size: 16px;
position: absolute;
top: 6px;
left: -20px;
}


/* This creates a new class for bulleted lists with yellow arrows */

.bullet-arrow-yellow {
list-style-type: none;
}

.bullet-arrow-yellow li {
list-style-type: none;
position: relative;
padding-left: 6px;
}

.bullet-arrow-yellow li:before {
content: '\2771 \2771';
color: #FEED00;
font-size: 16px;
position: absolute;
top: 6px;
left: -20px;
}


/* This creates a new class for bulleted lists with green arrows */

.bullet-arrow-green {
list-style-type: none;
}

.bullet-arrow-green li {
list-style-type: none;
position: relative;
padding-left: 6px;
}

.bullet-arrow-green li:before {
content: '\2771 \2771';
color: #05b7b9;
font-size: 16px;
position: absolute;
top: 6px;
left: -20px;
}


/* This creates a new class for bulleted lists with blue arrows */

.bullet-arrow-blue {
list-style-type: none;
}

.bullet-arrow-blue li {
list-style-type: none;
position: relative;
padding-left: 6px;
}

.bullet-arrow-blue li:before {
content: '\2771 \2771';
color: #5fd3fa;
font-size: 16px;
position: absolute;
top: 6px;
left: -20px;
}
</style>

    <!-- Kajabi Editor Only CSS ============================================ -->
    

    <!-- Header hook ======================================================= -->
    <script type="text/javascript">
  var Kajabi = Kajabi || {};
</script>
<script type="text/javascript">
  Kajabi.currentSiteUser = {
    "id" : "-1",
    "type" : "Guest",
    "contactId" : "",
  };
</script>
<script type="text/javascript">
  Kajabi.theme = {
    activeThemeName: "Creative 1695666426",
    previewThemeId: null,
    editor: false
  };
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1NH6WMQGC3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-1NH6WMQGC3');
</script>
<style type="text/css">
  #editor-overlay {
    display: none;
    border-color: #2E91FC;
    position: absolute;
    background-color: rgba(46,145,252,0.05);
    border-style: dashed;
    border-width: 3px;
    border-radius: 3px;
    pointer-events: none;
    cursor: pointer;
    z-index: 10000000000;
  }
  .editor-overlay-button {
    color: white;
    background: #2E91FC;
    border-radius: 2px;
    font-size: 13px;
    margin-left: -24px;
    margin-top: -12px;
    padding: 3px 10px;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:1.5px;

    left: 50%;
    top: 50%;
    position: absolute;
  }
</style>
      <script type="text/javascript">
        if (typeof (window.rudderanalytics) === "undefined") {
          !function(){"use strict";window.RudderSnippetVersion="3.0.3";var sdkBaseUrl="https://cdn.rudderlabs.com/v3"
          ;var sdkName="rsa.min.js";var asyncScript=true;window.rudderAnalyticsBuildType="legacy",window.rudderanalytics=[]
          ;var e=["setDefaultInstanceKey","load","ready","page","track","identify","alias","group","reset","setAnonymousId","startSession","endSession","consent"]
          ;for(var n=0;n<e.length;n++){var t=e[n];window.rudderanalytics[t]=function(e){return function(){
          window.rudderanalytics.push([e].concat(Array.prototype.slice.call(arguments)))}}(t)}try{
          new Function('return import("")'),window.rudderAnalyticsBuildType="modern"}catch(a){}
          if(window.rudderAnalyticsMount=function(){
          "undefined"==typeof globalThis&&(Object.defineProperty(Object.prototype,"__globalThis_magic__",{get:function get(){
          return this},configurable:true}),__globalThis_magic__.globalThis=__globalThis_magic__,
          delete Object.prototype.__globalThis_magic__);var e=document.createElement("script")
          ;e.src="".concat(sdkBaseUrl,"/").concat(window.rudderAnalyticsBuildType,"/").concat(sdkName),e.async=asyncScript,
          document.head?document.head.appendChild(e):document.body.appendChild(e)
          },"undefined"==typeof Promise||"undefined"==typeof globalThis){var d=document.createElement("script")
          ;d.src="https://polyfill-fastly.io/v3/polyfill.min.js?version=3.111.0&features=Symbol%2CPromise&callback=rudderAnalyticsMount",
          d.async=asyncScript,document.head?document.head.appendChild(d):document.body.appendChild(d)}else{
          window.rudderAnalyticsMount()}window.rudderanalytics.load("2apYBMHHHWpiGqicceKmzPebApa","https://kajabiaarnyhwq.dataplane.rudderstack.com",{})}();
        }
      </script>
      <script type="text/javascript">
        if (typeof (window.rudderanalytics) !== "undefined") {
          rudderanalytics.page({"account_id":"2147637407","site_id":"2147658501"});
        }
      </script>
<meta name='site_locale' content='en'><style type="text/css">
  /* Font Awesome 4 */
  .fa.fa-twitter{
    font-family:sans-serif;
  }
  .fa.fa-twitter::before{
    content:"𝕏";
    font-size:1.2em;
  }

  /* Font Awesome 5 */
  .fab.fa-twitter{
    font-family:sans-serif;
  }
  .fab.fa-twitter::before{
    content:"𝕏";
    font-size:1.2em;
  }
</style>


</head>
<style>
    body {
    
    
    
    }
</style>
<body id="encore-theme" class="background-unrecognized">


<div id="section-header" data-section-id="header">

<style>
    /* Default Header Styles */
    .header {
    
        background-color: #171723;
    
        font-size: 18px;
    }
    .header a,
    .header a.link-list__link,
    .header a.link-list__link:hover,
    .header a.social-icons__icon,
    .header .user__login a,
    .header .dropdown__item a,
    .header .dropdown__trigger:hover {
        color: #cfcfe3;
    }
    .header .dropdown__trigger {
        color: #cfcfe3 !important;
    }
    /* Mobile Header Styles */
    @media (max-width: 767px) {
        .header {
        
            font-size: 16px;
        }
    
        .header .hamburger__slices .hamburger__slice {
        
            background-color: #cfcfe3;
        
        }
    
        .header a.link-list__link, .dropdown__item a, .header__content--mobile {
            text-align: center;
        }
    
        .header--overlay .header__content--mobile  {
            padding-bottom: 20px;
        }
    }
    /* Sticky Styles */
    
    .header.header--fixed {
        background-color: #171723;
    
        background-color: ;
    
    
        background-color: ;
    
    }
    
    
    .header.header--fixed .hamburger__slice {
    
        background-color: ;
    
    }
    
</style>

<div class="hidden">
    
        
    
        
    
        
    
    
    
    
</div>

<header  class="header header--nc header--overlay sticky   background-dark header--close-on-scroll" kjb-settings-id="sections_header_settings_background_color">
    <div class="hello-bars">
        
            
        
            
        
            
        
    </div>
    
        <div class="header__wrap">
            <div class="header__content header__content--desktop background-dark">
                <div class="container header__container media justify-content-left">
                    
                        
                                <style>
    @media (min-width: 768px) {
        #block-1555988494486 {
            text-align: left;
        }
    }
</style>

<div id="block-1555988494486" class="header__block header__block--logo header__block--show header__switch-content stretch" kjb-settings-id="sections_header_blocks_1555988494486_settings_stretch">
    <style>
    #block-1555988494486 {
        line-height: 1;
    }
    #block-1555988494486 .logo__image {
        display: block;
        width: 41px;
    }
    #block-1555988494486 .logo__text {
        color: ;
    }
</style>

<a class="logo" href="/">
    
        
            <img class="logo__image" src="https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2153582899/settings_images/e05b7a-725c-ea4-584d-813d3e45561_a0372443-437b-4642-b63d-4a128f21323d.png" kjb-settings-id="sections_header_blocks_1555988494486_settings_logo" alt="NetworkChuck" />
        
    
</a>
</div>
                            
                    
                        
                                <style>
    @media (min-width: 768px) {
        #block-1555988491313 {
            text-align: right;
        }
    }
</style>

<div id="block-1555988491313" class="header__block header__switch-content header__block--menu stretch" kjb-settings-id="sections_header_blocks_1555988491313_settings_stretch">
    <div class="link-list justify-content-right" kjb-settings-id="sections_header_blocks_1555988491313_settings_menu">
    
        <a class="link-list__link" href="https://academy.networkchuck.com/"  >Home</a>
    
        <a class="link-list__link" href="https://store.networkchuck.com/" target="_blank"  >Shop</a>
    
        <a class="link-list__link" href="https://academy.networkchuck.com/courses"  >Courses</a>
    
        <a class="link-list__link" href="https://networkchuck.com/contact/" target="_blank"  >Contact</a>
    
        <a class="link-list__link" href="https://networkchuck.com/about/" target="_blank"  >About</a>
    
</div>
</div>
                            
                    
                        
                                <style>
    @media (min-width: 768px) {
        #block-1555988487706 {
            text-align: right;
        }
    }
</style>

<div id="block-1555988487706" class="header__block header__switch-content header__block--user " kjb-settings-id="sections_header_blocks_1555988487706_settings_stretch">
    <style>
    /* Dropdown menu colors for desktop */
    @media (min-width: 768px) {
        #block-1555988487706 .dropdown__menu {
            background: #feed00;
            color: #000000;
        }
        #block-1555988487706 .dropdown__item a,
        #block-1555988487706 {
            color: #000000;
        }
    }
    /* Mobile menu text alignment */
    @media (max-width: 767px) {
        #block-1555988487706 .dropdown__item a,
        #block-1555988487706 .user__login a {
            text-align: center;
        }
    }
</style>

<div class="user" kjb-settings-id="sections_header_blocks_1555988487706_settings_language_login">
    
        <span class="user__login" kjb-settings-id="language_login"><a href="/login">LOG IN</a></span>
    
</div>
</div>
                            
                    
                    
                        <div class="hamburger hidden--desktop" kjb-settings-id="sections_header_settings_hamburger_color">
                            <div class="hamburger__slices">
                                <div class="hamburger__slice hamburger--slice-1"></div>
                                <div class="hamburger__slice hamburger--slice-2"></div>
                                <div class="hamburger__slice hamburger--slice-3"></div>
                                <div class="hamburger__slice hamburger--slice-4"></div>
                            </div>
                        </div>
                    
                </div>
            </div>
            <div class="header__content header__content--mobile">
                <div class="header__switch-content header__spacer"></div>
            </div>
        </div>
    
</header>

</div>
<main>
    <div data-content-for-index data-dynamic-sections="index"><div id="section-1683430029676" data-section-id="1683430029676"><style>
    
    #section-1683430029676 {
        background-image: url(https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2155008837/assets/background.jpg?1724715549857182);
        background-position: center;
    }
    
    #section-1683430029676 .section__overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: RGBA(22, 30, 42, 0.86);
    }
    #section-1683430029676 .sizer {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    #section-1683430029676 .container {
        max-width: calc(1260px + 10px + 10px);
        padding-right: 10px;
        padding-left: 10px;
    
    }
    #section-1683430029676 .row {
    
    }
    #section-1683430029676 .container--full {
        width: 100%;
        max-width: calc(100% + 10px + 10px);
    }
    @media (min-width: 768px) {
    
        #section-1683430029676 {
        
        }
    
        #section-1683430029676 .sizer {
            padding-top: 100px;
            padding-bottom: 100px;
        }
        #section-1683430029676 .container {
            max-width: calc(1260px + 60px + 60px);
            padding-right: 60px;
            padding-left: 60px;
        }
        #section-1683430029676 .container--full {
            max-width: calc(100% + 60px + 60px);
        }
    }
    
    
</style>

<section id="test1" kjb-settings-id="sections_1683430029676_settings_background_color"
         class="section banner-hero--nc
  
  
   background-dark "
         data-reveal-event=""
         data-reveal-offset=""
         data-reveal-units="seconds">
    <div class="sizer ">
        
        <div class="section__overlay"></div>
        <div class="container ">
            <div class="row align-items-center justify-content-left">
                
                    




<style>
    /* flush setting */
    
    
    /* margin settings */
    #block-1683430029676_0, [data-slick-id="1683430029676_0"] {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    #block-1683430029676_0 .block, [data-slick-id="1683430029676_0"] .block {
        /* border settings */
        border: 4px none black;
        border-radius: 4px;
    

        /* background color */
    
        /* default padding for mobile */
    
    
    
        /* mobile padding overrides */
    
    
    
    
    
    }

    @media (min-width: 768px) {
        /* desktop margin settings */
        #block-1683430029676_0, [data-slick-id="1683430029676_0"] {
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #block-1683430029676_0 .block, [data-slick-id="1683430029676_0"] .block {
            /* default padding for desktop  */
        
        
            /* desktop padding overrides */
        
        
        
        
        
        }
    }
    /* mobile text align */
    @media (max-width: 767px) {
        #block-1683430029676_0, [data-slick-id="1683430029676_0"] {
            text-align: left;
        }
    }
</style>


<div
        id="block-1683430029676_0"
        class="
  block-type--text
  text-left
  
  col-6
  
  
  
    
  
  
  "
        
        data-reveal-event=""
        data-reveal-offset=""
        data-reveal-units="seconds"
        
            kjb-settings-id="sections_1683430029676_blocks_1683430029676_0_settings_width"
          >
    <div class="block
    box-shadow-none
    "
        
         data-aos="none"
    data-aos-delay="0"
    data-aos-duration="0"
    
>
    
    <style>
    
    #block-1577982541036_0 .btn {
        margin-top: 1rem;
    }
</style>

<h3>WELCOME</h3>
<p>Level up your I.T. Career with Chuck's expertise and engaging courses at NetworkChuck Academy. Start Now!</p>

    






<style>
    #block-1683430029676_0 .btn,
    [data-slick-id="1683430029676_0"] .block .btn {
        color: #ffffff;
        border-color: #000000;
        border-radius: 30px;
        background-color: #000000;
    }
    #block-1683430029676_0 .btn--outline,
    [data-slick-id="1683430029676_0"] .block .btn--outline {
        background: transparent;
        color: #000000;
    }
</style>



    



    

    <a class="customBtn btn btn1 btn--solid btn--medium btn--auto" href="/resource_redirect/offers/5c3Y6k2u"   kjb-settings-id="sections_1683430029676_blocks_1683430029676_0_settings_btn_background_color" role="button">
        
            Enroll for $12/mo
        
        
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 12H22" stroke="#160E08" stroke-width="2" stroke-miterlimit="10"></path>
                <path d="M15 5L22 12L15 19" stroke="#160E08" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"></path>
            </svg>
        
        
    </a>
  




    






<style>
    #block-1683430029676_0 .btn,
    [data-slick-id="1683430029676_0"] .block .btn {
        color: ;
        border-color: ;
        border-radius: px;
        background-color: ;
    }
    #block-1683430029676_0 .btn--outline,
    [data-slick-id="1683430029676_0"] .block .btn--outline {
        background: transparent;
        color: ;
    }
</style>



    



    
    <a class="btn btn2 btn-- btn-- btn--" href="/resource_redirect/offers/qqemyFfV"   kjb-settings-id="sections_1683430029676_blocks_1683430029676_0_settings_btn_background_color_2" role="button">
        
            Enroll For $72/YEAR ($6/Mo) 
        
        
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 12H22" stroke="#160E08" stroke-width="2" stroke-miterlimit="10"></path>
                <path d="M15 5L22 12L15 19" stroke="#160E08" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"></path>
            </svg>
        
        
            <span class="discount-tag">50% Discount</span>
        
    </a>



</div>
</div>

                
                    




<style>
    /* flush setting */
    
    
    /* margin settings */
    #block-1683430029676_3, [data-slick-id="1683430029676_3"] {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    #block-1683430029676_3 .block, [data-slick-id="1683430029676_3"] .block {
        /* border settings */
        border: 4px  black;
        border-radius: 4px;
    

        /* background color */
    
        /* default padding for mobile */
    
    
        padding: 20px;
    
    
    
    
        /* mobile padding overrides */
    
        padding: 0;
    
    
        padding-top: 0px;
    
    
        padding-right: 0px;
    
    
        padding-bottom: 0px;
    
    
        padding-left: 0px;
    
    }

    @media (min-width: 768px) {
        /* desktop margin settings */
        #block-1683430029676_3, [data-slick-id="1683430029676_3"] {
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            margin-left: 0px;
        }
        #block-1683430029676_3 .block, [data-slick-id="1683430029676_3"] .block {
            /* default padding for desktop  */
        
        
        
        
            /* desktop padding overrides */
        
            padding: 0;
        
        
            padding-top: 0px;
        
        
            padding-right: 0px;
        
        
            padding-bottom: 0px;
        
        
            padding-left: 0px;
        
        }
    }
    /* mobile text align */
    @media (max-width: 767px) {
        #block-1683430029676_3, [data-slick-id="1683430029676_3"] {
            text-align: ;
        }
    }
</style>


<div
        id="block-1683430029676_3"
        class="
  block-type--video
  text-
  
  col-6
  
  
  
    
  
  
  "
        
        data-reveal-event=""
        data-reveal-offset=""
        data-reveal-units="seconds"
        
            kjb-settings-id="sections_1683430029676_blocks_1683430029676_3_settings_width"
          >
    <div class="block
    box-shadow-
    "
        
         data-aos="none"
    data-aos-delay="0"
    data-aos-duration="0"
    
>
    
    













<div class="video">
    
        
<script>
  window._wq = window._wq || [];
  _wq.push({"3rokb736wi": JSON.parse('{\"playerColor\":\"#000000\",\"stillUrl\":\"https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/file-uploads/themes/2153582899/settings_images/86141e-152a-87cd-ea7f-1ef430e2305a_playerframe.png\",\"autoPlay\":false,\"controlsVisibleOnLoad\":false,\"playbar\":true,\"fullscreenButton\":false,\"playbackRateControl\":true,\"qualityControl\":true,\"settingsControl\":true,\"smallPlayButton\":true,\"endVideoBehavior\":null,\"playButton\":true,\"resumable\":true}')});
</script>

<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script>


<div class="kjb-video-responsive">
  <div id="wistia_3rokb736wi"
    class="wistia_embed wistia_async_3rokb736wi "
    data-track-progress=""
    data-tracked-percent="">&nbsp;</div>
</div>

    
</div>
</div>
</div>

                
                    




<style>
    /* flush setting */
    
    
    /* margin settings */
    #block-1683430029676_2, [data-slick-id="1683430029676_2"] {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
    #block-1683430029676_2 .block, [data-slick-id="1683430029676_2"] .block {
        /* border settings */
        border: 4px  black;