/*
Template Name: Chris Store
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/
/*********************center_home****************/
.fade-carousel {
    position: relative;
    min-height: 600px;
}
.fade-carousel .carousel-inner .item {
    min-height: 600px;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 4px;
    opacity: .8;
}
.fade-carousel .carousel-indicators > li.active {
  opacity: 1;
}
/********************************/
/*          Hero Headers        */
/********************************/
.hero {
position: absolute;
width:40%;
top: 62%;
left:32%;
z-index: 2;
text-transform:capitalize;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}


.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s; 
-ms-transition: 2s all ease-in-out .1s; 
-o-transition: 2s all ease-in-out .1s; 
transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s; 
-ms-transition: 2s all ease-in-out .1s; 
-o-transition: 2s all ease-in-out .1s; 
transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
opacity: 1;
background:#930b166b;
}

/********************************/
/*          Custom Buttons      */
/********************************/

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  min-height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
     background-image: url(../img/1.jpg);
}
.fade-carousel .slides .slide-2 {
  background-image: url(../img/2.jpg);
}
.fade-carousel .slides .slide-3 {
  background-image: url(../img/3.jpg);
}
#center .carousel-indicators{
  bottom:0;
  }
.fade-carousel .carousel-indicators > li{
background: #fff;
border-color: #fff;
width:18px;
height:18px;
  }
.fade-carousel .carousel-indicators > li.active{
width:18px;
height:18px;
background:#fdd800;
border-color:#fdd800;
  }
/*********************center_home_end****************/

/*********************pay****************/
#pay{
padding-top:40px;
padding-bottom:40px; 
 }
.pay_1i span{
width:70px;
height:70px;
line-height:75px;
display:inline-block;
text-align:center;
background:#fff9d6;
font-size:30px;
border-radius:50%; 
color:#CC0000;
 }
.pay_1i span:hover{
background:#d3282e;
color:#fff; 
 }
/*********************pay_end****************/

/*********************prod****************/
#prod{
padding-top:40px;
padding-bottom:40px;
background:#fff8fa;
 }

.prod_2i{
position:relative; 
 }
.prod_2i2{
position:absolute;
width:100%;
padding:10px;
top:0;
 }
.prod_2i2 h6{
background:#fdd800;
display:inline-block;
width:50px;
height:50px;
line-height:50px;
border-radius:50%;
text-align:center;
color:#d3282e;
 }
.prod_2i3 ul li a{
background: #d3282e;
width:40px;
height:40px;
line-height:43px;
display:block;
text-align:center;
border-radius:50%;
color:#fff;
 }
.prod_2i3 ul li a:hover{
background:#fdd800;
color:#9f9667; 
 }
.prod_2i3 ul li{
margin-top:4px;
margin-bottom:4px;
 }
.prod_2i3{
position:absolute;
width:100%;
top:0;
padding:10px;
display:none;
 }
.prod_2i:hover .prod_2i3{
display:block;
 }
.prod_2ib h4 span{
text-decoration:line-through; 
 }
.prod_2ib{
padding:10px;
background:#fff; 
border: 1px solid #ffe2eb;
 }
.prod_2ib span{
font-size: 18px;
 } 
.prod_2ib p{
   margin-top: 5px;
 }  
.prod_2{
margin-top:30px; 
 }
/*********************prod_end****************/

/*********************sale****************/
.sale_i{
position:relative; 
 }
.sale_i2{
position:absolute;
top:0;
text-align:center;
width:100%;
background:#0000008c;
height:100%;
padding-top:85px; 
 }
/*********************sale_end****************/

/*********************cat****************/
#cat{
padding-top:40px;
padding-bottom:40px; 
 }
.cat_1i{
margin-top:30px; 
 }
#prod_o{
padding-top:40px;
padding-bottom:40px;
background:#fffce9;  
 }
/*********************cat_end****************/

/*********************news****************/
#news{
padding-top:40px;
padding-bottom:40px; 
 }
.news_2i2 h5{
display:inline-block;
background:#fdd800;
color:#9f9667;
padding:8px 8px 6px 8px; 
 }
