body, html{
 margin: 0;
 padding: 0;
 background-color: #222222;
 font-size: 16px;
}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* scroll bar */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;

}
::-webkit-scrollbar-track {
  background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
  background-color: #21A7EC;
  border-radius: 10px;
}

/* Firefox */
html {
  scrollbar-color: #21A7EC #1e1e1e;
  scrollbar-width: thin;
}


.gap-line{
  height: 10px;
  background-color: #21A7EC ;
  width: 100%;
}
section{
  height: 100vh;
}

h1, h2, h2, h4{
  /* font-family: "Cinzel", serif; */
  font-family: 'Segoe UI', sans-serif;
}
h1{
  color: #fff;
  font-size: 4rem;
  margin-bottom: 30px;
  text-transform: capitalize;
 }
 p{
  font-size: 2rem;
  color: #fff;
 }

 .btn-send{
  border: none;
  background-color: #000;
  color: #fff;
  height: 40px;
  padding: 0 60px;
  margin-top: 20px;
 }
 .btn-send:hover{
   box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
 }
.navbar .active{
  color: #000!important;
 background-color: #fff;
 border-radius: 29px;

}
.navbar-nav .nav-link{
  width: 100%;
  padding: 10px 22px !important;
}

.navbar{
    z-index: 1000;
    top: 0;
    height: 40px;
    width: 100%;
    background-color: transparent;
    color: #fff;
    display: flex;
    justify-content: space-between;
    position: fixed;
    padding: 30px 20px;
}
.navbar a{
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    /* margin: 0 15px; */
   text-transform: capitalize;
    /* width: 100%; */
}


.navbar a:hover{
  color: #888;
}
.navbar-custom {
  transition: background-color 0.3s ease;
  background-color: transparent;

}

.navbar-scrolled {
  background-color:#222222;

}
.navbar-expand-lg .navbar-nav{
  background-color: #2E2C2E;
  border-radius: 28px;
}

.navbar-toggler .bi{
  font-size: 25px;
  color: #007bff;
}

/*  */
.logo-text {
  color: white;
  font-size: 28px;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
  z-index: 1;
}



