@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
}
body .couponBox {
  background-color: #fff;
  border:  1px solid #e6e6e6;
  border-radius: 3px;
  width: 100%;
  max-width: 768px;
  margin: 30px auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: relative;
}
.couponBox .coupon_wrapper {
  display: flex;
  flex-direction: row;
  padding: 20px 20px 10px;
}
.couponBox .couponDicount {
  width: 120px;
  height: 120px;
  text-align: center;
  border:  3px dashed #e6e6e6;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.couponBox .couponDicount span {
  font-weight: 700;
  font-size: 30px;
  line-height: 30px;
  color: #0a1cba;
  display: block;
  margin: 0 0 5px;
  padding: 0;
}
.couponBox .couponDicount small {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #888;
  text-transform: uppercase;
  display: block;
  margin: 0;
  padding: 0;
}
.couponBox .couponDetails {
    width: calc(100% - 315px);
    padding: 0 20px;
}
.couponBox .couponFooter,
.couponBox .couponBreadcrumb {
  
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #757c82;
  text-transform: uppercase;
  display: flex;
    flex-direction: row;
}
.couponBox .couponFooter {
  margin: 0;
  padding: 0 20px 10px;
}
.couponBox .couponBreadcrumb {
  margin: 0 0 10px;
  padding: 0;
}
.couponBox .couponFooter i.spacer,
.couponBox .couponBreadcrumb i.spacer {
  font-size: 10px;
  line-height: 20px;
  margin: 0 10px;
}
.couponBox .couponBreadcrumb .svg-inline--fa {
    display: block;
    height: 12px;
    vertical-align: middle;
    margin: 3px 5px 0 0;
}
.couponBox .couponBreadcrumb .svg-inline--fa.spacer {
    margin-left: 10px;
}