.news_2i2{
position:absolute;
top:0;
width:100%;
padding-top:15px;
display:none; 
 }
.news_2i{
position:relative; 
 }
.news_2i:hover .news_2i2{
display:block;
 }
.news_2ib{
box-shadow: 0px 0px 7px 0px rgb(211 40 46 / 17%);
padding:10px; 
 }
.news_2ib hr{
  border-top: 1px solid #ffe7e8;
  margin-top: 10px;
  margin-bottom: 10px; 
 }
.news_2ib h5 a{
color: #c5a31b;
    font-weight: normal;
    margin: 0px 8px 0px 8px;
    font-size: 16px;
 } 
  
.testim_1i1 span{
background:#fdd800;
width:40px;
height:40px;
text-align:center;
line-height:40px;
display:inline-block;
color:#9f9667;
font-size:20px; 
 }
.testim_1i2i img{
float:left; 
margin-right:10px;
 }
.testim_1i2i{
margin-top:20px; 
 }
.testim_1i{
border:1px solid #fdd800;
padding:20px 15px;
background:#fff; 
position:relative;
margin-top:20px;
 }
.testim_1i .fa-quote-left{
  color: #d3282e;
 }
.testim_1i1{
position:absolute;
top:-20px; 
width:100%;
 }
 
/*********************news_end****************/


@media screen and (max-width : 767px){
.hero {
width: 100%;
left:50%;
text-align:center;
}
.hero br{
display:none; 
 }
.hero p{
text-align:left;
 }
.testim_1i2i h4{
text-align:left; 
 }
.testim_1i{
margin-top:30px; 
 }
.pay_1i {
margin-top:10px; 
 }
.pay_1i p{
text-align:left;
 }
.prod_2i3 {
top:110px!important; 
 }
.prod_2i {
margin-top:10px; 
 }
.sale_i {
margin-top:10px; 
 }
.cat_1i1 {
margin-top:10px;
margin-bottom:10px; 
 }
.cat_1i p{
text-align:left;
 }
.news_2ib {
text-align:center; 
 }
.news_2i {
margin-top:10px;  
 }
.news_2ib  p{
text-align:left; 
 }
.prod_2i1  img{
height:270px;  
 }
.hide-sm{
display:none; 
 }
}

@media (min-width:768px) and (max-width:991px) {
.hero br{
display:none; 
 }
.testim_1i2i img{
width:25px;
height:25px; 
 }
.cat_1i1 img{
min-height:470px; 
 }
 }
@media (min-width:992px) and (max-width:1200px) {
.hero br{
display:none; 
 }
.cat_1i1 img{
min-height:470px; 
 }
  }
@media (min-width:1201px) and (max-width:1255px) {

 }


/* Konten Utama */
.content {
    text-align: center;
    padding: 20px;
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
	flex: 3;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0px;
    border-top: 1px solid #ccc;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}

/* Tombol Navigasi */
.nav-item {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    text-align: center;
    flex: 1;
    padding: 0px 0;
    transition: all 0.3s ease-in-out;
}

.nav-item i {
    display: block;
    font-size: 20px;
    margin-bottom: 10px;
}

/* Efek Hover dan Aktif */
.nav-item:hover {
    color: #007bff;
}

/* Floating Center Button */
.center {
    position: relative;
    flex: 3;
    text-align: center;
}

.fab {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

/* Efek Hover Floating Button */
.fab:hover {
    background: #0056b3;
    transform: translateX(-50%) scale(1.1);
}

/* Responsif untuk layar kecil */
@media (max-width: 500px) {
    .nav-item {
        font-size: 12px;
    }
    .nav-item i {
        font-size: 18px;
    }
    .fab {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

    /* Sembunyikan di layar besar (misalnya di atas 768px) */
    @media screen and (min-width: 768px) {
      .bottom-nav {
        display: none;
      }
    }
	    @media screen and (min-width: 500px) {
      .bottom-nav {
        display: none;
      }
    }

        .scroll-button {
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .scroll-button.show {
            opacity: 1;
            visibility: visible;
        }
        .scroll-button:hover {
            background-color: #555;
        }