/* POPUP RELATED */
.savingsCardPopupWrapper * {
   font-family: Montserrat, Arial;
}

.savingsCardPopupWrapper .break {
   display: block;
}

.savingsCardPopupWrapper {
   width: 100%;
   height: 100%;
   background: rgb(255 255 255 / 80%);
   display:none;
   align-items: center;
   justify-content: center;
   position: fixed;
   top:0;
   bottom:0;
   left:0;
   right:0;
   z-index: 9999;
}
.savingsCardPopupWrapper.active {
   display: flex;
}
.savingsCardPopupWrapper .theCard {
   width: 90%;
   max-width: 968px;
   background: #fff;
   box-shadow: 0 0 30px rgb(0 0 0 / 50%);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
}
.savingsCardPopupWrapper .theCard .top {
   width: 100%;
   background: url("./imgs/gradient-bg.png");
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
}

.savingsCardPopupWrapper .theCard .lSide {
   width: 50%;
   padding: 40px;
}

.savingsCardPopupWrapper .theCard .lSide .heading {
   color: #fff;
   font-size: 52px;
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -1px;
   margin: 0;
}
.savingsCardPopupWrapper .theCard .lSide .subHeading {
   color: #fff;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -.5px;
   margin: 50px 0 0 0;
}
.savingsCardPopupWrapper .theCard .darkBtn {
   background: #171d37;
   color: #fff;
   font-size: 1.5rem;
   line-height: 1.5;
   text-decoration: none;
   display: inline-block;
   padding: 10px 30px;
   border-radius: 100px;
   margin-top: 50px;
   transition: all 300ms ease-in-out;
}

.savingsCardPopupWrapper .theCard .darkBtn:hover {
   background: #314164;
}

.savingsCardPopupWrapper .theCard .whiteLink {
   color: #fff;
   font-size: .875rem;
   text-decoration: underline;
   display: inline-block;
   margin-top: 5px;
   transition: all 300ms ease-in-out;
}

.savingsCardPopupWrapper .theCard .whiteLink:hover {
   opacity: 65%;
}

.savingsCardPopupWrapper .forArrow {
   display: inline-block;
   position: relative;
}

.savingsCardPopupWrapper .forArrow img.arrow {
   width: auto;
   height: 110px;
   position: absolute;
   bottom:-15px;
   right:-140px;
}

.savingsCardPopupWrapper .theCard .rSide {
   width: calc(50% - 110px);
   background: url("./imgs/ruler.png");
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   margin-left: 30px;
   padding: 30px 50px;
}

.savingsCardPopupWrapper .theCard .rSide img.logo {
   width: 100%;
   margin: 20px 0;
}

.savingsCardPopupWrapper .closePopUp.backdrop {
   width: 100%;
   height: 100%;
   background: transparent;
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
}

.savingsCardPopupWrapper .theCard .closePopUp.btn {
   width: 40px;
   height: 40px;
   background: #000;
   color: #fff;
   font-size: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100px;
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   transition: all 300ms ease-in-out;
}

.savingsCardPopupWrapper .theCard .closePopUp.btn:hover {
   background: #fff;
   color: #000;
}
.savingsCardPopupWrapper .theCard .bottom {
   width: 100%;
   background: linear-gradient(to bottom, #fff, #cee3ef);
   font-size: 14px;
   padding: 6px 40px;
}
.savingsCardPopupWrapper .theCard .bottom p { margin: 8px 0; }
.savingsCardPopupWrapper .theCard .blueLink { color: #0079ac;text-decoration: underline; }

@media only screen and (max-width: 1068px) {
   .savingsCardPopupWrapper .break {
      display: none!important;
   }
   .savingsCardPopupWrapper .theCard .top {
      flex-direction: column;
      background: url("./imgs/gradient-bg-m.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
   }
   .savingsCardPopupWrapper .theCard .lSide {
      width: 100%;
      padding: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
   .savingsCardPopupWrapper .theCard .lSide .heading,
   .savingsCardPopupWrapper .theCard .lSide .subHeading {
      text-align: center;
   }
   .savingsCardPopupWrapper .theCard .lSide .heading {
      font-size: 48px;
   }
   .savingsCardPopupWrapper .theCard .lSide .subHeading {
      font-size: 26px;
      margin-top: 25px;
   }
   .savingsCardPopupWrapper .theCard .darkBtn {
      margin-top: 25px;
   }
   .savingsCardPopupWrapper .forArrow {
      display: block;
      position: relative;
   }
   .savingsCardPopupWrapper .forArrow img.arrow {
      display:none!important;
   }
   .savingsCardPopupWrapper .theCard .rSide {
      width: 100%;
      background: url("./imgs/ruler-m.png");
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: 0px;
      padding: 40px 30px 10px 30px;
   }
   .savingsCardPopupWrapper .theCard .rSide img.logo {
      width: calc(40% - 40px);
      margin: 20px;
   }
}

@media only screen and (max-width: 768px) {
   .savingsCardPopupWrapper .theCard .lSide {
      padding: 30px 30px 10px 30px;
   }
   .savingsCardPopupWrapper .theCard .lSide .heading {
      font-size: 35px;
      letter-spacing: 0;
   }
   .savingsCardPopupWrapper .theCard .lSide .subHeading {
      font-size: 22px;
   }
   .savingsCardPopupWrapper .theCard .darkBtn {
      font-size: 1.25rem;
      padding: 8px 20px;
      margin-top: 30px;
   }
   .savingsCardPopupWrapper .theCard .bottom {
      font-size: 12px;
   }
   .savingsCardPopupWrapper .theCard .rSide img.logo {
         width: calc(50% - 40px);
         margin: 20px;
      }
}

@media only screen and (max-width: 500px) {
   .savingsCardPopupWrapper .theCard .rSide {
         padding: 40px 20px 0px 20px;
      }
   .savingsCardPopupWrapper .theCard .rSide img.logo {
         width: calc(50% - 30px);
         margin: 15px;
      }
}