<!-- <div class="row" id="banner">
<?php foreach ($categories as $catagory) : ?> 
<?php if ($catagory->status == '1') : ?> 
    <div class="col-6" style="padding-right: 2px; padding-left: 2px;">
        <a href="<?= base_url() .'category/' . $catagory->alias; ?>" > 
            <img style="width:100%; height:auto; padding-bottom: 3px;" src="<?= base_url() . 'uploads/category/' . $catagory->image_mobile; ?>">

            <div class="col-12" style="background-color: rgba(137,133,190,0.7); font-size: 13px; margin-top: -34px; bottom: 3px; position: absolute; color: white; width: 98% !important ; height: 25px; line-height: 13px; padding-top: 5px;  " > 
                <?php if($this->session->userdata('site_lang') == 'english') : ?>
                    <?= $catagory->category_en; ?>
                <?php else : ?>
                    <?= $catagory->category; ?>
                <?php endif; ?> 
            </div> 
        </a> 
    </div>
<?php endif; ?>

<?php endforeach; ?>
</div> -->

<!-- <div class="row" style="margin-top:10px;" id="web"> 
  <div class="col-md-12" style="padding-right: 2px; padding-left: 2px;">
    <a href="<?= $static_banners->banner1_link; ?>"><img style="width: 100%; 
    height: auto;
    margin: 0 0 -20px;" src="<?= base_url() . 'uploads/page/' . $static_banners->banner1_image; ?>" alt=""></a>
  </div> 
</div> --> 
<?php  
if ($this->session->userdata('site_lang') == 'english') {
    // 1
    $static_banners->banner1_title = $static_banners->banner1_title_en;
    $static_banners->banner1_button = $static_banners->banner1_button_en;
    $static_banners->banner1_text = $static_banners->banner1_text_en;

    // 2
    $static_banners->banner2_title = $static_banners->banner2_title_en;
    $static_banners->banner2_button = $static_banners->banner2_button_en;
    $static_banners->banner2_text = $static_banners->banner2_text_en;

    // 3
    $static_banners->banner3_title = $static_banners->banner3_title_en;
    $static_banners->banner3_button = $static_banners->banner3_button_en;
    $static_banners->banner3_text = $static_banners->banner3_text;

    // 4
    $static_banners->banner4_title = $static_banners->banner4_title_en;
    $static_banners->banner4_button = $static_banners->banner4_button_en;
    $static_banners->banner4_text = $static_banners->banner4_text_en;
}
?>
<?php if ($t_case == 'banner1'): ?>
  <div class="cosmetics-home-intro-area" style="<?= $bg_section_color; ?>">
    <div class="container">
      <div class="row align-items-center">
         <div class="col-md-6 mb-30 mt-30 pr-45 pr-sm-15 pr-xs-15 pr-xxs-15">
            <!-- <div class="cosmetics-home-intro">
               <h2 class="title"><?= $static_banners->banner1_title; ?></h2>
               <div class="description">
                  <?= $static_banners->banner1_text; ?>
               </div>
               <?php if ($static_banners->banner1_button != ''): ?>
                   <a style="margin-top: 15px;" href="<?= $static_banners->banner1_link; ?>" class="button button--medium button--icon--left"><?= $static_banners->banner1_button; ?></a>
               <?php endif ?> 
            </div> -->
            <div class="single-banner-image text-center text-md-right" style="background: url('<?= base_url() . 'uploads/page/' . $static_banners->banner1_image; ?>'); background-size: cover;background-repeat: no-repeat;background-position: center;">
              <a style="width: 100%;" href="<?= $static_banners->banner1_link; ?>">
                <img style="visibility: hidden;" src="<?= base_url() . 'uploads/page/' . $static_banners->banner1_image; ?>" class="img-fluid" alt="">
              </a> 
            </div>
         </div>

         <div class="col-md-6 mb-30 mt-30 pl-45 pl-sm-15 pl-xs-15 pl-xxs-15">
            <!--=======  single image  =======-->
            <div class="single-banner-image text-center text-md-right" style="background: url('<?= base_url() . 'uploads/page/' . $static_banners->banner2_image; ?>'); background-size: cover;background-repeat: no-repeat;background-position: center;">
              <a style="width: 100%;" href="<?= $static_banners->banner2_link; ?>">
                <img style="visibility: hidden;" src="<?= base_url() . 'uploads/page/' . $static_banners->banner2_image; ?>" class="img-fluid" alt="">
              </a>  

            </div>
            <!--=======  End of single image  =======-->
         </div>
      </div>
    </div>
  </div>
