* {
    font-family: "Poppins", sans-serif;   
}

@font-face {
  font-family: GloryBold;
  src: url(./fonts/Gilroy-Bold.ttf);
  font-weight: bold;
}

.glory-font {
  font-family: GloryBold;
}

.btn1{
    transition: all 0.1s ease-out;
}
.btn1:hover{
    background-color: #fdcd5d;
}

/* Spinner styles for payment loading */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden {
    display: none;
}
.btn2{
    transition: all 0.1s ease-out;
}
.btn2:hover{
    background-color: #f5e5c1;
}
.btn3{
    transition: all 0.1s ease-out;
}
.btn3:hover{
    background-color: #554d4d;
}
.subscirbe-box{
    transition: all 0.1s ease-out;
}
.subscirbe-box:hover{
    background-color: #F8EED8;
}
.left-arrow{
    position: absolute;
    left: -120px;
}
.right-arrow{
    position: absolute;
    right: -120px;
}
@media only screen and (max-width: 880px) {
    .left-arrow{
        position: absolute;
        left: 50px;
        top: 180px;
    }
    .right-arrow{
        position: absolute;
        left: 170px;
        top: 180px;
    }
  }
  @media only screen and (max-width: 450px) {
    .left-arrow{
        position: absolute;
        left: 50px;
        top: 210px;
    }
    .right-arrow{
        position: absolute;
        left: 170px;
        top: 210px;
    }
  }

  /* Add this if you're not using Tailwind's transition classes */
  #modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  #modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
  }
  
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  #modal:not(.hidden) .modal-backdrop {
    opacity: 1;
  }
  
  .modal-content {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  #modal:not(.hidden) .modal-content {
    opacity: 1;
    transform: translateY(0);
  }  
  @media only screen and (max-width: 850px) {
    .modal-content{
        width: 100%;
    }
  }
  .sign-btn:hover{
    background-color:  #6e6262;
  }
  .login-btn{
    transition: all .2s ease-in-out;
  }
  .login-btn:hover{
    background-color:  #432C2C;
    color: white;
  }
  .active-text {
    font-weight: bold !important;
    color: #000 !important;
}
p-sizing {
  font-size: 17px !important;
  font-weight: 500 !important;
}