<style type="text/css">
    #album img {
        width: 100%;
    }

button:disabled,
button[disabled]{
    border: 1px solid #d3d3d3;
    background-color: #d3d3d3;
    color: #949494;
}


  .gallery-item label {
        width: 100%;
    }

.gallery-item img {
      width: 100%;
      height: 153px;
      border-radius: 10px;
}

.grid-clixar {
    background: #fff;padding: 10px;border-radius: 12px;display: grid;grid-template-columns: 90px auto 60px;grid-gap: 10px; box-shadow: 0px 0px 10px rgba(70, 70, 70, 0.2);
}

@media (min-width: 400px) {
    .grid-clixar  {
        width: 100%;
    }
}

@media (min-width: 500px) {
    .grid-clixar {
        width: 90%;
    }
}

@media (min-width: 1400px) {
    .grid-clixar {
        width: 100%;
    }
}

.clixar-img {
    width: 80px;height: 80px;
}

@media (max-width:576px) {
 .gallery-item img {
      width: 100%;
      height: 112px;
      border-radius: 10px;
    }

     .gallery-item label {
        width: 100%;
    }

    .grid-clixar {
        grid-template-columns: 70px auto 50px;
    }

    .clixar-img {
        width: 60px;height: 60px;
    }

}





@media (max-width: 1399px) {
    .header-title-mt-two {
        margin-top: 0px;
    }
}

.button-container {
    padding: 0px 10px;
}

.button-buy-now {
  appearance: button;
  display: block;
  backface-visibility: hidden;
  background-color: #174078;
  border-radius: 6px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 12px 0 0;
  outline: none;
  overflow: hidden;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-right: 20px;
}
.button-buy-now:hover {
    color: #fff;
}
.button-buy-now:disabled {
  cursor: default;
}

.button-buy-now:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

.button-container {
    width: 100%;
    bottom: 20px;
    left: 0;
    right: 0;
    position: fixed;
}

@media screen and (max-width: 400px) {
    .button-buy-now {
        width: 100%;
        margin-right: 0px;
    }
    .button-container {
        padding: 0 40px;
    }
}


.arrow-disabled {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
    user-select: none;
}

</style>