<?php elseif ($t_case == 'banner2-3'): ?>
   <!-- <div class="single-category-revolution-1 col-lg-4 offset-lg-1 col-md-6" data-aos="fade-up">

      <div class="single-category single-category--cosmetics-home single-category--one">

         <div class="single-category__image single-category__image--one" style="background: url('<?= base_url() . 'uploads/page/' . $static_banners->banner2_image; ?>'); background-size: cover;background-repeat: no-repeat;background-position: center;">
            <img style="visibility: hidden;" src="<?= base_url() . 'uploads/page/' . $static_banners->banner2_image; ?>" class="img-fluid" alt="">
         </div>

         <div class="single-category__content single-category__content--one mt-25 mb-25" >
            <div>
               <?= $static_banners->banner2_title; ?>
            </div>
         </div>

         <a href="<?= $static_banners->banner2_link; ?>" class="banner-link"></a>

      </div>

  </div> --> 
  <!-- <div class="single-category-revolution-2 col-lg-6 offset-lg-1 col-md-6 mt-100" data-aos="fade-down">

      <div class="revolution-banner-area">
         <div id="rev_slider_18_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.7">
            <ul>

               <li data-index="rs-48" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300"  data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">

                  <img src="<?= base_url('themes/'.$theme.'/'); ?>assets/images/revimages/transparent.png"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>

                  <div class="tp-caption tp-shape tp-shapewrapper  tp-resizeme" 
                     id="slide-48-layer-2" 
                     data-x="['left','left','left','left']" data-hoffset="['51','51','105','105']" 
                     data-y="['top','top','top','top']" data-voffset="['131','131','129','129']" 
                     data-width="300"
                     data-height="300"
                     data-whitespace="nowrap"
                     data-type="shape" 
                     data-responsive_offset="on" 
                     data-frames='[{"delay":310,"speed":1320,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;sX:0.8;sY:0.8;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power4.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     style="z-index: 5;background-color:rgb(242,242,242);border-radius:150px 150px 150px 150px;"> </div>

                  <div class="tp-caption   tp-resizeme" 
                     id="slide-48-layer-1" 
                     data-x="['left','left','left','left']" data-hoffset="['0','0','52','52']" 
                     data-y="['top','top','top','top']" data-voffset="['-5','-5','11','11']" 
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"
                     data-type="image" 
                     data-responsive_offset="on" 
                     data-frames='[{"delay":550,"speed":1860,"frame":"0","from":"z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;","to":"o:1;","ease":"Power2.easeOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     style="z-index: 6;">
                     <div class="rs-looped rs-slideloop"  data-easing="" data-speed="2" data-xs="0" data-xe="0" data-ys="0" data-ye="20"><img src="<?= base_url() . 'uploads/page/' . $static_banners->banner3_image; ?>" alt="" data-ww="['456px','456px','456px','456px']" data-hh="['582px','582px','582px','582px']" data-no-retina> </div>
                  </div>

                  <div class="tp-caption   tp-resizeme" 
                     id="slide-48-layer-3" 
                     data-x="['left','left','left','left']" data-hoffset="['331','331','392','392']" 
                     data-y="['top','top','top','top']" data-voffset="['224','224','226','226']" 
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"
                     data-type="text" 
                     data-responsive_offset="on" 
                     data-frames='[{"delay":550,"speed":1850,"frame":"0","from":"y:50px;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;","ease":"Power3.easeInOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     style="z-index: 7; white-space: nowrap; font-size: 35px; line-height: 48px; font-weight: 400; color: #2B286E; letter-spacing: 0px;"> 
                      <?= $static_banners->banner3_title; ?> 
                  </div>
               </li>
            </ul>
            <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
         </div>
      </div>

  </div> -->
<?php else: ?>
  <div class="countdown-timer-area countdown-background countdown-bg-2 pt-30" style="<?= $bg_section_color; ?>">
    <div class="countdown-timer-img div_banner_3" style="background: url('<?= base_url() . 'uploads/page/' . $static_banners->banner3_image; ?>'); background-size:100% 100%; position:relative;">
      <a style="width: 100%;" href="<?= $static_banners->banner3_link; ?>">
        <img class="div_banner_3_desktop" src="<?= base_url() . 'uploads/page/' . $static_banners->banner3_image; ?>" alt="" style="/*height: 330px;*/ width: 100%; visibility: hidden;">
        <img class="div_banner_3_mobile" src="<?= base_url() . 'uploads/page/' . $static_banners->banner3_mobile_image; ?>" alt="" style="/*height: 330px;*/ width: 100%; visibility: hidden; display: none;">
      </a>
      <div id="homeBannerDescription" style="position:absolute; top: 0; left: 0; z-index:100">
        <?= $static_banners->banner3_text; ?>
        <a href="<?= $static_banners->banner3_link; ?>">DISCOVER THE HABIT</a>
      </div>
    </div>
     <!-- <div class="container">
        <div class="row">
           <div class="col-lg-12">
              <div class="row">
                 <div class="countdown-timer-cover col-12 col-xl-7 offset-xl-5 col-lg-8 offset-lg-4">
                    <div class="countdown-wrapper text-center">
                       <h3 class="countdown-title">
                          <?= $static_banners->banner4_title; ?>
                       </h3>
                       <p class="description">
                          <?= $static_banners->banner4_text; ?>
                       </p> 
                     <?php if ($static_banners->banner4_button != ''): ?> 
                           <a href="<?= $static_banners->banner4_link; ?>" class="button button--medium button--icon--left"><?= $static_banners->banner4_button; ?></a> 
                     <?php endif ?>
                    </div>
                 </div>
              </div>
           </div>
        </div>
     </div> -->
  </div>
