- var theme_customizer      = true;
- var height_equal          = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = 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
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Mega Options
                .col-6
                  ol.breadcrumb
                    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-fluid
            .row
              .col-12 
                .card
                  .card-header
                    h4 Variation radio
                    p.f-m-light.mt-1 
                      | Use the 
                      code radio 
                      | attribute through create variation of radio designs.
                  .card-body
                    .row.g-3
                      .col-xl-4.col-md-6
                        .card-wrapper.border.rounded-3.h-100.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.img-fluid(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.img-fluid(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.img-fluid(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.img-fluid(src="../assets/images/ecommerce/visa.png", alt="card")
                      .col-xl-4.col-md-6
                        .card-wrapper.border.rounded-3.h-100.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 
                      .col-xl-4
                        .card-wrapper.border.rounded-3.h-100.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')
              .col-sm-12 
                .card 
                  .card-header 
                    h4 Variation checkbox 
                    p.f-m-light.mt-1 
                      | We can create any creative design by using 
                      code (type='checkbox')
                      | attribute.
                  .card-body 
                    .row.g-3
                      .col-xl-4.col-md-5
                        .card-wrapper.border.rounded-3.h-100.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
                      .col-xl-8.col-md-7
                        .card-wrapper.border.rounded-3.h-100.checkbox-checked
                          section.main-upgrade
                            div 
                              i.fa.fa-rocket
                              h5.mb-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
                              .selection-box
                                input#feature1(type='checkbox')
                                div.custom--mega-checkbox
                                  ul.d-flex.flex-column
                                    li Voxo
                                    li.txt-primary 270 Sales
                              .selection-box
                                input#feature2(type='checkbox')
                                div.custom--mega-checkbox
                                  ul.d-flex.flex-column
                                    li Cuba
                                    li.txt-primary 4.8K Sales
                              .selection-box
                                input#feature3(type='checkbox')
                                div.custom--mega-checkbox
                                  ul.d-flex.flex-column
                                    li Multikart 
                                    li.txt-primary 2.6k Sales
                              .selection-box
                                input#feature4(type='checkbox' checked='')
                                div.custom--mega-checkbox
                                  ul.d-flex.flex-column
                                    li Viho
                                    li.txt-primary 2k Sales
              .col-sm-12.col-xxl-6.box-col-6
                .card
                  .card-header
                    h4 Default style
                    p.f-m-light.mt-1 
                      | This option is show by default you don't need to add any extra class.
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline
                      .row
                        .col-sm-6
                          .card
                            .media.p-20
                              .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.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.pull-right.digits 50 INR
                                    span Estimated 2 Day Shipping ( Duties end tax may be due delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .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.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Fast
                                      span.badge.badge-secondary.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.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
              .col-sm-12.col-xxl-6.box-col-6
                .card
                  .card-header
                    h4 Without borders style
                    p.f-m-light.mt-1 
                      | By adding 
                      code .plain-style 
                      | class to 
                      code .mega-inline
                      |  You can archive this style
                  .card-body
                    form.mega-inline.plain-style
                      .row
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.checkbox.checkbox-warning.m-0
                                input.form-check-input#checkbox11(type='checkbox' checked='')
                                label.form-check-label(for='checkbox11')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | $39
                                      span.badge.badge-warning.pull-right.digits 100 MBPS
                                    span Plans for 2/4/6 months are offered to new clients.
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.checkbox.checkbox-info.m-0
                                input.form-check-input#checkbox22(type='checkbox')
                                label.form-check-label(for='checkbox22')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | $50
                                      span.badge.badge-info.pull-right.digits Hired
                                    span Plans for 2 years projects offered to new clients.
                  .card-footer.text-end
                    button.btn.btn-warning.m-r-15(type='submit') Submit
                    button.btn.list-light-warning(type='submit') Cancel
              .col-sm-12.col-xxl-6.box-col-6
                .card
                  .card-header
                    h4 Solid border style
                    p.f-m-light.mt-1 
                      | Use the 
                      code .border-style
                      |  class to 
                      code .mega-inline
                      |  you can archive this style.
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline.border-style
                      .row.flex-column
                        .col-12
                          .card
                            .media.p-20
                              .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.media-body
                                    span.d-flex.list-behavior-1
                                      span.flex-shrink-0
                                        img.tab-img.img-fluid(src="../assets/images/blog/img.png", alt="home") 
                                      span.flex-grow-1
                                        span.mb-0
                                          | We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration.
                        .col-12
                          .card
                            .media.p-20
                              .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.media-body
                                    span.d-flex.list-behavior-1
                                      span.flex-shrink-0 
                                        img.tab-img.img-fluid(src="../assets/images/blog/blog.jpg", alt="home")
                                      span.flex-grow-1
                                        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.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
              .col-sm-12.col-xxl-6.box-col-6
                .card
                  .card-header
                    h4 Offer style border
                    p.f-m-light.mt-1 
                      | Use the 
                      code .offer-style 
                      | class to
                      code  .mega-inline
                      |  you can archive this style.
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline.offer-style
                      .row.flex-column
                        .col-12
                          .card
                            .media.p-20
                              .form-check.checkbox.checkbox-success
                                input.form-check-input#checkbox50(type='checkbox')
                                label.form-check-label.my-0(for='checkbox50')
                                  span.media-body
                                    span.d-flex.list-behavior-1
                                      span.flex-shrink-0
                                        img.tab-img.img-fluid(src="../assets/images/email-template/11.jpg", alt="fruits") 
                                      span.flex-grow-1
                                        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.
                        .col-12
                          .card
                            .media.p-20
                              .form-check.checkbox.checkbox-danger
                                input.form-check-input#checkbox101(type='checkbox' checked='')
                                label.form-check-label.my-0(for='checkbox101')
                                  span.media-body
                                    span.d-flex.list-behavior-1
                                      span.flex-shrink-0 
                                        img.tab-img.img-fluid(src="../assets/images/email-template/10.jpg", alt="flowers")
                                      span.flex-grow-1
                                        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-success.m-r-15(type='submit') Submit
                    button.btn.list-light-success(type='submit') Cancel
              .col-sm-12
                .card
                  .card-header
                    h4 Inline style
                    p.f-m-light.mt-1 
                      | For Create inline megaoption add 
                      code .mega-inline
                      |  class in form tag
                  .card-body.megaoptions-border-space-sm
                    form.mega-inline
                      .row
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-warning.m-0.w-100
                                input.form-check-input#radio19(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio19')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-warning.pull-right.digits 50 INR
                                    span Estimated 14-20 Day Shipping ( Duties end taxes may be due upon delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-secondary.m-0.w-100
                                input.form-check-input#radio20(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio20')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Fast
                                      span.badge.badge-secondary.pull-right.digits 100 INR
                                    span Estimated 1 Day Shipping ( Duties end taxes may be due upon delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-secondary.m-0.w-100
                                input.form-check-input#radio21(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio21')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Standard
                                      span.badge.badge-secondary.pull-right.digits 80 INR
                                    span Estimated 3 Day Shipping ( Duties end taxes may be due upon delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-warning.m-0.w-100
                                input.form-check-input#radio22(type='radio', name='radio1', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio22')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Local 
                                      span.badge.badge-warning.pull-right.digits Free
                                    span Estimated 15 Day Shipping ( Duties end taxes may be due upon delivery )
                  .card-footer.text-end
                    button.btn.btn-warning.m-r-15(type='submit') Submit
                    button.btn.list-light-warning(type='submit') Cancel
              .col-sm-12.col-xxl-6.box-col-12
                .card.height-equal
                  .card-header
                    h4 Vertical style
                    p.f-m-light.mt-1
                      | vertical style in mega-options. Use the 
                      code .mega-vertical 
                      | class through created vertical alignments.
                  .card-body
                    form.mega-vertical
                      .row
                        .col-sm-12
                          p.mega-title.m-b-5 Delivery Option
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-primary.m-0.w-100
                                input.form-check-input#radio23(type='radio', name='radio5', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio23')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.pull-right.digits 50 INR
                                    span Estimated 10 to 15 Day Shipping ( Duties end tax may be due delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-secondary.m-0.w-100
                                input.form-check-input#radio24(type='radio', name='radio5', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio24')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Fast 
                                      span.badge.badge-secondary.pull-right.digits 100 INR
                                    span Estimated 10 to 12 Day Shipping ( Duties end tax may be due delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-success.m-0.w-100
                                input.form-check-input#radio25(type='radio', name='radio5', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio25')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Standard 
                                      span.badge.badge-success.pull-right.digits 80 INR
                                    span Estimated 3 to 5 Day Shipping ( Duties end tax may be due delivery )
                        .col-sm-6
                          .card
                            .media.p-20
                              .form-check.radio.radio-info.m-0.w-100
                                input.form-check-input#radio5(type='radio', name='radio5', value='option1' checked='')
                                label.form-check-label.mb-0.w-100(for='radio5')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Local 
                                      span.badge.badge-info.pull-right.digits Free
                                    span Estimated 3 to 5 Day Shipping ( Duties end taxes may be due upon delivery )
                        .col-sm-12
                          p.mega-title.m-b-5 Buying Option
                        .col-sm-6
                          .card.mb-0
                            .media.p-20
                              .form-check.radio.radio-warning.m-0.w-100
                                input.form-check-input#radio26(type='radio', name='radio7', value='option1' checked='')
                                label.form-check-label.mb-0.w-100(for='radio26')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Pixelstrap
                                      span.badge.badge-warning.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
                        .col-sm-6
                          .card.mb-0
                            .media.p-20
                              .form-check.radio.radio-danger.m-0.w-100
                                input.form-check-input#radio27(type='radio', name='radio7', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio27')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Multikart
                                      span.badge.badge-danger.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
                                      i.icofont.icofont-star
                                      i.icofont.icofont-star.m-r-5
                                      | 2 start rating
                  .card-footer.text-end
                    button.btn.btn-primary.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
              
              .col-sm-12.col-xxl-6.box-col-12
                .card.height-equal
                  .card-header
                    h4 Horizontal style
                    p.f-m-light.mt-1
                      | horizontal style in mega-options. Use the 
                      code .mega-horizontal
                      |  class through created horizontal alignments.
                  .card-body
                    form.mega-horizontal
                      .row
                        .col-sm-3
                          p.mega-title Delivery Option
                        .col-sm-9
                          .card
                            .media.p-20
                              .form-check.radio.radio-primary.m-0.w-100
                                input.form-check-input#radio30(type='radio', name='radio22', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio30')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | COD
                                      span.badge.badge-primary.pull-right.digits 50 INR
                                    span Estimated 5 Day Shipping ( Duties end tax may be due delivery )
                        .col-sm-9.offset-sm-3
                          .card
                            .media.p-20
                              .form-check.radio.radio-secondary.m-0.w-100
                                input.form-check-input#radio31(type='radio', name='radio22', value='option1' checked='')
                                label.form-check-label.mb-0.w-100(for='radio31')
                                  span.media-body.megaoption-space
                                    span.mt-0.mega-title-badge
                                      | Fast 
                                      span.badge.badge-secondary.pull-right.digits 100 INR
                                    span Estimated 1 Day Shipping ( Duties end tax may be due delivery )
                        .col-sm-3
                          p.mega-title Buying Option
                        .col-sm-9
                          .card
                            .media.p-20
                              .form-check.radio.radio-success.m-0.w-100
                                input.form-check-input#radio32(type='radio', name='radio23', value='option1')
                                label.form-check-label.mb-0.w-100(for='radio32')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Pixelstrap
                                      span.badge.badge-success.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
                        .col-sm-9.offset-sm-3
                          .card.mb-0
                            .media.p-20
                              .form-check.radio.radio-info.m-0.w-100
                                input.form-check-input#radio33(type='radio', name='radio23', value='option1' checked='')
                                label.form-check-label.mb-0.w-100(for='radio33')
                                  span.media-body
                                    span.mt-0.mega-title-badge
                                      | Tivo
                                      span.badge.badge-info.pull-right.digits 150 INR
                                    span.rating-star-wrapper
                                      i.icofont.icofont-star.txt-warning
                                      i.icofont.icofont-star
                                      i.icofont.icofont-star
                                      i.icofont.icofont-star
                                      i.icofont.icofont-star.m-r-5
                                      | 1 start rating
                  .card-footer.text-end
                    button.btn.btn-primary.m-r-15(type='submit') Submit
                    button.btn.btn-light(type='submit') Cancel
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
