@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";

.container-fluid .Hero-custom {
  margin-bottom:0px;
}

.container-fluid .card .pad .heading-4.offer-header p {color: var(--Blue) !important;}

.container-fluid .card {box-shadow: var(--SmallBoxShadow); overflow: visible;}
.container-fluid .card .pad {position:relative; top:-80px; transition: var(--an1);}
.container-fluid .card .image-wrap{padding:1.25rem; }
.container-fluid .card .image-wrap img {box-shadow: var(--BoxShadow); border-radius:10px; position:relative; top:-60px;}
.container-fluid .card .image-wrap img {z-index: 9;}

.container-fluid .card:hover .pad {position:relative; top:0px;}
.container-fluid .card:hover .image-wrap img {top:14px; transform: scale(1.20); left:1.25rem;}

.container-fluid .Offer {
  background: rgb(194, 219, 243);
  background: linear-gradient(0deg, rgba(194, 219, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);
  padding-bottom:60px;
}
.container-fluid .ListB {
  padding-bottom:150px!important;
}
.container-fluid .ListB::after {
  content: '';
  display: block;
  width: 70%;
  height: 500px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-image: url("/content/dam/amex/nl/assets/bubl/img/OniShapeBlue2.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
}

.container-fluid .grid .ListB ul {
  padding-left: calc(60px + var(--Sz01));
}
.container-fluid ul.Small li{
  padding:0px 0px 10px 12px;
}
.container-fluid ul.Small li::before {
  left: 0px;
}



/* -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 576px) {
.container-fluid .card:hover .image-wrap img {top:14px; transform: scale(1.0); left:0;}
.container-fluid .card .image-wrap img {border-radius:14px;}
.container-fluid .card {margin-top:40px;}
.intro.boxCenter{margin:80px 0px}
.container-fluid .Hero-custom .row {padding-bottom: 60px !important;}
}
/* -------------------------------------------------------------------------------------------- */

@media (min-width:577px) and (max-width:768px) {
.container-fluid .card:hover .image-wrap img {top:14px; transform: scale(1.0); left:0;}
.container-fluid .card .image-wrap img {border-radius:16px;}
.container-fluid .card {margin-top:40px;}
.intro.boxCenter{margin:80px 0px}
.container-fluid .Hero-custom .row {padding-bottom: 60px !important;}
}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:769px) and (max-width:1023px) {
.container-fluid .card .pad .heading-4.offer-header p {
  font-size: 16px !important;
  line-height: 21px !important;
}
.container-fluid .card .image-wrap img {border-radius:6px;}
.container-fluid .grid .ListB ul {padding-left: 0px;}
.container-fluid .Hero-custom .row {padding-bottom: 60px !important;}

}

/* -------------------------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
}

/* -------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1280px) {
.container-fluid .card:hover .image-wrap img {top:14px; transform: scale(1.0); left:0;}

}

/* -------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------- */
/* -- Custom CSS added on 02-02-23 ------------------------------JE---------------------------- */
/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */
/* -- Custom header --------------------------------------------------------------------------- */
.Hero-custom{padding-bottom:var(--Sz3)}
.Hero-custom::after{content: ''; position: absolute; bottom: 0px; right: -20px; opacity:1; width: 80%; height: 100%; background: white; z-index: 0; -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/Florish.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/Florish.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-repeat: no-repeat; mask-size: 90%; -webkit-mask-position: right bottom; mask-position: right bottom; pointer-events: none;}
.Hero-custom .col-md-6:first-child{min-width:85%;}
.Hero-custom .col-md-6:last-child{max-width:15%;}

/* -------------------------------------------------------------------------------------------- */
/* -- Benefit Rows ---------------------------------------------------------------------------- */
.CardBenefits{margin-top:calc(var(--Sz5) - calc(var(--Sz5) * 2))}
.CardBenefits .col-md-4 .image img{border-radius:var(--BrBig)!important;}
.CardBenefits .col-md-4:nth-child(2) .image{transform: scale(1.1) translateY(-5%);}
@media (max-width:768px) {
  .CardBenefits .col-md-4:nth-child(2) .image{transform: scale(1) translateY(0%);}
  .CardBenefits .col-md-4:nth-child(1){order:2;}
  .CardBenefits .col-md-4:nth-child(2){order:1;}
  .CardBenefits .col-md-4:nth-child(3){order:3;}
}

/* -------------------------------------------------------------------------------------------- */
/* -- Temporary button fix -------------------------------------------------------------------- */
.container-fluid .ButtonStack{flex-wrap: wrap!important; position: relative; gap:var(--Sz02); margin-bottom:var(--Sz0)}
.lightButton .link-underlined{padding:.8125rem 1.875rem; background-color:transparent; border-radius: .25rem; color:#00175a; overflow: hidden; position: relative; text-align: center; text-overflow: ellipsis; transition: all .2s ease-in-out; border: 2px solid; box-sizing: border-box; font-weight:500; display:inline-block}
.lightButton .link-underlined:hover{cursor:pointer; color: var(--LightBlue); transition: all .2s ease-in-out; background-color:transparent; border-color:inherit; }
.darkButton .link-underlined{padding:.8125rem 1.875rem; background-color:#00175a; border-radius: .25rem; color:#fff; overflow: hidden; position: relative; text-align: center; text-overflow: ellipsis; transition: all .2s ease-in-out; border: 2px solid #00175a; box-sizing: border-box; font-weight:500; display:inline-block}
.darkButton .link-underlined:hover{cursor:pointer; color:#00175a; transition: all .2s ease-in-out; background-color:transparent;}
.lightButton a, .darkButton a{margin-left:0!important;}
@media (max-width:1280px) {
  .lightButton, .darkButton{position: relative; width:100%}
  .link-underlined{width:100%}
}

/* -------------------------------------------------------------------------------------------- */
/* -- General mobile adjustments -------------------------------------------------------------- */
@media(max-width:500px){
  .container-fluid h1{font-size:42px!important;}
  .container-fluid h2{font-size:32px!important;}
}