<?php endif; ?> 

<style>
  .countdown-timer-cover{
    margin: auto !important;
  } 
  .cosmetics-category-area .single-category-revolution-2 .tp-revslider-mainul .tp-parallax-wrap:nth-child(4) .tp-caption.tp-resizeme *{
    white-space: normal !important;
    width: 300px;
    /*font-size: 13px !important;*/
  }

  .countdown-timer-area img{
    visibility: hidden;
  }
  .countdown-timer-area .countdown-timer-img{
    /* background-size: cover !important; */
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }
  @media (max-width: 450px){
    .div_banner_3{
      background: url('<?= base_url() . 'uploads/page/' . $static_banners->banner3_mobile_image; ?>') !important; 
      background-size:cover !important;
      margin-left: 15px !important;
      margin-right: 15px !important;
      min-height:490px;
    }

    /*.div_banner_3 a img{
      height: auto !important;
      min-height: 330px !important;
      content:url('<?= base_url() . 'uploads/page/' . $static_banners->banner3_mobile_image; ?>') !important;
    }*/
    .cosmetics-home-intro-area .cosmetics-home-intro{
      margin-top: 20px !important;
    }
    .cosmetics-home-intro-area .col-md-6.mb-30:first-child{
      margin-bottom: 0px !important;
    }
    .cosmetics-home-intro-area .cosmetics-home-intro div.description p{
      font-size: 12px;
    }
    .cosmetics-home-intro-area .cosmetics-home-intro .title{
      line-height: 35px;
      margin-bottom: 5px;
    }
    .cosmetics-home-intro-area .cosmetics-home-intro .title p{
      font-size: 22px;
    }
    .cosmetics-home-intro-area .cosmetics-home-intro .button.button--icon--left{
      font-size: 12px;
      padding: 5px 20px;
      margin-top: 10px;
    }

    .cosmetics-home-intro-area .single-banner-image img.img-fluid{
      height: auto;
    }

    .cosmetics-category-area{
      margin-bottom: 30px !important;
    }
    .cosmetics-category-area .single-category__image img.img-fluid{
      height: 250px;
    }
    .cosmetics-category-area .single-category__content p{
      font-size: 12px;
      margin-bottom:0px;
      line-height: 17px;
    }
    .single-category-revolution-1 .single-category__content--one{
      margin-top: 10px !important;
      margin-bottom: 10px !important;
    }
    .cosmetics-category-area .single-category-revolution-2{
      margin-top: 0px !important;
    }
    .cosmetics-category-area .single-category-revolution-2 .tp-revslider-mainul .tp-parallax-wrap:nth-child(4){
      left: 180px !important;
    }
    .cosmetics-category-area .single-category-revolution-2 .tp-revslider-mainul .tp-parallax-wrap:nth-child(4) .tp-caption.tp-resizeme *{
      white-space: normal !important;
      width: 200px;
      font-size: 17px !important;
    }

    .countdown-timer-area img:not(.div_banner_3_mobile){
      height: 220px !important;
    }

    .div_banner_3_desktop{
      display: none;
    }
    .div_banner_3_mobile{
      height: auto !important;
      display: initial !important;
    }
    
    .countdown-timer-area .countdown-wrapper .countdown-title{
      margin-bottom: 5px;
      margin-top: 10px;
    }
    

    .section-title-container .section-title.section-title--one h2{
      font-size: 25px;
      line-height: 25px;
    }

    .instagram-slider-area .instagram-section-intro p{ 
      margin-bottom: 5px !important;
    }
    .instagram-slider-area .instagram-section-intro p a{
      font-size: 13px !important;
      line-height: 15px !important;
    }
    .instagram-slider-area .instagram-section-intro h3{
      font-size: 23px !important;
      margin-top: 5px !important;
      line-height: 23px !important;
    }
  } 
</style>