<div class="body-content position-rel overflow-h bg-gradient" style="height: 90vh;">
    <div class="section-thumb d-none d-sm-block">
        <img src="<?php echo base_url();?>files/assets/images/shape/clixar-bg.png" alt="thumb" style="object-fit: contain; height: auto; pointer-events: none;">
    </div>
    <div class="section-thumb d-sm-none">
        <img src="<?php echo base_url();?>files/assets/images/shape/clixar-bg-mobile.png" alt="thumb" style="object-fit: contain; height: auto;">
    </div>
    <div class="section-thumb-bottom d-sm-none">
        <!-- <img src="<?php echo base_url();?>files/assets/images/shape/body-bottom.png" alt="thumb" style="object-fit: contain; height: auto;"> -->
    </div>


    <div class="show--wrapper-area" style="overflow: auto;background: none;">
        
        <div class="header-title-mt-two">
            <div class="row justify-content-center gy-4" style="margin-bottom: 20px;">

                <!-- BEGIN: For Testing (Remove for production) -->
                <div class="grid-clixar">
                        <div>
                                                            <img class="clixar-img" src="http://d38x82mkkml5o1.cloudfront.net/SplashMania/ar/zoomi_hair/zoomi%20head.png">
                                                        
                        </div>
                        <div style="display: grid;align-content: center;">
                            <h5>Zoomi Avatar</h5>
                        </div>
                        <div style="display: grid;align-content: center;">
                        <!-- Use class="arrow-disabled" tabindex="-1" for disabled buttons -->
                            <a class="arrow-disabled" target="_blank" href="#" tabindex="-1">
                                <img src="https://glclix.co/files/assets/images/shape/right-button.png" style="width: 40px;">
                            </a>
                        </div>
                                    </div>
                                    <div class="grid-clixar">
                        <div>
                                                            <img class="clixar-img" src="http://d38x82mkkml5o1.cloudfront.net/SplashMania/ar/ombaking%27s_face/ombaking%20head.png">
                                                        
                        </div>
                        <div style="display: grid;align-content: center;">
                            <h5>Ombaking Avatar</h5>
                        </div>
                        <div style="display: grid;align-content: center;">
                            <a target="_blank" href="https://ombaavatar.glclixar.co?guest_id=NDUzMjM4&id=Mg==">
                                <img src="https://glclix.co/files/assets/images/shape/right-button.png" style="width: 40px;">
                            </a>
                        </div>
                                    </div>
                                    <div class="grid-clixar">
                        <div>
                                                            <img class="clixar-img" src="http://d38x82mkkml5o1.cloudfront.net/SplashMania/ar/max%27s_avatar/maxhead.png">
                                                        
                        </div>
                        <div style="display: grid;align-content: center;">
                            <h5>Max Avatar</h5>
                        </div>
                        <div style="display: grid;align-content: center;">
                            <a target="_blank" href="https://maxavatar.glclixar.co?guest_id=NDUzMjM4&id=Mw==">
                                <img src="https://glclix.co/files/assets/images/shape/right-button.png" style="width: 40px;">
                            </a>
                        </div>
                                    </div>
                                    <div class="grid-clixar">
                        <div>
                                                            <img class="clixar-img" src="http://d38x82mkkml5o1.cloudfront.net/SplashMania/ar/swaggy_b_avatar/swaggyhead.png">
                                                        
                        </div>
                        <div style="display: grid;align-content: center;">
                            <h5>Swaggy B Avatar</h5>
                        </div>
                        <div style="display: grid;align-content: center;">
                            <a target="_blank" href="https://swaggyavatar.glclixar.co?guest_id=NDUzMjM4&id=NA==">
                                <img src="https://glclix.co/files/assets/images/shape/right-button.png" style="width: 40px;">
                            </a>
                        </div>
                    </div>
                    <!-- END: For Testing (Remove for production) -->



                <?php
                foreach($getARObject as $value)
                {
                    $url = '';

                    if(!empty($value['ar_one']))
                    {
                        $url .= $value['ar_one'].',';
                    }
                    if(!empty($value['ar_two']))
                    {
                        $url .= $value['ar_two'].',';
                    }
                    if(!empty($value['ar_three']))
                    {
                        $url .= $value['ar_three'].',';
                    }
                    if(!empty($value['ar_four']))
                    {
                        $url .= $value['ar_four'].',';
                    }

                    $url = rtrim($url, ',');

                    ?>
                    <div class="grid-clixar">
                        <div>
                            <?php
                            if(!empty($value['image_preview']))
                            {                                                   
                            ?>
                                <img class="clixar-img" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $value['image_preview'];?>">
                            <?php 
                            }
                            else
                            {
                                ?>
                                <img class="clixar-img" src="<?=base_url()?>files/assets/images/zoomihead.png">
                                <?php
                            }
                            ?>                            
                        </div>
                        <div style="display: grid;align-content: center;">
                            <h5><?=$value['title']?></h5>
                        </div>
                        <div style="display: grid;align-content: center;">
                            <a target="_blank" href="<?=$value['domain_name']?>?guest_id=<?=base64_encode($userdata['id'])?>&id=<?=base64_encode($value['id'])?>">
                                <img src="<?php echo base_url();?>files/assets/images/shape/right-button.png" style="width: 40px;">
                            </a>
                        </div>
                    </div>
                <?php }
                ?>
            </div>
        </div>

    </div>

    <div class="button-container" style="display: flex; justify-content: end; align-items: center;">
            <a href="#" class="button-buy-now">
            <span>Buy Now</span>
            <svg xmlns="http://www.w3.org/2000/svg" style="fill: white; width: 20px; margin-left: 2px;" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 3c0 .55.45 1 1 1h1l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h11c.55 0 1-.45 1-1s-.45-1-1-1H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.67-1.43c-.16-.35-.52-.57-.9-.57H2c-.55 0-1 .45-1 1zm16 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
            </a>                    
    </div>



</div>






<script src="<?php echo base_url();?>files/assets/js/lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
</script>

