/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");


  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Balinese&display=swap');


  @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&family=Lobster&family=Lobster+Two&display=swap');



/*
  font-family: 'Dancing Script', cursive;
  font-family: 'Lobster', sans-serif;
  font-family: 'Lobster Two', sans-serif;
  font-family: 'Noto Serif Balinese', serif;
*/





* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}




:root {
  --gold-color:rgb(213 175 92);
  --main-color:rgb(20 63 51);
  --dark-main-color:rgb(20 63 51);
  --font-1:'Noto Serif Balinese', serif;
  --font-2: 'Dancing Script', cursive;
  --font-3: 'Lobster Two', sans-serif;
  }




a{
  color:inherit;
  text-decoration: none;
}


body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.2 "Lato", sans-serif;
  color: #777;

  }
  




/* WHATSAPP FIXED ICON */
.chat{
  position:fixed;
   top:93%;
   display:flex;
   justify-content:right;
   align-items:right;
  right:20px;
  z-index: 99999;
  
  }
  
  .chat-text{
  
  width:110px;
  text-align:center;
  border-radius:8px;
  line-height:1.7;
  font-weight:500;
   height:27px;
   display:none;

  }
  
  .whatsapp-img{
  border-radius:20%;
  height:60px;
   width:60px;
  margin-top:-9px;
  animation: scaleUp 3s ease-in-out infinite;
  }


  @keyframes scaleUp {

      0%,
      100% { transform: translateY(0) scale(1); }
      
      50% { transform: translateY(-5px) scale(1.05);}
      
      }


      #heading-1 {
        background-color: white;
        height: 150px;
        color: black;
        display: flex;
        justify-content: center;
        gap: 33px;
        position: fixed;
        width: 100%;
        top: 0px;
        z-index: 45;
        font-family: 'Pacifico', cursive;
      }
      
      .shop-icon {
        position: absolute;
        right: 25px;
        top: 50px;
      }
      
      .logo-card {
        text-align: center;
        font-size: 10px;
        position: relative;
        top: -50px;
        display: flex;
        flex-direction: column;
      }
      
      .logo-card img{
      width:200px;
       }  
      
      
       .logo-card h1{
      position:relative;
      top:100px;
      font-family: 'Noto Serif Balinese', serif;
       }  
      
      
      .menu-btns {
        position: absolute;
        left: 17px;
        z-index: 1;
        top: 53px;
        width: 30px;
        height: 30px;
        color: var(--color-light-purple);
        display: flex;
        justify-content: center;
      }
      
      .menu-btns i {
        font-size: 40px;
      }
      

         /*
       HEADER 2222
      HEADER 2222
      HEADER 2222
      HEADER 2222
       

#heading-2{
background-color:  rgb(255, 255, 255);
width:100%;
height:95px;
position:fixed;
display: flex;
justify-content: center;
z-index: 20;
border-bottom:2px solid rgba(128, 128, 128, 0.171);
       }
         
      
      
.logo-card{
position:relative;
top:-197px;
right:150px;
}  
       
.logo-card img{
width:280px;
 }  

.menu-btns {
position: absolute;
right: 27px;
z-index: 1;
top: 22px;
width: 30px;
height: 30px;
color: var(--main-color);
display: flex;
justify-content: center;
}

.menu-btns i {
font-size: 40px;
}

*/

#menu-bar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
background-color: rgb(255, 255, 255);
height: 100%;
transition: all 0.4s ease 0s;
top: 95px;
width: 100%;
gap: 20px;
right: 0px;
z-index: 4;
overflow: hidden;
text-align: left;
box-shadow: rgba(128, 128, 128, 0.45) 0px 1px 0px;
position: fixed;
}

#menu-bar img {
position:relative;
top:-20px;
width: 170px;
  }

.nav-link a {
text-decoration: none;
color: var(--dark-main-color);
font-weight: 400;
font-size: 27px;
font-family: var(--font-1);
}

.nav-link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin: 26px;
font-weight: bold;
font-family: var(--font-2);
top:-70px;
}

#special-btn {
background-color: var(--color-dark-purple);
width: 130px;
text-align: center;
line-height: 2.2;
color: white;
border-radius: 5px;
}

#special-btn a {
color: white;
}



.slide {
left: -100%;
}

.hide {
visibility: hidden;
z-index: 1;
}

.open {
position: absolute;
}





/* HOME 
CONTENTS
STYLE RULES */

.home-img,.home-big-img{
	width:100%;

   }
   
   
   @keyframes zoomInOut{
   0%,100%{
	transform:scale(1);
   }
   
   50%{
	transform:scale(1.3);
   }
   
   
   }





 
   
    /* Slideshow container */
     /* Slideshow container */
  /* Slideshow container */
   
    
     /* Slideshow container */
     .slideshow-container {
         display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: relative;
      padding-top:420px;
      
     }
     
     /* Caption text */
     .text {
       color: black;
       font-size: 15px;
       padding: 8px 12px;
       position: absolute;
       bottom: 8px;
       width: 80%;
       text-align: center;
     
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     
     
     
     /* The dots/bullets/indicators */
     .dot {
       height: 10px;
       width: 10px;
     
       background-color: #bbb;
       border-radius: 50%;
       display: inline-block;
       transition: background-color 0.6s ease;
     }
     
     .active {
       background-color: #717171;
     }
     
     /* Fading animation */
     .fade {
       animation-name: fade;
       animation-duration: 1.5s;
      
     }
     
     @keyframes fade {
       from {opacity: .4} 
       to {opacity: 1}
     }
     
    
     .text-child{
      background-color: rgba(39, 39, 46, 0.395);
      padding: 10px;
      border-radius: 5px;
      text-align: left;
      
          }
      
          .text-child h5, p{
        padding-left: 20px;
        padding-top:20px;
          }
      
          .text-child h5{
          color: var(--gold-color);
          font-size: 17px;
          font-family: var(--font-1);
          }
      
          .text-child p{
           font-size: 30px;
           color: white;
           padding-bottom:20px;
         
          }
      
      .btn{
          padding-top:30px;
          display: flex;
      }
      
     .btn button{
         
          padding: 13px;
          background-color: rgba(0, 0, 0, 0.118);
          border-radius: 5px;
          width: 200px;
          font-size: 14px;
          color: var(--gold-color);
          border:2px solid var(--gold-color);
          font-weight: bold;
          
      }


/*
PAYMENT AND FOOTER STYLE RULES */




#payment-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-bottom: 3ch;
}

#payment-logo div {
  display: flex;
  gap: 20px;
}

#payment-logo img {
  width: 60px;
  height: 40px;
  border: 1px solid rgb(205, 199, 199);
}

footer {
  text-align: center;
  padding: 20px;
  font-weight: 500;
}

footer a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}