.overlay-bg * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif !important; 
    letter-spacing: 0px;
    line-height: 16px;
}
.overlay-bg ::-webkit-scrollbar {
    width: 10px;
    margin-left:-3px;
  }
  
  /* Track */
  .overlay-bg ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border: 2px solid white;
    border-radius: 10px;
    margin:10px;
  
    
  }
   
  /* Handle */
  .overlay-bg ::-webkit-scrollbar-thumb {
    background: #A6A4B7; 
    border-radius: 10px;
    margin:1px;
    
  }
  
  /* Handle on hover */
  .overlay-bg ::-webkit-scrollbar-thumb:hover {
    background: #A6A4B7; 
  }
 /* * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
} */
/*
.promise-pdp-page > div {
    display: block;
} */

.promise-pdp-page ::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}
.promise-pdp-page :focus-visible {
    outline: none;
    outline-offset: 0 rem;
    box-shadow: none;
}
.promise-pdp-page * {
    font-family: Arial, Helvetica, sans-serif !important; 
}

.pro-tag-box {
    background: transparent linear-gradient(126deg, #e6faeb 0%, #eeeafd 100%) 0% 0% no-repeat padding-box;
    border: 1px solid #00000000;
    border-radius: 10px;
    padding: 18px;
    padding-right: 0px;

}

.pro-tag-box-small {
    background: transparent linear-gradient(126deg, #e6faeb 0%, #eeeafd 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0px;
}
#promise-head-banner{
    width: 100%;
    background: white;
    padding: 3px 0px;
}

.promise-width-large{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 14px;
}

.promise-flexbox {
    display: flex;
}

.promise-space-between {
    justify-content: space-between;
}

.flex-end-align {
    align-items: flex-end;
}

.center-align {
    align-items: center;
}
.promise-center-align {
    text-align: center;
}

.promise-overlay-bg * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0px;
    line-height: 16px;
}
.promise-overlay-bg {
    position: fixed;
    background: #000000aa;
    width: 100%;
    height: 100vh;
    z-index: 99999999999;
    transition: opacity 0.3s ease-out, height 0.3s ease-out;
    font-family: Arial, Helvetica, sans-serif;
}

.space-around {
    justify-content: space-around;
}

.pro-tag-text {
    color: #2C1566;

}

.display-none {
    visibility: hidden;
    opacity: 0;

}
.promise-no-scroll {
    overflow: hidden;
  }

.overlay-bg {
    position: fixed;
    background: #000000aa;
    width: 100%;
    height: 100vh;
    z-index: 99999999999;
    transition: opacity 0.3s ease-out, height 0.3s ease-out;
    font-family: Arial, Helvetica, sans-serif;
}

.promise-overlay-cancel {
    height: 28px;
    background: white;
    width: 28px;
    margin-left: calc(50% + 186px);
    border-radius: 50%;

    text-align: center;
    padding: 7px;
    font-size: 13px;
    color: #6a6a6a;
    cursor: pointer;
    line-height: 15px;
    position: fixed;
    
    bottom: calc(60vh + 88px);
}

.overlay-main {
    position: fixed;
    transition: all 0.3s;
    border-radius: 10px;
    left: calc(50% - 225px);
    width: 450px;
    bottom: -9px;
}
.promise-overlay-main {
    min-height: 16vh;
    background: white;
    position: fixed;
    bottom: 0;
    border-radius: 20px 20px 0px 0px;
    width: 100%;
    padding: 21px;
}
.overlay-header {
    position: fixed;
    bottom: calc( 60vh - 12px);
    background: white;
    width: 450px;
    padding: 20px;
    border-radius: 15px 15px 0px 0px;
}

.mb-badge {
    height: 120px
}

.promise-custom-header {
    min-height: 50px;
    width: 77%;
    background: pink;
    border-radius: 8px;
    background: transparent linear-gradient(326deg, hsla(26, 59%, 61%, 0.108) 0%, hsla(252, 65%, 56%, 0.11) 49%, hsla(187, 66%, 68%, 0.11) 100%) 0% 0% no-repeat padding-box;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 12px;
    margin: 10px auto;
    letter-spacing: 0px;
    font-family: Arial, Helvetica, sans-serif !important;
}
.mg-10-px {
    margin-left: 10px;
    font-size: 14px !important;
}
.pro-features-text {
font-size : 12px;
}
.promise-theme2-text {
    font-size: 14px;
}
.pro-web-text {
    font-size: 17px;
    }
    @media only screen and (max-width: 390px){
        .promise-theme2-text {
            font-size: 12px;
        }
    }
@media only screen and (max-width: 500px) {
    .promise-overlay-cancel {
        margin-left: calc(50% + 136px);
       

    }

    .overlay-main {

        left: calc(50% - 175px);
        width: 350px;
    }
    .promise-overlay-main {
        min-height: 16vh;
        background: white;
        position: fixed;
        bottom: 0;
        border-radius: 20px 20px 0px 0px;
        width: 100%;
        padding: 21px;
    }

    .promsie-overlay-bg {
        position: fixed;
        background: #000000aa;
        width: 100%;
        height: 100vh;
        z-index: 99999999999;
        transition: opacity 0.3s ease-out, height 0.3s ease-out;
        font-family: Arial, Helvetica, sans-serif;
    }
    .overlay-header {

        width: 350px;

    }
    .mb-badge{
        height: 80px
    }
    .pro-web-text {
        font-size: 14px;
        }
             
   
   
}

@media only screen and (max-width: 1250px) {
    .promise-custom-header {
        min-height: 50px;
        width: 90%;
        background: pink;
        border-radius: 8px;
        background: transparent linear-gradient(326deg, hsla(26, 59%, 61%, 0.108) 0%, hsla(252, 65%, 56%, 0.11) 49%, hsla(187, 66%, 68%, 0.11) 100%) 0% 0% no-repeat padding-box;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 12px;
        margin: 10px auto;
        letter-spacing: 0px;

    }

}

.shimmer-lines {
    height: 10px;
    margin: 10px;
    width: 90%; 
    display: block !important;
  }
  .shimmer-box {
      height: 40px;
    margin: 10px;
    width: 90%; 
    display: block !important;
  }
  
  .shine {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px; 
    display: inline-block;
    position: relative; 
    display: block !important;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeholderShimmer;
    -webkit-animation-timing-function: linear;
    }
    @-webkit-keyframes placeholderShimmer {
    0% {
      background-position: -468px 0;
    }
    
    100% {
      background-position: 468px 0; 
    }
  }
  .circle-container {
    position: relative;
    display: inline-block;
  }
  
  .circle-animation {
      position: absolute;
      border: 1px solid #683eb9;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: promise_pulse 2s linear infinite;
      top: 0px;
      left: 2px;
      display: block !important;
  }
  
  @keyframes promise_pulse {
    0% {
      transform: scale(0.8);
      opacity: 0.4;
    }
    100% {
      transform: scale(2.8);
      opacity: 0.1;
    }
    
  }
  @keyframes edd_pulse {
   
      50% {
        transform: scale(1.2);
        border-bottom: 4px solid #9879ecb3;
        border-top: 4px solid #78eb8fcf;
        border-right: 4px solid #9879ecde;
        border-left: 4px solid #78eb8fa6;
      }
  }