.herosection {
  position: relative;
  height: 100vh;
  min-height: 400px;
  background-image: url(assets/img/cashibg.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* transition: opacity 1s ease-in-out; */
}

.herosection .bi{
  background-color: #000;
  padding: 9px 15px;
  border-radius: 50%;
  position: absolute;
  color: #007bff;
  font-size: 25px;
  bottom: 40px;
  animation: upDown 1.5s ease-in-out infinite;
}
@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Move up */
  }
}
.herosection .bi:hover{
  animation: none;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
/* CPA help */
.cpa-help{
  display: flex;
 align-items: center;
}

.cpa-help h1{
 color: #fff;
 font-size: 4rem;
}

/* CPA Customer */
.cpa-customer{
  background-image: url(assets/img/cashibgleft.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
 align-items: center;
 color: #fff;
}
.cpa-customer h1{
  color: #fff;
  font-size: 4rem;
  margin-bottom: 30px;
  text-transform: uppercase;
 }
 .cpa-customer p{
  font-size: 2rem;
 }
 .cpa-offer{
  width: 100%;
  height: 100%;
  background-image: url(assets/img/cashibgright.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
 }
.cashi-loyalti{
  padding: 90px 0;
   height: auto;
   width: 90%;
   margin-top: 60px;
   margin-left: 5%;
   border-radius: 20px;
    display: flex;
 align-items: center;
 background: linear-gradient(67deg, #C0AE65 0%, #896331 91%);
  /* background-image: url(assets/img/cashibgright.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position:right; */
  text-align: center;
}
  .glass-card {
      position: relative;
      width: 100%;
      height: 90vh;
      background: rgba(255, 255, 255, 0.051);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
      color: white;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

  .cashi-loyalti h4{
    color: #48320C;
    text-transform: capitalize;
     font-size: 2rem;
  }

   .cashi-loyalti p{
    font-size: 24px;
    color: #48320C;
    font-weight: 500;
   }
  
   .cashi-loyalti img{
     height: 100px;
     width: 100%;
     object-fit: contain;
   }

   .cashi-video{
    background-color: #000;
    margin: 60px 0;
    width: 100%;
     display: flex;
    align-items: center;
 
   }
 
  .cpa-get{
    display: flex;
    align-items: center;
     background-image: url(assets/img/cashibgright.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  }
   .cpa-lm{
      display: flex;
    align-items: center;
     background-image: url(assets/img/cashibgleft.png);
  background-repeat: no-repeat;
  background-size: contain;

   }
    .cpa-lm ul li{
       color: #fff;
       font-size: 22px;
   }
   .cpa-get ul li{
       color: #fff;
       font-size: 22px;
   }

   .cashi-contact-header{
  /* height: 100vh;
  background-image: url(assets/img/cashibg.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-ite
  s: center;
  justify-content: center; */
   }

   .cashi-contact h4{
        color: #fff;
   }
   .box-contatct{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    padding: 40px 20px;
    background-color: #2e2c2e;
    height: 100%;
    width: 100%;
    color: #fff;
   }
   .box-contatct .form-control{
    background-color: transparent;
    color: #ccc;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 2px solid #fff;
    border-radius: 0px;
   }
   .box-contatct label{
     color: #ccc;
   }
   .box-contatct .bi{
    color: #007bff;
   }
   .box-contatct .form-floating>textarea:focus~label::after{
    background-color: transparent;
   }
   .box-contatct .form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid#0d6efd;
    color: #0d6efd;
   }
   .box-contatct .form-control:focus-within label {
    color: #0d6efd; /* or any focus color */
  }

   input:focus + label {
    color: #007bff; /* Bootstrap's primary blue */
  }
  textarea:focus + label {
    color: #007bff; /* Bootstrap's primary blue */
  }
  .contact-details{
    padding: 40px 0;
    margin: 60px 0;
  }
  .contact-details h4{
    color: #fff;
  }
  .contact-details  .bi{
color: #e0f7fa;
  }
  .custom-file-upload-wrapper {
    position: relative;
    height: 58px; /* match form-floating input */
  }
 
  .custom-file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
  }

  .custom-file-upload-wrapper .custom-file-button {
    height: 100%;
    width: 100%;
    padding: 0.375rem 0.75rem;
   background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    pointer-events: none; /* allow clicks to go to hidden input */
  }

  .custom-file-upload-wrapper .filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
  }

  .custom-file-upload-wrapper .upload-label {
    color: #0d6efd;
    margin-left: auto;
    padding-left: 1rem;
  }

.cashi-store-join textarea:focus + label {
    color: #fff; 
  }
  .cashi-store-join .form-floating>textarea:focus~label::after{
    background-color: transparent;
  }
  .store-submit {
    margin-top: 20px;
    height: 49px;
    width: auto;
    padding: 0 60px;
    border: none;
    border-radius: 4px;
    background-color: #fff;
  }
  .store-submit:hover{
   box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
  }

  /*  */
  .blob {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e0f7fa;
    background-color: #007bff;
    width: 70px;
    height: 70px;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; /* Irregular blob shape */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 24px;
    margin-right: 16px;
    transition: background 0.3s ease;
  }

  .blob1 {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e0f7fa;
    background-color: #9e0992;
    width: 70px;
    height: 70px;
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; /* Irregular blob shape */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 24px;
    margin-right: 16px;
    transition: background 0.3s ease;
  }


 
  
 
/* Background circles end */





/* ANIMATIONS */
@keyframes explode {
 0% { opacity: 1; }
 100% { transform: scale(1.2); opacity: 0; }
}
@keyframes float {

  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    -moz-transform: rotateX(0deg) translateY(0px);
    -ms-transform: rotateX(0deg) translateY(0px);
    -o-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
    }

  50% {
    -webkit-transform: rotateX(0deg) translateY(1px) translateX(5px);
    -moz-transform: rotateX(0deg) translateY(10px) translateX(5px);
    -ms-transform: rotateX(0deg) translateY(30px) translateX(5px);
    -o-transform: rotateX(0deg) translateY(40px) translateX(5px);
    transform: rotateX(0deg) translateY(10px) translateX(5px);
}
  100% {
    -webkit-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -moz-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -ms-transform: rotateX(0deg) translateY(0px) translateX(1px);
    -o-transform: rotateX(0deg) translateY(0px) translateX(1px);
    transform: rotateX(0deg) translateY(0px) translateX(1px);
  }

}

.mdl{
  /* height: auto;
  width: 70%;
  position: absolute;
  top: 55%;
  left: 56%;
  transform: translate(-60%,-60%); */

}




.card {
  height: 100%;
  width: 100%;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 30px 30px 30px 30px;
  overflow: hidden;
  
}



.group{
  display: inline-flex;
  margin: 0;
  padding: 0;
  
}

/* how */
.cpa-how{
  padding: 40px 0;
  background-color: #007bff;
}
.cpa-how button{
  border: none;
  border-radius: 6px;
  background-color: #000;
  color: #fff;
  height: 49px;
  width:auto;
  padding: 0 60px;
}
.cpa-how button:hover{
background-color: #fff;
color: #000;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.footer{
  padding: 40px 0;
  background-color: #000;
  color: #fff;
}
.footer img{
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: relative;
}
.footer .form-control{
  color: #fff;
  background-color: transparent;
  border: 1px solid#ccc;
}
.footer .form-floating>label{
   color: #fff;
}
.footer .notify-btn{
  width: auto;
  height: 100%;
  padding: 0 20px;
  height: 60px;
  margin-left: 10px;
  border-radius: 6px;
  border: none;
}


.notify-btn:hover{
 box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
/* scroll to top */
.btnscrolltop{
  width: 55px;
  height: 55px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  font-size: 22px;
  background-color: #fff;
  color: #000;
  border: none;
  padding: 12px 16px;
  border-radius: 50%;
  cursor: pointer;
  display: none; /* Hidden by default */
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transition: opacity 0.3s ease;
}
.btnscrolltop .bi{
  position: relative;
}
#scrollTopBtn:hover {
  background-color: #007bff;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}


/* add store  */
.cashi-store-join{
  background-color: #000;
  margin: 60px 0;
  padding: 40px 0;
}
.cashi-store-join .form-select, .cashi-store-join .form-control{
  background: rgba(255, 255, 255, 0.2);
border-radius: 6px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
.cashi-store-join .form-floating>label{
  color: #d6d6d6;
}
.cashi-store-join option{
  color: #000;
}
.cashi-loyalti-app{
  padding: 40px 0;
}

/* Responsive Media query */

@media only screen and (max-width: 1300px) {
  .herosection {
    background-size: cover;
  }
  .footer{

  }
}

@media only screen and (max-width: 999px) and (min-width:200px) {
  .navbar{
    padding: 0px;
    height: 60px;
  }
  section{
    height: auto;
  }
}