Untitled

(function () {
    /* main variables */
    var debug = 0;
    var variation_name = "";
    /* all Pure helper functions */
    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }

    
    function init() {

        if ($(window).width() < 767){
            waitForSlick(function() {
                var $ = window.jQuery;
                if($('.plan-container-card')){
                    window.jQuery('.plan-container-card').slick({
                        infinite: false,
                        dots: true,
                        slidesToShow: 1.2,
                        centerMode: false,
                      });
                }
               if($('.addOnsCard')){
                    window.jQuery('.addOnsCard').slick({
                        infinite: false,
                        dots: true,
                        slidesToShow: 1.2,
                        centerMode: false,
                    });  
                }
                if($('.select-plan__categories-selection__container__categories')){
                    window.jQuery('.select-plan__categories-selection__container__categories').slick({
                        infinite: false,
                        dots: true,
                        slidesToShow: 1.2,
                        centerMode: false,
                        });  
                }

              });
        }
        addScript();

    }

    function waitForSlick(trigger) {
      var interval = setInterval(function () {
          if (window.jQuery.fn.slick != undefined) {
              clearInterval(interval);
              trigger();
          }
      }, 50);
      setTimeout(function () {
          clearInterval(interval);
      }, 15000)
    }

    // function waitForjQuery(trigger) {
    //   var interval = setInterval(function () {
    //       if (window.jQuery != undefined) {
    //           clearInterval(interval);
    //           trigger();
    //       }
    //   }, 50);
    //   setTimeout(function () {
    //       clearInterval(interval);
    //   }, 15000)
    // }

    function addScript() {
      var cssScript=''+ 
      "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'/>";
      document.querySelector('head').insertAdjacentHTML('beforeend', cssScript);
          
      var swiperScript = document.createElement('script');
      swiperScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js';
     // document.getElementsByTagName('head')[0].appendChild(swiperScript);
      }

      var egNext = '<span>Next Plan </span> <i class="fa fa-angle-right" aria-hidden="true"></i>';
      var egPrev = '<i class="fa fa-angle-left" aria-hidden="true"></i> <span>Previous Plan</span>';

      function init2(){
        $('.plan-container-card .slick-next').html(egNext)
        $('.plan-container-card .slick-prev').html(egPrev)
        $('.addOnsCard .slick-next').html(egNext)
        $('.addOnsCard .slick-prev').html(egPrev)
        $('.select-plan__categories-selection__container__categories .slick-next').html('<span>Next plan </span> <i class="fa fa-angle-right" aria-hidden="true"></i>')
        $('.select-plan__categories-selection__container__categories .slick-prev').html('<i class="fa fa-angle-left" aria-hidden="true"></i> <span>Previous plan</span>')
      }

    waitForElement('.select-plan__categories-selection__container__categories', init, 50, 10000);
    waitForElement('.select-plan__categories-selection__container__categories .slick-next', init2, 50, 10000);

})();


<style>
@media screen and (max-width:767px) {
    
    .plan-container-card .slick-active,
    .addOnsCard .slick-active,
    .select-plan__categories-selection__container__categories .slick-active{
        opacity: 1;
    }
    .addOnsCard .slick-slide .addOns.card{
        width: 100% !important;
    }
    .select-plan__categories-selection__container__categories .slick-slide .category-card {
        width: auto !important;
    }
    html body .plan-container-card .slick-arrow .fa,
    html body .addOnsCard .slick-arrow .fa,
    html body .select-plan__categories-selection__container__categories .slick-arrow .fa{
        font-size: 34px;
        color: #221e20;
    }
    html body .plan-container-card .slick-next:before, 
    html body .plan-container-card .slick-prev:before,
    html body .addOnsCard .slick-next:before, 
    html body .addOnsCard .slick-prev:before,
    html body .select-plan__categories-selection__container__categories .slick-next:before, 
    html body .select-plan__categories-selection__container__categories .slick-prev:before{
        display: none;
    }
    
    html body .plan-container-card .slick-prev, 
    html body .addOnsCard .slick-prev, 
    html body .select-plan__categories-selection__container__categories .slick-prev {
        color: #221e20;
        width: auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        top: auto;
        bottom: -20px;
        left: 0px;
        right: auto;
        font-size: 14px;
    }
    html body .plan-container-card .slick-next, 
    html body .addOnsCard .slick-next, 
    html body .select-plan__categories-selection__container__categories .slick-next {
        color: #221e20;
        right: 10px;
        width: auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        top: auto;
        bottom: -20px;
        font-size: 14px;
    }
    html body .plan-container-card .slick-prev, 
    html body .plan-container-card .slick-next{
        bottom: -20px !important;
    }
    html body .plan-container-card .slick-next span, html body .plan-container-card .slick-prev span, html body .addOnsCard .slick-next span, html body .addOnsCard .slick-prev span, html body .select-plan__categories-selection__container__categories .slick-next span, html body .select-plan__categories-selection__container__categories .slick-prev span {
        color: #221e20;
        display: inline-block !important;
        width: auto;
        line-height: 1;
        margin: 0px 6px;
        font-size: 14px;
    }
    html body .plan-container-card .slick-dots,
    html body .addOnsCard .slick-dots,
    html body .select-plan__categories-selection__container__categories .slick-dots{
        top: calc(100% + 10px);
    }
    html body .select-plan__fold-section .upgrade-your-world {
        margin-top: 80px;
        padding-right: 15px;
    }
    html body .container.select-plan__fold-section {
        padding-right: 0px;
    }
    
    html body .select-plan__fold-section .title-wrap {
        padding-right: 15px;
    }
    html body .select-plan__benfits-section {
        padding-right: 0px;
        padding-left: 15px;
    }
    
    html body .select-plan__categories-selection__container__categories {
        padding-right: 0px !important;
    }
    
    html body .select-plan__categories-selection__container__title,
    html body .container.shahry-addons-container {
        padding-right: 30px;
    }
    html body .contactFaq.container {
        width: calc(100% - 30px);
        left: -6px;
    }
 html body .slick-next[aria-disabled="true"] span, html body .slick-prev[aria-disabled="true"] span, html body .slick-next[aria-disabled="true"] i, html body .slick-prev[aria-disabled="true"] i {
color:#a5a3a3 !important;
    
}
}
</style>