.couponBox .couponBreadcrumb i.verified,
.couponBox .couponBreadcrumb i.non-verified {
  font-size: 12px;
  line-height: 20px;
  margin: 0 5px 0 0;
}
.couponBox .couponBreadcrumb .verified {
  color: #378d42;
}
.couponBox .couponBreadcrumb .non-verified {
  color: #b32f1d;
}
.couponBox .couponBreadcrumb span {
}
.couponBox .couponTitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #111;
}
.couponBox .couponvView {
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.couponBox .couponvView a {
  background: #141aba;
  border: none;
  border-radius: 5px;
    display: block;
    margin: auto;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 10px 0;
    width: 100%;
    position: relative;
}
.couponBox .couponvView a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 15px solid #fff;
  border-left: 15px solid transparent;
}
.couponBox .couponvView a:before {
  content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 15px solid #696967;
    border-right: 15px solid transparent;
    border-bottom-left-radius: 2px;
}
.couponBox.cp2 .coupon_wrapper {
  padding: 0;
}
.couponBox.cp2 .couponDicount {
  border: none;
  width: 160px;
  height: auto;
  font-weight: 600;
  color: #fff;
  min-height: 120px;
}
.couponBox.cp2 .couponDetails {
    width: calc(100% - 375px);
    padding: 5px 15px;
}
.couponBox.cp2 .couponTitle {
  font-weight: 600;
  font-size: 18px;
  line-height: 130%;
}
.couponBox.cp2 .couponvView {
  width: 215px;
  padding: 0 15px 0 0;
}
.couponBox.cp2 .couponvView a {
  border-radius: 0;
  width: 200px;
  padding: 15px 0;
  font-weight: 400;
  text-transform: none;
}
.couponBox.cp2 .couponvView a:before {
  border: 2px dashed #fff;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  width: auto;
  height: auto;
}
.couponBox.cp2 .couponvView a:after {
  display: none;
}
.couponBox.cp2 .couponvView a i {
  font-size: 12px;
  margin: 0 0 0 3px;
}
.couponBox.cp2 .couponFooter {
    padding: 10px 0 0;
}
.couponBox.cp3 .couponDicount {
  border-style: solid;
  flex-direction: column;
  align-items: center;
}
.couponBox.cp3 .couponDicount span {
  font-size: 32px;
  line-height: 37px;
  color:  #000;
  letter-spacing: -1.5px;
  margin: 0;
}
.couponBox.cp3 .couponDicount small {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  color: #000;
  font-weight: 700;
}
.couponBox.cp3 .couponTitle {
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
}
.couponBox.cp3 .couponvView a {
  color: #444;
  background: -webkit-linear-gradient(135deg,rgba(0,0,0,.06) 10%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 35%,rgba(0,0,0,.06) 40%,rgba(0,0,0,.06) 60%,rgba(0,0,0,0) 65%,rgba(0,0,0,0) 85%,rgba(0,0,0,.06) 90%) repeat scroll 0 0/6px 6px rgba(0,0,0,0);
  background: linear-gradient(315deg,rgba(0,0,0,.06) 10%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 35%,rgba(0,0,0,.06) 40%,rgba(0,0,0,.06) 60%,rgba(0,0,0,0) 65%,rgba(0,0,0,0) 85%,rgba(0,0,0,.06) 90%) repeat scroll 0 0/6px 6px rgba(0,0,0,0);
  padding:0;
  border: 2px solid #ddd;
  position: relative;
}
.couponBox.cp3 .couponvView a.viewCoupon{
  padding: 10px 0;
}
.couponBox.cp3 .couponvView a .front {
  color: #fff;
  text-align: left;
  position: relative;
  float: left;
  padding: 10px 0;
  margin: -2px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  z-index: 10;
  width: 93%;
  /* width: 79%; */
}
.couponBox.cp3 .couponvView a .front:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 17px solid #a5a5a5;
  position: absolute;
  right: -17px;
  top: 0px;
}
.couponBox.cp3 .couponvView a .code-text {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  margin: auto;
  letter-spacing: 6px;
  font-size: 24px;
  line-height: 36px;
  padding: 0;
  font-weight: 600;
  z-index: 5;
}
.couponBox.cp3 .couponvView a:before,
.couponBox.cp3 .couponvView a:after {
  display: none;
}
/*.couponBox.cp3 .couponvView a .front {
  display: block;
  padding: 10px 0;
  border-radius: 5px;
  position: relative;
  z-index: 10;
}
.couponBox.cp3 .couponvView a .back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0ffe3;
  border-width: 2px;
  border-style: dashed;
  border-radius: 5px;
  z-index: 5px;
}
.couponBox.cp3 .couponvView a .front:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
}*/
.couponBox.cp3 .couponBreadcrumb {
  margin: 0;
}
.couponBox.cp3 .coupon_wrapper {
  align-items: center;
  padding: 20px;
}
.couponBox.cp3 .couponFooter {
  padding: 0;
}
/*.couponBox.cp3 .couponvView a:after {
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
}
.couponBox.cp3 .couponvView a:before {
  background-color: #edfedc;
  border: 2px dashed #000;
  border-radius: 3px;
}*/
/*.couponBox.cp3 .couponvView a:before,
.couponBox.cp3 .couponvView a:after {
  display: none;
}
*/

.couponBox .couponvView a .copyCoupon {
  position: absolute;
    top: 15px;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    line-height: 100%;
    font-weight: 400;
    text-transform: uppercase;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.couponBox .couponvView a .copyCoupon i {
  margin: 0 5px 0 0;
}
.couponBox .couponvView a .copyCoupon small {
  display: none;
}


.couponvView {
  position: relative;
  display: inline-block;
}

.couponvView .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 8px;
  position: absolute;
  z-index: 1;
  bottom: 70%;
  left: 50%;
  margin-left: -55px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 15px;
}

.couponvView .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.couponvView:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
span.front_deal {
    color: #fff;
    text-align: left;
    position: relative;
    float: left;
    padding: 10px 0;
    margin: 0px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    z-index: 10;
    width: 100%;
}

