@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  user-select: none;
    margin: 0px !important;
    padding: 0px !important;
    font-family: 'Rubik', sans-serif !important;
    overflow-x: hidden;
}
.background-common{background-color: #25242B;}
.text-common-r{color: #42131A;}
.bg-gold{background: linear-gradient(178deg, rgba(233,196,114,1) 50%, #BB9F63 100%, #BB9F63 100%);}
.text-md{font-size: 17px;}
.font-300{font-weight: 300;}
.text-btn{font-size: 16px;}
.bg-toggle{color: #A32028;}
.toggle{display: none;}


.main-slider{
    background-image: url(../img/main-bg.png);
    /* min-height: 742px; */
    /* background-position:center;
    background-size: cover;
    background-repeat: no-repeat; 
    /* object-fit: cover; */
  
}
@media screen and (min-width:1000px) {

  .main-slider{
    background-image: url(../img/main-bg.png);
    min-height: 742px;
    /* background-position:center;
    background-size: cover;
    background-repeat: no-repeat; 
    /* object-fit: cover; */
  
}
}




.custom-button {
  background-color: #FFD700; /* Set your initial background color */
  transition: background-color 0.3s ease; /* Add a smooth transition effect */
}

.custom-button:hover {
  background-color: #C0C0C0; /* Set the background color on hover */
}



.border-body{border: 2px dashed #8a87984d;}
.text-gold{
    background: linear-gradient(0deg, rgba(233,196,114,1) 0%, rgba(232,204,145,1) 100%, rgba(232,204,145,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
img{
    max-width: 100%;
    margin: 0px;
    height: auto;
}
.animate-img img{transition: .7s;}
.animate-img:hover > img{transition: .7s;transform: scale(1.05);}

[data-aos] {
    transition-timing-function: cubic-bezier(0.15, 0.06, 0.95, 1.08);
}
[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
    transition-duration: .6s;
}

.background-img {
    background-image: url(../img/faq.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
}
.btn-white{background-color: #56555F;}
.btn-active{background-color: #BABAC2;}
.footer-bg {
    background-image: url(../img/footer-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
    width: 100%;
}
swiper-container {
    width: 100%;
    height: 100%;
  }
  swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .text p {
    display: inline-block;
    vertical-align: top;
    margin: 0;
  }
  .word {
    position: absolute;
    width: auto;
    opacity: 0;
  }
  .letter {
    display: inline-block;
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
  } 
  .swiper-pagination-bullet-active {
    background-color: #2B2A39;  /* Customize the color for the active bullet */
}

.swiper-pagination-bullet {
    background-color: lightgray;  /* Customize the color for regular bullets */
 

    margin: 0 5px; /* Adjust the spacing between bullets horizontally */
    padding: 10px; /* Adjust the spacing between bullets vertically */
}


/*  */

.texture{
  background-image: url("/assets/img/textture.png");
  background-position: center;
  background-size: cover;
  z-index: 999999;
}



.swiper-pagination {
  margin-top: 15px;
  margin-bottom: 15px;
}



.swiper-pagination-bullet-active {
  transform: scale(1.5); /* Adjust the scale for the active bullet */
}


/* 
.disabledLink {
  pointer-events: none;
 
} */
/*  */










  .letter.out { transform: rotateX(90deg); transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);}  
  .letter.behind { transform: rotateX(-90deg);}  
  .letter.in {transform: rotateX(0deg); transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);}  
  .wisteria {color: #8e44ad;}  
  .belize {color: #2980b9;}  
  .pomegranate {color: #c0392b;}  
  .green {color: #16a085;}  
  .midnight {color: #2c3e50;}
  .background-before{ position: relative;}

.background-before::before{
  position: absolute;
  content: '';
  width: 31%;
  height: 80%;
  /* background: linear-gradient(270deg, rgb(35 34 40 / 45%) 0%, rgb(37 36 43) 100%); */
  left: 40px;
  top: 50px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
  overflow: hidden;
  }
  .background-before::after{
    position: absolute;
    content: '';
    width: 35%;
    height: 80%;
    /* background:linear-gradient(90deg, rgb(35 34 40 / 45%) 0%, rgb(37 36 43) 100%);  */
    top: 50px;
    right: 5px;
    bottom: 0px;
    z-index: 10;
    overflow: hidden;
    }
    @media screen and (max-width:479px) {
      .background-before::before {
        width: 0%;
      }
      .background-before::after {
        width: 0%;
      }
      swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px !important;
        height: 100% !important;
        margin-right: 0px !important;
      }
    }
    @media screen and (min-width:480px) and (max-width:1350px) {
      .background-before::before {
        width: 0%;
        height: 95%;
        background: linear-gradient(270deg, rgb(35 34 40 / 49%) 0%, rgb(37 36 43) 100%);
        left: 0px;
        top: 23px;        
      }
      .background-before::after {
        width: 0%;
        height: 95%;
        background: linear-gradient(270deg, rgb(35 34 40 / 49%) 0%, rgb(37 36 43) 100%);
        right: 0px;
        top: 23px;       
      }
    }
    .img-rotate{
      position: relative;
      animation: mymove 5s infinite;
    }    
    @keyframes mymove {
      50% {transform: rotate(7deg);}}
    
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 10;
      
      }