.no-scroll {
overflow: hidden;
}
.loader-3 {
animation: rotate 3s infinite linear;
}
.loader-3 .circle-primary {
stroke-dasharray: 283;
stroke-linecap: round;
stroke: #C558A2; 
animation: dash 2s infinite;
}
.loader-3 .circle-secondary {
stroke: #F6F1F1; 
}
@keyframes rotate {
from { transform: rotate(135deg); }
to { transform: rotate(495deg); }
}
@keyframes dash {
0% { stroke-dashoffset: 283; }
100% { stroke-dashoffset: 0; }
}
@media (min-width: 993px) {
.discountWrapper {
position: fixed;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: unset;
left: 0px;
top: 0px;
height: 100%;
background: linear-gradient(
to bottom,
rgba(252, 230, 229, 0.7) 0%, rgba(252, 230, 229, 0.7) 20%, rgba(197, 88, 162, 0.7) 100% );     
padding: 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: visible;
transition-duration: 0s;
transition-delay: 0s;
transform: none;
right: auto;
bottom: auto;
box-sizing: border-box;
}
}
@media (min-width: 0px) {
.discountWrapper {
position: fixed;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: unset;
left: 0px;
top: 0px;
height: 100%;
background: linear-gradient(
to bottom,
rgba(252, 230, 229, 0.7) 0%, rgba(252, 230, 229, 1) 20%, rgba(197, 88, 162, 0.8) 100% );
padding: 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
transition-duration: 0s;
transition-delay: 0s;
transform: none;
right: auto;
bottom: auto;
box-sizing: border-box;
z-index: 100;
}
}
@media (min-width: 993px) {
.discountContents {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
animation-duration: 0.3s;
animation-delay: 0s;
animation-name: ;
padding-bottom: 5%;
width: auto;
top: unset;
left: unset;
-webkit-animation-name: ;
transition-duration: 0s;
transition-delay: 0s;
transform: none;
animation-fill-mode: both;
right: auto;
bottom: auto;
margin-top: auto;
margin-bottom: auto;
}
}
@media (min-width: 0px) {
.discountContents {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
align-items: center;
justify-content: center;
animation-duration: 0.3s;
animation-delay: 0s;
animation-name: ; width: auto;
top: unset;
left: unset;
-webkit-animation-name: ;
transition-duration: 0s;
transition-delay: 0s;
transform: none;
animation-fill-mode: both;
right: auto;
bottom: auto;
margin-top: auto;
margin-bottom: auto;
font-family: "Outfit", sans-serif;
z-index: 3;
}
}
@media (max-width: 992px) {
.discountContents {
margin-top: 32px!important;
margin-bottom: 20%!important;
}
}
.emailError, .nameError {
color: red;
}
.discountContents img {
max-width: 200px!important;
width: 100%;
height: auto;
margin-bottom: 32px;
}
.discountInner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.discountGot {
margin-bottom: 6px;
text-align: center;
}
.discountGot span {
font-size: 38px;
font-weight: bold;
}
.discountPercent {
text-align: center;
}
.discountPercent span {
font-size: 80px;
font-weight: bold;
}
.discountMothersDay {
margin-top: 6px;
text-align: center;
}
.discountMothersDay span {
font-size: 38px;
font-weight: bold;
}
.discountSave {
margin-top: 20px;
text-align: center;
}
.discountSave span {
font-size: 18px;
}
.discountForm {
margin-top: 20px;
} .discountForm {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.claimDiscountBtn, .continueBtn, .submitFormBtn {
padding: 20px 24px!important;
width: 100%!important;
border-radius: 100px!important;
background-color: #fff!important;
border: 1px solid transparent!important;
color: #000!important;
}
.claimDiscountBtn:hover, .continueBtn:hover, .submitFormBtn:hover {
background-color: transparent!important;
border: 1px solid white!important;
}
.submitFormBtn:disabled {
background-color: grey!important;
}
.closeDiscountBtn {
margin-top: 20px;
color: #000!important;
text-decoration: underline!important;
border: none!important;
background-color: transparent!important;
}
.discountForm form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.emailWrapper, .nameWrapper { display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
}
.emailWrapper.active,
.nameWrapper.active {
display: flex;
}
.claimDiscountBtn.hidden {
display: none;
}
.inputStyling {
border-radius: 100px!important;
border: 1px solid #fff!important;
background-color: transparent!important;
padding: 20px 24px!important;
}
.inputStyling::placeholder {
color: #000 !important; 
}  .flowerImgsPositionWrapper {
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
middle: 0px;
center: 0px;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
left: 0;
right: auto;
top: 50%;
bottom: auto;
transition-duration: 0s;
transition-delay: 0s;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
}
.flowerImg {
max-width: 300px!important;
height: auto;
width: 100%;
position: absolute;
}
#flowerLeft {
left: -2%;
bottom: -5%;
animation: fadeMoveUpLeft 1s ease forwards;
}
#flowerRight {
right: -2%;
bottom: -5%;
animation: fadeMoveUpRight 1s ease forwards;
animation-delay: 0.3s; }
#flowerMiddle {
display: none;
}
@keyframes fadeMoveUpLeft {
0% {
opacity: 0;
transform: scaleX(-1) translateY(20px);
}
100% {
opacity: 1;
transform: scaleX(-1) translateY(0);
}
}
@keyframes fadeMoveUpRight {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeMoveUpMiddle {
0% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media (max-width: 992px) {
#flowerMiddle {
display: block;
bottom: -20%;
left: 50%;
animation: fadeMoveUpMiddle 1s ease forwards;
}
#flowerLeft, #flowerRight {
display: none;
}
.discountContents img {
max-width: 200px;
}
}
@media (max-width: 576px) {
.discountGot {
}
.discountGot span {
font-size: 24px;
}
.discountPercent {
}
.discountPercent span {
font-size: 40px;
}
.discountMothersDay {
}
.discountMothersDay span {
font-size: 24px;
}
.discountSave {
}
}