@media only screen and (max-width: 640px) {
  .couponBox .couponvView a .copyCoupon small  {
    display: inherit;
  }
  .couponBox .coupon_wrapper { 
    flex-direction: column;
    padding-bottom: 10px;
  }
  .couponBox .couponDicount,
  .couponBox .couponDetails,
  .couponBox .couponvView,
  .couponBox.cp2 .couponDicount,
  .couponBox.cp2 .couponDetails,
  .couponBox.cp2 .couponvView,
  .couponBox.cp2 .couponvView a {
    width: 100%;
  }

  .couponBox .couponDicount {
    margin: 0 0 15px;
  }
  .couponBox.cp2 .couponDicount {
    margin: 0;
    height: 100px;
    font-weight: 700;
    font-size: 25px;
  }
  .couponBox.cp2 .couponvView {
    padding: 0 20px 20px;
  }
  .couponBox .couponDetails {
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .couponBox .couponTitle {
    margin: 0 0 10px;
  }
  .couponBox.cp2 .couponTitle {
    margin: 10px 0;
  }
  .couponBox.cp2 .couponDetails {
    flex-direction: column;
    padding: 10px 20px;
    margin: 0;
  }
  .couponvView .tooltiptext {
    bottom: 110% !important;
  }
  .couponBox.cp3 .couponvView a .front {
      width: calc(100% - 20px);
   }
  .couponBox.cp3 .couponvView a .code-text {
    right: 3%;
  }
  .couponDicount.image {
      align-self: center;
  }
  p.description {
      text-align: center;
      margin-bottom: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .couponBox .couponTitle { font-size: 20px; line-height: 125%; }
  .couponvView .tooltiptext { bottom: 110% !important; }
  .coupon_wrapper { padding-top:30px !important; }
}


.ribbon-2 {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 2px; /* the top offset */
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
  color: white;
  font-size: 15px;
}



.description{
  margin: 0;
  font-size: 15px;
  margin-top: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


@media only screen and (max-width: 768px) {
  .screen2{
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  .screen1{
    display: none;
  }
}



/* New Format */
body{
  font-family: "Fredoka", sans-serif;
}
.background{
  display: flex;
  align-items: center;
  border: 1px solid #b5b3b3;
  width: fit-content;
  padding: 5px;
  border-radius: 3px;
  min-width: 730px;
  padding-right: 20px;
  background-color: white;
  min-height: 130px;
  margin-bottom: 10px;
}
.discount{
  width: 130px;
  border-right: 1px dashed #b5b3b3;
  padding: 10px;
}
.discount h1{
  text-align: center;
  max-width: 120px;
  color: #1f2dcd;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-style: normal;
  margin: 0px;
  font-size: 30px;
}
.coupon{
  width: 382px;
  padding: 0px 20px;
}
.coupon h3{
  font-weight: 400;
  line-height: 20px;
  font-size: 19px;
  font-family: "Fredoka", sans-serif;
  font-style: normal;
  margin-top: 7px;
  margin-bottom: 7px;
}
.coupon-tag{
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  margin-bottom: 0px !important;
}
.coupon-btn{
    padding: 12px 50px 12px 20px;
    font-size: 15px;
    border-color: #391bc6;
    background-color: #391bc6;
    color: white;
    border-radius: 4px;
    font-family: "Fredoka", sans-serif;
}

.button.has-code{
  position: relative;
  width: 190px;
  font-weight: 700;
  border: none;
  min-height: 35px;
  cursor: pointer;
  !i;!;
}

.has-code .is-code{
  position: absolute;
  right: 0;
  top: 0;
  height: 2.1rem;
  width: 80%;
  line-height: 2.1rem;
  text-align: right;
  padding: 0 15px;
  background-color: white;
  outline: 1px dashed #391dc9;
  letter-spacing: 2px;
  color: #391dc9;
  border-radius: 5px;
  min-height: 35px;
  align-content: center;
  font-size: 14px;
}
.is-code-text{
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  z-index: 5;
  height: 2.1rem;
  line-height: 2.1rem;
  background-color: #257bf4;
  transition: width .5s;
  outline: 1px solid #257bf4;
  color: white;
  border-radius: 5px;
  min-height: 35px;
  align-content: center;
  font-size: 16px;
}

.is-code-text em{
  position: relative;
  width: 100%;
  display: block;
  font-style: normal;!i;!;
  font-family: "Fredoka", sans-serif;
  font-style: normal;
  font-weight: 450;
  min-height: 35px;
  align-content: center;
  !i;!;
  font-size: 14px !important;!i;!;
  font-weight: 600;
}

.button.has-code:hover .is-code-text{
  width: 75%;
}

.is-code-text em::after{
  content: " ";
    display: block;
    width: 56px;
    height: 100%;
    position: absolute;
    border-radius: 0 0 4px 4px;
    right: -38px;
    top:11px;
    -webkit-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    -ms-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    transform: rotate(20deg) translateY(-10px) scaleX(.8);
    background: -webkit-linear-gradient(52deg,#6449f8,#6449f8 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
    background: linear-gradient(38deg,#6449f8,#6449f8 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
    background-position: 0 4px;
    background-repeat: no-repeat;
    z-index: 13;
}

.background-2 .is-code-text em::after{
  content: " ";
  display: block;
  width: 56px;
  height: 100%;
  position: absolute;
  border-radius: 0 0 4px 4px;
  right: -38px;
  top:11px;
  -webkit-transform: rotate(20deg) translateY(-10px) scaleX(.8);
  -ms-transform: rotate(20deg) translateY(-10px) scaleX(.8);
  transform: rotate(20deg) translateY(-10px) scaleX(.8);
  background: -webkit-linear-gradient(52deg,#6449f8,#6449f8 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
  background: linear-gradient(38deg, #ff4242, #fb7272 49%, hsla(80, 71%, 73%, 0) 50%, hsla(0, 0%, 100%, 0));
  background-position: 0 4px;
  background-repeat: no-repeat;
  z-index: 13;
  color: #257bf4;
}

.is-code-text em::before{
      display: block;
    content: " ";
    width: 23px;
    height: 10px;
    background-color: #234c4c;
    position: absolute;
    z-index: 12;
    right: -14px;
    bottom: -2px;
    -webkit-transform: skew(12deg);
    -ms-transform: skew(12deg);
    transform: skew(12deg);
}





.background-2{
  display: flex;
  border: 1px solid #b5b3b3;
  width: fit-content;
  padding: 5px;
  border-radius: 3px;
  min-width: 730px;
  padding-right: 10px;
  background-color: white;
  justify-content: space-between;
  margin-bottom: 10px;
}
.discount-2{
  width: fit-content;
  border: 2px solid #ff7500;
  border-radius: 3px;
  padding: 3px;
  min-width: 130px;
  min-height: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
}
.discount-2 h1{
  text-align: center;
  padding: 10px 5px;
  max-width: 120px;
  font-size: 20px;
  color: #ff7500;
  font-family: "Fredoka", sans-serif;
  font-weight: 550;
  font-style: normal;
  margin: 0px;
}
.discount-2 p{
  text-align: center;
  color: white;
  background-color: #ff8501;
  padding: 6px;
  margin: 1px;
  border-radius: 0px 0px 3px 3px;
  font-size: 17px;
  position: absolute;
  bottom: 3px;
  min-width: 117px;
}
.visi-btn {
    padding: 13px 28px;
    border: none;
    background-color: #257bf4;
    color: white;
    border-radius: 4px;
    font-size: 15px;
    font-family: "Fredoka", sans-serif;
    font-style: normal;
    font-weight: 450;
    cursor: pointer;
}
.icon{
  background-color: white;
  border-radius: 50%;
  color: #ff4242;
  padding: 2px 5px;
  font-size: 12px;
  padding-top: 3px;
}
.coupon-2{
  width: 330px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  margin-left: 16px;
  /* align-items: center; */
}
.coupon-2 h3{
  font-weight: 500;
  line-height: 30px;
    font-size: 18px;
    font-family: "Fredoka", sans-serif;
    font-style: normal;
    margin-top: 1px;
}
.btn-div-2{
      display: flex;
      align-items: center;
}







.background-3{
  display: flex;
  margin-top: 50px;
  border: 1px solid #b5b3b3;
  width: fit-content;
  padding: 5px;
  border-radius: 3px;
  padding-right: 20px;
}
.discount-3{
  width: fit-content;
  border: 2px solid #f26b62;
  padding: 3px;
  border-radius: 3px;
}
.discount-3 h1{
  text-align: center;
  padding: 6px 26px;
  max-width: 120px;
  font-size: 20px;
  color: #f26b62;
  font-family: "Fredoka", sans-serif;
  font-weight: 550;
  font-style: normal;
}
.discount-3 p{
  text-align: center;
  color: white;
  background-color: #f26b62;
  padding: 9px;
  margin: 1px;
  font-size: 20px;
  border-radius: 0px 0px 3px 3px;
}

.coupon-3{
  width: 330px;
  padding: 0px 20px;
}
.coupon-3 h3{
  font-weight: 500;
  line-height: 30px;
    font-size: 18px;
    font-family: "Fredoka", sans-serif;
    font-style: normal;
    margin-top: 1px;
}
.btn-div-3{
      display: flex;
      align-items: center;
}
.button-2.has-code-2{
  position: relative;
  width: 170px;
  font-weight: 700;
  border: none;
  min-height: 35px;
  cursor: pointer;
}

.has-code-2 .is-code-2{
  position: absolute;
  right: 0;
  top: 0;
  height: 2.1rem;
  width: 80%;
  line-height: 2.1rem;
  text-align: right;
  padding: 0 15px;
  background-color: white;
  outline: 1px dashed #f66b67;
  letter-spacing: 2px;
  color: #f66b67;
  border-radius: 5px;
  min-height: 35px;
  align-content: center;
}
.is-code-text-2{
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  z-index: 5;
  height: 2.1rem;
  line-height: 2.1rem;
  background-color: #f66b67;
  transition: width .5s;
  outline: 1px solid #f66b67;
  color: white;
  font-family: "Fredoka", sans-serif;
  font-style: normal;
  font-weight: 400;
  border-radius: 5px;
  min-height: 35px;
  font-size: 14px;
}

.is-code-text-2 em{
  position: relative;
  width: 100%;
  display: block;
  font-style: normal;
  min-height: 35px;
  align-content: center;
  font-weight: 600;
}

.button-2.has-code-2:hover .is-code-text-2{
  width: 75%;
}

.is-code-text-2 em::after{
  content: " ";
    display: block;
    width: 56px;
    height: 100%;
    position: absolute;
    border-radius: 0 0 4px 4px;
    right: -38px;
    top:11px;
    -webkit-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    -ms-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    transform: rotate(20deg) translateY(-10px) scaleX(.8);
    background: -webkit-linear-gradient(52deg,#ff9293,#ff9293 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
    background: linear-gradient(38deg,#ff9293,#ff9293 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
    background-position: 0 4px;
    background-repeat: no-repeat;
    z-index: 13;
}

.is-code-text-2 em::before{
      display: block;
    content: " ";
    width: 23px;
    height: 10px;
    background-color: #234c4c;
    position: absolute;
    z-index: 12;
    right: -14px;
    bottom: -2px;
    -webkit-transform: skew(12deg);
    -ms-transform: skew(12deg);
    transform: skew(12deg);
}





.background-4{
  display: flex;
  align-items: center;
  margin-top: 0px;
  border: 1px solid #b5b3b3;
  width: fit-content;
  padding: 5px;
  border-radius: 3px;
  min-width: 730px;
  padding-right: 20px;
  background-color: white;
  min-height: 120px;
  margin-bottom: 10px;
}
.discount-4{
  width: fit-content;
  border-radius: 7px;
  border: 1px solid #f0f0f0;
  min-width: 130px;
  position: relative;
}
.discount-4 img{
  border-radius: 7px 7px 0px 0px;
}
.coupon-4{
  width: 382px;
  padding: 0px 20px;
}
.coupon-4 h3{
  font-weight: 650;
  line-height: 30px;
  font-size: 18px;
  font-family: "Fredoka", sans-serif;
  font-style: normal;
  margin: 1px;
  font-weight: 300;
}
.coupon-4 p{
  line-height: 30px;
  font-size: 15px;
  font-family: "Fredoka", sans-serif;
  font-style: normal;
  color: #f40f0b;
  margin: 0px;
}
.coupon-tag-4{
  font-family: "Fredoka", sans-serif;
  margin: 0px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 3px 0px;
  background-color: #e7e7e7;
  border-radius: 0px 0px 8px 8px;
  font-weight: 600;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.coupon-btn-4{
    padding: 12px 50px 12px 20px;
    font-size: 15px;
    border-color: #391bc6;
    background-color: #391bc6;
    color: white;
    border-radius: 4px;
}
.icon-4{
  display: none;
}

.button-4.has-code-4{
  position: relative;
  width: 15rem;
  font-weight: 700;
  border: none;
  min-height: 35px;
  cursor: pointer;
}

.has-code-4 .is-code-4{
  position: absolute;
  right: 0;
  top: 0;
  height: 2.1rem;
  width: 80%;
  line-height: 2.1rem;
  text-align: right;
  padding: 0 15px;
  background-color: #fdfde7;
  outline: 1px dashed darkcyan;
  letter-spacing: 2px;
  color: #666;
}
.is-code-text-4{
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  z-index: 5;
  height: 2.1rem;
  line-height: 2.1rem;
  background-color: #ffc600;
  transition: width .5s; 
  outline: 1px solid #ffc600;
  color: black;
}

.is-code-text-4 em{
  position: relative;
  width: 100%;
  display: block;
  text-align: left;
  padding-left: 11px; 
  font-weight: 600;
  line-height: 30px;
    font-size: 15px;
    font-family: "Fredoka", sans-serif;
    font-style: normal;
}

.button-4.has-code-4:hover .is-code-text-4{
  width: 60%;
}

.is-code-text-4 em::after{
  content: " ";
    display: block;
    width: 47px;
    height: 100%;
    position: absolute;
    border-radius: 0 0 4px 4px;
    right: -22px;
    top:11px;
    -webkit-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    -ms-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    transform: rotate(20deg) translateY(-10px) scaleX(.8);
    background: -webkit-linear-gradient(52deg,#ffc500,#ffc500 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
    background: linear-gradient(38deg,#ffc500,#ffc500 49%,hsla(80,71%,73%,0) 50%,hsla(0,0%,100%,0));
    background-position: 0 4px;
    background-repeat: no-repeat;
    z-index: 13;
}

.is-code-text-4 em::before{
      display: block;
    content: " ";
    width: 13px;
    height: 12px;
    background-color: #234c4c;
    position: absolute;
    z-index: 12;
    right: -2px;
    bottom: -4px;
    -webkit-transform: skew(12deg);
    -ms-transform: skew(12deg);
    transform: skew(12deg);
}
p.coupon-tag {
    color: #391dc9;
    margin: 0px;
}
.renew .has-code-2 .is-code-2 {
    background-color: white;
    color: black;
    outline: 1px dashed #ffc600;
}

.renew .is-code-text-2 {
    background-color: #ffc600;
    outline: 1px solid #ffc600;
    color: black;
    font-weight: 600;
}

.renew .is-code-text-2 em::after {
    display: block;
    width: 56px;
    height: 100%;
    position: absolute;
    border-radius: 0 0 4px 4px;
    right: -38px;
    top: 11px;
    -webkit-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    -ms-transform: rotate(20deg) translateY(-10px) scaleX(.8);
    transform: rotate(20deg) translateY(-10px) scaleX(.8);
    background: -webkit-linear-gradient(52deg, #ff9293, #ff9293 49%, hsla(80, 71%, 73%, 0) 50%, hsla(0, 0%, 100%, 0));
    background: linear-gradient(38deg, #ffc600, #ffdc63 49%, hsla(80, 71%, 73%, 0) 50%, hsla(0, 0%, 100%, 0));
    background-position: 0 4px;
    background-repeat: no-repeat;
    z-index: 13;
}


.button.has-code {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.hide{
  display: none;
}


@media screen and (max-width: 767px) {
  .background{
    display: flow;
    width: auto;
    text-align: -webkit-center;
  }
  .discount{
    border: none;
    align-content: center;
  }
  .discount h1{
    border: 1px solid black;
    padding: 14px 16px;
    margin-bottom: 5px;
    border-radius: 4px;
  }
  .coupon-tag{
    margin-top: 0px;
  }
  .coupon{
    width: 100%;
    padding: 0px;
  }
  .coupon h3{
    margin-bottom: 0px;
    text-align: left;
  }
  .btn-div{
    text-align-last: center;
  }
  .background-2 {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: auto;
      min-width: 100%;
      padding: 20px 0px;
  }
  .coupon-2 {
    width: 90%;
    justify-content: center;
    align-items: center;
  }
  .coupon-2 h3{
    text-align: center;
    padding: 10px;
  }
  .background-3 {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: auto;
  }
  .coupon-3{
    width: 90%;
  }
  .coupon-3 h3{ 
    padding: 10px;
  }
  .background-4{
    display: flow;
    width: auto;
    text-align: -webkit-center;
    min-width: 100%;
    padding: 10px;
  }
  .discount-4{
    border: none;
    align-content: center;
  }
  .discount-4 h1{
    border: 1px solid black;
    padding: 14px 16px;
    margin-bottom: 5px;
  }
  .coupon-tag-4{
    margin-top: 0px;
  }
  .coupon-4{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .coupon-4 h3{
    text-align: center;
    display: flex;
    align-items: center;
    margin: 10px 0px;
    margin-bottom: 0px;
  }
  .btn-div-4{
    text-align-last: center;
  }
  .icon-4{
    display: block;
    padding-right: 10px;
  }
  .button-4.has-code-4{
    margin-top: 10px;
  }
  .has-code-4 .is-code-4{
    border-radius: 5px;
  }
  .is-code-text-4{
    border-radius: 5px;
  }
  .background {
    min-width: 100%;
    padding: 10px;
}

.discount {
    padding: 0px;
}

.btn-div {
    text-align: -webkit-center !important;!i;!;
    margin: 20px;
    margin-bottom: 10px;
}

.coupon h3 {
    text-align: center;
}
}
.coupon-2 h3 {
    margin: 0px;
}
.background-2 .is-code {
    color: #ff4242;
    outline: 1px dashed #ff4242;
}
.background-4 .couponDicount {
    text-align: center;
    font-size: 19px;
    line-height: 25px;
    padding: 10px 8px;
    font-weight: 600;
    padding-bottom: 32px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background .is-code-text em::after{
  background: linear-gradient(38deg, #257bf4, #4e93f4 49%, hsla(80, 71%, 73%, 0) 50%, hsla(0, 0%, 100%, 0));
      top: 14px;

}
.background .has-code .is-code{
  outline: 1px dashed #257bf4;
  color: #257bf4;
}
.background .has-code {
    background-color: #7ab1ff;
    border-radius: 8px;
}

span.copyCoupon small {
    margin-left: 5px;
}
.tooltiptext {
    font-size: 14px;
}
.background-2 .is-code-text {
    background-color: #ff4242;
    outline-color: #ff4242;
}
.background-2 .has-code {
    background-color: #ff7070;
    color: white;
    border-radius: 7px;
}
.background-4 .has-code-2 {
    background-color: #fdd754;
    border-radius: 7px;
}
.couponDicount.image {
    max-width: 110px;
    display: flex;
    align-items: center;
}