- var page_Title = 'Mega Options';
- var theme_customizer      = true;
- var height_equal          = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body.mega-option-box
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Mega Options
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Controls
                    li.breadcrumb-item.active Mega options
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-12") 
                .card
                  .card-header
                    h5 Variation Radio
                    p.f-m-light.mt-1 
                      | Use 
                      code radio 
                      | attribute to create variations of radio buttons.
                  .card-body
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-4 xl:col-span-6 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full.checkbox-checked
                          h6.sub-title Select your payment method
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm11.form-check-input(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0(for='ptm11')
                                  | BOB
                            .payment-second
                              img.max-w-full.h-auto(src="../assets/images/ecommerce/card.png", alt="card")
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm22.form-check-input(type='radio', name='radio1', value='option1' checked='')
                                label.form-check-label.mb-0(for='ptm22')
                                  | MasterCard
                            .payment-second
                              img.max-w-full.h-auto(src="../assets/images/ecommerce/mastercard.png", alt="card")
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm33.form-check-input(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0(for='ptm33')
                                  | Paypal
                            .payment-second
                              img.max-w-full.h-auto(src="../assets/images/ecommerce/paypal.png", alt="card")
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm44.form-check-input(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0(for='ptm44')
                                  | VISA
                            .payment-second
                              img.max-w-full.h-auto(src="../assets/images/ecommerce/visa.png", alt="card")
                      div(class="col-span-4 xl:col-span-6 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full.checkbox-checked
                          h6.sub-title What are the most important things to learn about web design?
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm101.form-check-input(type='radio', name='radio3', value='option1')
                                label.form-check-label.mb-0(for='ptm101')
                                  | A. HTML 
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm201.form-check-input(type='radio', name='radio3', value='option1')
                                label.form-check-label.mb-0(for='ptm201')
                                  | B. CSS
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm301.form-check-input(type='radio', name='radio3', value='option1' checked='')
                                label.form-check-label.mb-0(for='ptm301')
                                  | C. Javascript
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm401.form-check-input(type='radio', name='radio3', value='option1')
                                label.form-check-label.mb-0(for='ptm401')
                                  | D. Above the all 
                      div(class="col-span-4 xl:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full.checkbox-checked
                          h6.sub-title Radios with creative options & SVG icons
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm100.form-check-input(type='radio', name='radio2', value='option1')
                                label.form-check-label.mb-0(for='ptm100')
                                  | The notification icon displayed new messages.
                            .payment-second
                              svg.mega-icons.stroke-danger
                                use(href='../assets/svg/icon-sprite.svg#notification')
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm200.form-check-input(type='radio', name='radio2', value='option1')
                                label.form-check-label.mb-0(for='ptm200')
                                  | The download icon indicated completion.
                            .payment-second
                              svg.mega-icons.stroke-success
                                use(href='../assets/svg/icon-sprite.svg#stroke-calendar')
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm300.form-check-input(type='radio', name='radio2', value='option1' checked='')
                                label.form-check-label.mb-0(for='ptm300')
                                  | The tag icon allowed easy categorization.
                            .payment-second
                              svg.mega-icons.stroke-dark
                                use(href='../assets/svg/icon-sprite.svg#tag')
                          .payment-wrapper
                            .payment-first
                              .form-check.radio.radio-primary
                                input#ptm400.form-check-input(type='radio', name='radio2', value='option1')
                                label.form-check-label.mb-0(for='ptm400')
                                  | The email icon was inaccessibly located.
                            .payment-second
                               svg.mega-icons.stroke-primary
                                use(href='../assets/svg/icon-sprite.svg#stroke-email')
              div(class="col-span-12") 
                .card 
                  .card-header 
                    h5 Variation Checkbox 
                    p.f-m-light.mt-1 
                      | We can create any creative design by using 
                      code (type='checkbox')
                      | attribute.
                  .card-body 
                    .grid.grid-cols-12.gap-3
                      div(class="col-span-4 xl:col-span-5 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full.checkbox-checked
                          h6.sub-title Which of the following activities do you enjoy doing in your free time?
                          .payment-wrapper
                            .payment-first
                              .form-check.checkbox.checkbox-success
                                input#check-a.form-check-input(type='checkbox')
                                label.form-check-label.mb-0(for='check-a')
                                  | Reading 
                          .payment-wrapper
                            .payment-first
                              .form-check.checkbox.checkbox-success
                                input#check-b.form-check-input(type='checkbox' checked='')
                                label.form-check-label.mb-0(for='check-b')
                                  | Watching TV
                          .payment-wrapper
                            .payment-first
                              .form-check.checkbox.checkbox-danger
                                input#check-c.form-check-input(type='checkbox')
                                label.form-check-label.mb-0(for='check-c')
                                  | Listening to music
                          .payment-wrapper
                            .payment-first
                              .form-check.checkbox.checkbox-danger
                                input#check-d.form-check-input(type='checkbox')
                                label.form-check-label.mb-0(for='check-d')
                                  | Playing video games
                          .payment-wrapper
                            .payment-first
                              .form-check.checkbox.checkbox-success
                                input#check-e.form-check-input(type='checkbox')
                                label.form-check-label.mb-0(for='check-e')
                                  | Painting/Drawing
                      div(class="col-span-8 xl:col-span-7 md:col-span-12")
                        .card-wrapper.custom-border.rounded-3.h-full.checkbox-checked
                          section.main-upgrade
                            div 
                              i.fa-solid.fa-rocket
                              h5.mb-2.mt-sm-3.mt-2
                                | It&apos;s time to 
                                span.txt-primary upgrade
                              p.text-muted.mb-2 Select the theme that best suits your requirements, and you're ready to go!
                            .variation-box(class="[@media(min-width:768px)_and_(max-width:1200px)]:grid [@media(min-width:768px)_and_(max-width:1200px)]:grid-cols-[auto_auto] [@media(min-width:768px)_and_(max-width:1200px)]:gap-[18px] [@media(max-width:700px)]:grid [@media(max-width:700px)]:grid-cols-[auto_auto] [@media(max-width:700px)]:gap-[18px]")
                              .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:!min-w-[calc(110px_+_(125_-_110)_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                input#feature1(type='checkbox')
                                div.custom--mega-checkbox
                                  ul.flex.flex-col
                                    li Mofi 
                                    li.txt-primary 380 Sales
                              .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:!min-w-[calc(110px_+_(125_-_110)_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                input#feature2(type='checkbox')
                                div.custom--mega-checkbox
                                  ul.flex.flex-col
                                    li Edmin
                                    li.txt-primary 1.8K Sales
                              .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:!min-w-[calc(110px_+_(125_-_110)_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                input#feature3(type='checkbox')
                                div.custom--mega-checkbox
                                  ul.flex.flex-col
                                    li Multikart 
                                    li.txt-primary 3.4k Sales
                              .selection-box(class="[@media(min-width:1200px)_and_(max-width:1920px)]:!min-w-[calc(110px_+_(125_-_110)_*_((100vw_-_1200px)_/_(1920_-_1200)))]")
                                input#feature4(type='checkbox' checked='')
                                div.custom--mega-checkbox
                                  ul.flex.flex-col
                                    li Viho
                                    li.txt-primary 2k Sales
              div(class="col-span-6 xxl:col-span-12 box-col-6")
                .card
                  .card-header
                    h5 Default Style
                    p.f-m-light.mt-1 
                      | It's a default style for radio buttons.
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0
                                input.form-check-input#radio14(type='radio', name='radio1', value='option1')
                                label.form-check-label(for='radio14')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.text-white.pull-right.digits 50 INR
                                    span Estimated 2 Day Shipping ( Duties end tax may be due delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0
                                input.form-check-input#radio13(type='radio', name='radio1', value='option1')
                                label.form-check-label(for='radio13')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Fast
                                      span.badge.badge-secondary.text-white.pull-right.digits 100 INR
                                    span Estimated 1 Day Shipping ( Duties end tax may be due delivery )
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
              div(class="col-span-6 xxl:col-span-12 box-col-6")
                .card
                  .card-header
                    h5 Without Borders Style
                    p.f-m-light.mt-1 
                      | By adding 
                      code plain-style 
                      | & 
                      code mega-inline
                      |  to use default style for checkbox buttons.
                  .card-body
                    form.mega-inline.plain-style
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.checkbox.checkbox-primary.m-0
                                input.form-check-input#checkbox11(type='checkbox' checked='')
                                label.form-check-label(for='checkbox11')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | $39
                                      span.badge.badge-primary.text-white.pull-right.digits 100 MBPS
                                    span Plans for 2/4/6 months are offered to new clients.
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.checkbox.checkbox-secondary.m-0
                                input.form-check-input#checkbox22(type='checkbox')
                                label.form-check-label(for='checkbox22')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | $50
                                      span.badge.badge-secondary.text-white.pull-right.digits Hired
                                    span Plans for 2 years projects offered to new clients.
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.button-light-primary(type='submit') Cancel
              div(class="col-span-6 xxl:col-span-12 box-col-6")
                .card
                  .card-header
                    h5 Solid Border Style
                    p.f-m-light.mt-1 
                      | Use 
                      code border-style
                      |  & 
                      code mega-inline
                      |  to use solid border style radio button.
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline.border-style
                      .grid.grid-cols-12.card-gap.flex-col
                        div(class="col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary
                                input.form-check-input#radio15(type='radio', name='radio1', value='option1')
                                label.form-check-label.my-0(for='radio15')
                                  span.grow
                                    span.flex.list-behavior-1(class="[@media(max-width:618px)]:flex-col [@media(max-width:618px)]:gap-[12px]")
                                      span.shrink-0
                                        img.tab-img.max-w-full(src="../assets/images/blog/img.png", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="home") 
                                      span.grow(class="[@media(max-width:618px)]:ml-[0px]")
                                        span.mb-0
                                          | We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration.
                        div(class="col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary
                                input.form-check-input#radio16(type='radio', name='radio1', value='option1')
                                label.form-check-label.my-0(for='radio16')
                                  span.grow
                                    span.flex.list-behavior-1(class="[@media(max-width:618px)]:flex-col [@media(max-width:618px)]:gap-[12px]")
                                      span.shrink-0 
                                        img.tab-img.max-w-full(src="../assets/images/blog/blog.jpg", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="home")
                                      span.grow(class="[@media(max-width:618px)]:ml-[0px]")
                                        span.mb-0
                                          | When someone visits your homepage, your design should inspire them to stay. Therefore, your value proposition should be established on the homepage for visitors.
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
              div(class="col-span-6 xxl:col-span-12 box-col-6")
                .card
                  .card-header
                    h4 Offer Style Border
                    p.f-m-light.mt-1 
                      | Use 
                      code offer-style 
                      | & 
                      code mega-inline
                      |  to use solid border style checkbox button.
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline.offer-style
                      .grid.grid-cols-12.card-gap.flex-col
                        div(class="col-span-12")
                          .card
                            .flex.p-5
                              .form-check.checkbox.checkbox-primary
                                input.form-check-input#checkbox50(type='checkbox')
                                label.form-check-label.my-0(for='checkbox50')
                                  span.grow
                                    span.flex.list-behavior-1(class="[@media(max-width:618px)]:flex-col [@media(max-width:618px)]:gap-[12px]")
                                      span.shrink-0
                                        img.tab-img.max-w-full(src="../assets/images/email-template/11.jpg", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="fruits") 
                                      span.grow(class="[@media(max-width:618px)]:ml-[0px]")
                                        span.mb-0
                                          | Fruits are an essential part of a healthy diet, and offer many health benefits. They're packed with vitamins, minerals, and fiber, which can help improve digestion.
                        div(class="col-span-12")
                          .card
                            .flex.p-5
                              .form-check.checkbox.checkbox-primary
                                input.form-check-input#checkbox101(type='checkbox' checked='')
                                label.form-check-label.my-0(for='checkbox101')
                                  span.grow
                                    span.flex.list-behavior-1(class="[@media(max-width:618px)]:flex-col [@media(max-width:618px)]:gap-[12px]")
                                      span.shrink-0 
                                        img.tab-img.max-w-full(src="../assets/images/email-template/10.jpg", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="flowers")
                                      span.grow(class="[@media(max-width:618px)]:ml-[0px]")
                                        span.mb-0
                                          | Flowers have long been used to express feelings and sentiments, and each bloom has its own distinct significance. For instance, while daisies signify innocence and purity.
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.button-light-primary(type='submit') Cancel
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Inline Style
                    p.f-m-light.mt-1 
                      | To create inline megaoption add 
                      code mega-inline
                      |  class in form tag
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio19(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio19')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.text-white.pull-right.digits 50 INR
                                    span Estimated 14-20 Day Shipping ( Duties end taxes may be due upon delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio20(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio20')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Fast
                                      span.badge.badge-secondary.text-white.pull-right.digits 100 INR
                                    span Estimated 1 Day Shipping ( Duties end taxes may be due upon delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio21(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio21')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Standard
                                      span.badge.badge-secondary.text-white.pull-right.digits 80 INR
                                    span Estimated 3 Day Shipping ( Duties end taxes may be due upon delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio22(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio22')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Local 
                                      span.badge.badge-primary.text-white.pull-right.digits Free
                                    span Estimated 15 Day Shipping ( Duties end taxes may be due upon delivery )
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.button-light-primary(type='submit') Cancel
              div(class="col-span-6 xxl:col-span-12 box-col-12")
                .card
                  .card-header
                    h5 Vertical Style
                    p.f-m-light.mt-1
                      | Use 
                      code mega-vertical 
                      | class to create vertical alignments.
                  .card-body
                    form.mega-vertical
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-12")
                          p.mega-title.m-b-5 Delivery Options
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio23(type='radio', name='radio5', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio23')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.text-white.pull-right.digits 50 INR
                                    span Estimated 10 to 15 Day Shipping ( Duties end tax may be due delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio24(type='radio', name='radio5', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio24')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Fast 
                                      span.badge.badge-secondary.text-white.pull-right.digits 100 INR
                                    span Estimated 10 to 12 Day Shipping ( Duties end tax may be due delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio25(type='radio', name='radio5', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio25')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Standard 
                                      span.badge.badge-primary.text-white.pull-right.digits 80 INR
                                    span Estimated 3 to 5 Day Shipping ( Duties end tax may be due delivery )
                        div(class="col-span-6 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio5(type='radio', name='radio5', value='option1' checked='')
                                label.form-check-label.mb-0.w-full(for='radio5')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Local 
                                      span.badge.badge-secondary.text-white.pull-right.digits Free
                                    span Estimated 3 to 5 Day Shipping ( Duties end taxes may be due upon delivery )
                        div(class="col-span-12")
                          p.mega-title.m-b-5 Buying Options
                        div(class="col-span-6 sm:col-span-12")
                          .card.mb-sm-0
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio26(type='radio', name='radio7', value='option1' checked='')
                                label.form-check-label.mb-0.w-full(for='radio26')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Pixelstrap
                                      span.badge.badge-primary.text-white.pull-right.digits 250 INR
                                    span.rating-star-wrapper
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning.m-r-5
                                      | 5 start rating
                        div(class="col-span-6 sm:col-span-12")
                          .card.mb-0
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio27(type='radio', name='radio7', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio27')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Multikart
                                      span.badge.badge-secondary.text-white.pull-right.digits 150 INR
                                    span.rating-star-wrapper
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star
                                      i.icofont.icofont-star.m-r-5
                                      | 3 start rating
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
              
              div(class="col-span-6 xxl:col-span-12 box-col-12")
                .card
                  .card-header
                    h5 Horizontal Style
                    p.f-m-light.mt-1
                      | Use 
                      code mega-horizontal
                      |  class to create horizontal alignments.
                  .card-body
                    form.mega-horizontal.block
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-3 sm:col-span-12")
                          p.mega-title Delivery Options
                        div(class="col-span-9 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio30(type='radio', name='radio22', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio30')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.text-white.pull-right.digits 50 INR
                                    span Estimated 5 Day Shipping ( Duties end tax may be due delivery )
                        div(class="col-span-9 sm:col-span-12 col-start-4")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio31(type='radio', name='radio22', value='option1' checked='')
                                label.form-check-label.mb-0.w-full(for='radio31')
                                  span.grow.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Fast 
                                      span.badge.badge-secondary.text-white.pull-right.digits 100 INR
                                    span Estimated 1 Day Shipping ( Duties end tax may be due delivery )
                        div(class="col-span-3 sm:col-span-12")
                          p.mega-title Buying Options
                        div(class="col-span-9 sm:col-span-12")
                          .card
                            .flex.p-5
                              .form-check.radio.radio-primary.m-0.w-full
                                input.form-check-input#radio32(type='radio', name='radio23', value='option1')
                                label.form-check-label.mb-0.w-full(for='radio32')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Pixelstrap
                                      span.badge.badge-primary.text-white.pull-right.digits 250 INR
                                    span.rating-star-wrapper
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning.m-r-5
                                      | 5 start rating
                        div(class="col-span-9 sm:col-span-12 col-start-4")
                          .card.mb-0
                            .flex.p-5
                              .form-check.radio.radio-secondary.m-0.w-full
                                input.form-check-input#radio33(type='radio', name='radio23', value='option1' checked='')
                                label.form-check-label.mb-0.w-full(for='radio33')
                                  span.grow
                                    span.mt-0.mega-title-badge
                                      | Tivo
                                      span.badge.badge-secondary.text-white.pull-right.digits 150 INR
                                    span.rating-star-wrapper
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star.m-r-5
                                      | 4 start rating
                  .card-footer.text-end
                    button.btn.btn-primary.text-white.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
