@charset "utf-8";
@import 'zurich/stylesheet.css';
/* CSS Document */


/* @font-face {
  font-family: 'zurich_btbold';
  src: url('zurich-fonts/zurchb.woff2') format('woff2'),
       url('zurich-fonts/zurchb.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'zurich_btroman';
  src: url('zurich-fonts/zurchn.woff2') format('woff2'),
       url('zurich-fonts/zurchn.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'zurich_ex_btregular';
  src: url('zurich-fonts/zurich-extended-bt_2.woff2') format('woff2'),
       url('zurich-fonts/zurich-extended-bt_2.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'zurich_lt_btlight';
  src: url('zurich-fonts/zurchl.woff2') format('woff2'),
       url('zurich-fonts/zurchl.woff') format('woff');
  font-weight: normal;
  font-style: normal;

} */

/* @media only screen and (orientation:landscape){
  body {
    height: 100vw;
    transform: rotate(-90deg);
  }
} */

@font-face {
    font-family: rupee_foradianregular;
    src: url(fonts/rs/rupee_foradian-webfont.eot);
    src: url(fonts/rs/rupee_foradian-webfont.eot?#iefix) format('embedded-opentype'),url(fonts/rs/rupee_foradian-webfont.woff) format('woff'),url(fonts/rs/rupee_foradian-webfont.ttf) format('truetype')
}
* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-family:'Zurich BT', 'Zurich',  rupee_foradianregular; font-size: 16px; }

.row { margin-left: -15px; margin-right: -15px; }
.row:after { content: ''; display: table; clear: both; }
.rs { font-style: normal; font-family: rupee_foradianregular; font-weight: normal; }
.rupee:before { content: '`'; font-style: normal; font-family: rupee_foradianregular; font-weight: normal; }
#myModal { display: none !important;}

.MainbannerSection { width: 100%; float: left; }
  .headerSection {  padding-top: 0; padding-bottom: 0; }
  .headerSection .logo { padding:15px 0; float:left; }
  .headerSection .toggleMenu { height:40px; width:50px; background:none; float:right; margin-top:10px; cursor:pointer; position:relative; display: none; }
  .headerSection .toggleMenu .cardName { font-size:18px; color:#333333; position:absolute; right:60px; line-height:30px; padding-right:10px; border-right:1px solid #333333; top:5px;  }
  .headerSection .toggleMenu span { height:3px; display:block; margin:8px 4px; background:#a32f23; }
  .headerSection .creditCardBox { float: left; padding: 0 5px 0 5px; margin-left: 15px; }
  .headerSection .creditCardBox .cardBox { float: left; cursor: pointer; border-top:5px solid #ffffff; padding-top:5px;  }
.headerSection .creditCardBox .card-header { background:#e68636; color:#ffffff; min-height:50px; line-height:50px; padding-left:20px; font-size:18px; }
.headerSection .creditCardBox .card-header .closeMenu { width:50px; background:#9f2c23; height:50px; color:#ffffff; float:right; text-align:center; cursor:pointer; }
.headerSection .creditCardBox .cardBox .dropDownBox { position: absolute; display: none; left: 50%; transform: translateX(-50%); z-index: 1; list-style: none; background: #ffffff; margin: 0; padding: 30px 0; width:100%; border-top:1px solid #e4e4e4; }
 
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock { width:22%; padding:0 30px; float:left; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock:not(:last-child) { border-right:1px solid #e5e5e6; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock .card-Name { font-size:18px; color:#333333; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock .cardimg { margin:10px 0; max-width:100%; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock .featureBlock { position: relative; padding: 10px 0; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock .featureBlock img { position: absolute; left: 0;  }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock .featureBlock .text { padding-left: 50px; text-align: left; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock .featureBlock:not(:last-child) { border-bottom: 1px solid #dadada; }
.headerSection .creditCardBox .cardBox .dropDownBox li { white-space: nowrap; padding:10px 20px; color: #ffffff; }
.headerSection .creditCardBox .cardBox .dropDownBox .cardBlock p { font-size: 14px; }

.headerSection .creditCardBox .icon { padding: 2px 20px; }
.headerSection .creditCardBox .icon img { width: 45px; }
.headerSection .creditCardBox .text { display: block; font-size: 14px; text-align: center; margin-bottom:10px;  }
.headerSection .creditCardBoxMobile { margin-left: 40px;  padding: 10px 0; float: left;  display: none;  }
.headerSection .creditCardBoxMobile .img { float: left; width: 50px;  }
.headerSection .creditCardBoxMobile .img img { max-width: 100%;}
.headerSection .creditCardBoxMobile .form-group { float: left; height: 40px; margin-bottom: 0; border-bottom:1px solid #dadada; position: relative; min-width: 250px; margin-left: 20px; }
.headerSection .creditCardBoxMobile .form-group .select-text { height: 40px; padding: 0 10px; line-height: 40px; background: url('../images/select-black-arrow.png') no-repeat center right;  }
.headerSection .creditCardBoxMobile .form-group .form-control { position: absolute; left: 0; top: 0; height: 40px;  width: 100%; opacity: 0; padding: 0; } 
.headerSection .creditCardBoxMobile .cardDD option { padding: 10px 15px !important; display: block; }
.headerSection .creditCardBoxMobile .cardDD optgroup option { padding: 10px !important; background: #fbf2e4; }

.container-fluid .content-style {margin-bottom: 300px;}
.container-fluid .content-style1 {margin-bottom: 150px;}
  .bannerSection {  position: relative; margin-bottom: 66px;  }
  .bannerSection .container { position: relative;  min-height: 549px;}
  
  .bannerSection .bannerContent { margin-top: 79px;  }
   .bannerSection .bannerContent .text { font-size: 33px; color: #000000; margin-bottom: 25px; line-height: 1em;  }
   .bannerSection .bannerContent .text span { display: block; color: #a03636; }
.bannerSection .bannerContent .orangeBlock { position: absolute; bottom: 0; transform: translateY(107%); max-width: 65%; text-align: center; }
.bannerSection .bannerContent .orangeBlock .box { padding: 20px 30px; background: #e68636;  margin: 0 20px 0 20px; text-align: left;  border-radius:3px; }
   .bannerSection .bannerContent .orangeBlock p { color:#ffffff; font-size: 15px; margin:10px 0 0 0; word-break: break-word; }
   .bannerSection .bannerContent .orangeBlock-ruby {transform: translateY(99%);}

  .formSection { width: 30.21%; z-index: 1; float: left; background: #a03636; min-height: 500px; position: absolute; top:0; right:0;   }
  
  .section { padding-top: 65px; padding-bottom: 65px; /*margin-top: 300px;*/}
  .footer-style {margin: 0;}
  .section .bodyText { font-size: 1em;  text-align: center; color: #555555; margin-bottom: 5.625em;  }
  .section .bodyText .bold { color: #a03636;   }
  .section .titleSection { color: #a03636; text-transform:uppercase; font-size:24px; margin-bottom: 2.292em; line-height: 1.4em; text-align: center; font-family: 'Zurich'; font-weight: bold; }
  .section .offers { display: block; }
  .section .offers .offersBox { padding: 0px 20px;  text-align: center; }
  .section .offers .offersBox .icon { margin: 0 auto 1.875em auto; display: inline-block; }
  .section .offers .offersBox p { font-size: 15px; }

  .offerFilterSection { background: #ececec; }
    .offerFilterSection .offerFilterHead { padding: 20px; box-sizing: border-box; background: #e68636; }
    .offerFilterSection .offerFilterHead .fliterBox { padding-left: 100px;  } 
    .offerFilterSection .offerFilterHead .fliterBox .icon { position: absolute; left: 20px; }
    .offerFilterSection .offerFilterHead .fliterBox .text { font-size: 1.375em; color: #ffffff; text-transform: uppercase; font-family: 'Zurich BT';  }
    .offerFilterSection .offerFilterHead .fliterBox .form-group { margin: 0; position: relative; }
    .offerFilterSection .offerFilterHead .fliterBox .select-text { color: #ffffff; height: 2.063em; line-height:2.063em; border-bottom: 1px solid rgba(256,256,256,0.5); background: url('../images/select-arrow.png') center right no-repeat; font-weight: 300; }
    .offerFilterSection .offerFilterHead .fliterBox .form-group .form-control { height: 33px; width: 100%; position: absolute; top: 0; opacity: 0;}
  .offerFilterSection .offerCodeBoxWrapper { columns: 3; column-width: auto; column-count: 3; column-gap: 0px; margin-bottom: 50px; margin-top: 30px; }
  .offerFilterSection .offerCodeBoxWrapper .offerCodeBox {   padding: 6px; display: inline-block; width: 100%; box-sizing: border-box; }
  .offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box { background: #ffffff; border-radius: 5px; padding:30px; display: block; text-align: center; }
  .offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box .brand { margin-bottom: 15px}
.offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box .brandName { font-size: 18px; color: #e68636; display: block; margin-bottom: 20px;}
.offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box p { font-size: 15px; margin-bottom: 15px; }
.offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box p:last-child { margin-bottom: 0; }
.offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box .couponCodeBox { padding: 7px 20px; border: 1px dashed #f1bd91; border-radius: 3px; display: inline-block; font-size: 15px; color: #555555; margin:0 0 15px 0; }
.offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box .couponCodeBox span { color: #b2382e; text-transform: uppercase; }
.offerFilterSection .offerCodeBoxWrapper .offerCodeBox .box .validOffer { color:#17447c; font-size: 13px;  }
  

    .banner_formWrap {position: absolute; width: 50%;  right: 0; box-sizing: border-box; top:0; padding: 0 10px;  }

.formSection .formHeader { font-size: 18px; padding:25px 20px 20px 20px; color: #ffffff; text-align: center; font-weight: 300; }
.formSection .formHeader span { font-size: 1.200em; display: block; text-transform: uppercase; font-family: 'Zurich BT'; }
.formSection .thankYou { text-align: center; max-width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  font-weight: 300; color: #ffffff; max-width:80%; }
.formSection .thankYou h2 { font-size: 30px; text-transform: uppercase; }
.formSection .thankYou p { font-size: 16px;  }

.formSection .formBody { padding:20px 10%; display: none; }
.formSection .formBody.active { display: block; }
.formSection .formHeader h3 { color: #ffffff; font-size: 20px; margin-bottom: 10px; font-weight: 500; }
.formSection .formHeader .hBtn { font-size: 15px; padding: 7px 25px;  margin: 3px; border:1px solid rgba(256,256,256,0.5); border-radius: 20px; cursor: pointer; color: #ffffff; display: inline-block;   }
.formSection .formHeader .hBtn.active { background: #ed7e2f; border:1px solid #ed7e2f;  }
.formSection .formBody .form-control-wrap.icons { background-position: left center; background-repeat: no-repeat; padding-left: 35px; }

.icons.Type-of-Employment { background-image: url(../images/Type-of-Employment.png); }
.icons.mobile { background-image: url(../images/mobile.png); }
.icons.location { background-image: url(../images/location.png); }
.icons.education { background-image: url(../images/Education.png); }
.icons.salary { background-image: url(../images/salary.png); }
.icons.emi { background-image: url(../images/emi.png); }
.icons.name { background-image: url(../images/name.png); }
.icons.email { background-image: url(../images/email.png); }
.icons.dob { background-image: url(../images/date-of-birth.png); }
.icons.company { background-image: url(../images/company.png); }
.icons.monthly-salary { background-image: url(../images/monthly-income.png); }
.icons.gross-salary { background-image: url(../images/gross-salary.png); }
.Purpose-of-loan{ background-image: url(../images/Purpose-of-loan.png); }
.Where-do-you-live{ background-image: url(../images/Where-do-you-live.png); }
.Relationship-with-ICICI-Bank{ background-image: url(../images/Relationship-with-ICICI-Bank.png); }

.ResendOTP { min-height: 40px; line-height: 40px; font-size: 14px; padding: 0 20px; float: right; text-decoration: none; color: #ffffff; border: 1px solid rgba(256,256,256, .2); }
.ResendOTP:hover, .ResendOTP:visited { background: rgba(256,256,256, .2); color: #ffffff; text-decoration: none; }
#ParaOTP, #ParaResend {
  display: none;
}
.formSection .formBody .form-group { margin:0 0 15px 0; display: block; width: 100%; float: left; padding: 0 10px; box-sizing: border-box; }
.formSection .formBody .form-group.hide { display: none !important; }
.formSection .formBody .form-control-wrap { position: relative; height: 40px; border-bottom: 1px solid rgba(256,256,256, 0.3); }
.formSection .formBody .form-control-wrap.otp { width: calc(100% - 150px); display: inline-block; }
.formSection .formBody .form-control-wrap .select-text { font-size: 14px; color: #ffffff; line-height: 40px; width: 100%; height: 40px; background: url(../images/select-arrow.png) no-repeat center right; 
  padding-right: 24px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
.formSection .formBody .form-group select.form-control { position: absolute; opacity: 0; top: 0; left: 0; font-family: 'Zurich BT'; }
.formSection .formBody .form-group .form-control { box-shadow: none; border:none;  height: 40px; border-radius: 0; font-family: 'Zurich BT'; line-height: 40px; padding: 0; background: transparent; width: 100%; box-sizing: border-box; color: #ffffff; outline: none; font-size: 14px; }
.formSection .formBody .form-group .form-control[type='email'] { text-transform: lowercase; }
.form-control[type='email']::-webkit-input-placeholder { text-transform: capitalize; }
.form-control[type='email']::-moz-placeholder { text-transform: capitalize; }
.form-control[type='email']:-ms-input-placeholder { text-transform: capitalize; }
.form-control[type='email']:-moz-placeholder { text-transform: capitalize; }
.formSection .formBody .error { font-size: 11px; padding: 0; color: rgba(256,256,256,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top: 100%; }

.formSection .formBody .btnWrap { margin:50px -20px 0 -20px; }
.formSection .formBody .btn { width: 100%; background: #003366; border: none; height: 92px; color: #ffffff; font-size: 24px; cursor: pointer; outline: none;}

.formSection .checkboxWrap { display:inline-block; margin:5px auto 10px auto; position:relative; padding: 0 10px; }
.formSection .checkboxWrap label { padding-left:28px; color:#ffd9d9; font-size:13px; position:relative; cursor: position; display: block; font-weight: 100;  }
.formSection .checkboxWrap label .check { position:absolute; height:18px; width:18px; left:0px; border:1px solid #ffd9d9; border-radius: 5px; }
.formSection .checkboxWrap label .check:after { position:absolute; content:''; height:5px; width:12px;   border-left:2px solid #ffd9d9; border-bottom:2px solid #ffd9d9; transform:rotate(-45deg);  top:-6px; left:0; right:0; bottom:0; margin:auto; opacity:0;  }
.formSection .checkboxWrap .checkbox { display:inline-block; position:absolute; opacity:0  }
.formSection .checkboxWrap .checkbox:checked + label .check { border:1px solid #ffd9d9; }
.formSection .checkboxWrap .checkbox:checked + label .check:after { opacity:1 }

.formSection .radioButtonBox .form-control-wrap { height: auto; border: none; }
.formSection .radioButtonBox p { color: #ffffff; font-size: 13px; }
.formSection .radioButtonBox label { position: relative; font-size: 14px; padding: 3px 10px 3px 30px; font-weight: 100; margin-bottom: 0; color: #ffffff;  }
.formSection .radioButtonBox label:before { content: ''; position: absolute; width: 20px; height: 20px; border: 1px solid #dadada; border-radius: 50%; left: 0; }
.formSection .radioButtonBox label:after { content: ''; position: absolute; width: 14px; height: 14px; background: #dadada; border-radius: 50%; left: 3px; top: 6px; display: none; }
.formSection .radioButtonBox .radioBtn { opacity: 0; position: absolute;z-index: -10; }
.formSection .radioButtonBox .radioBtn:checked + label:after { display: block; }


.formSection .btnWrapper { margin-bottom: 10px; margin-top: 10px; display: block; text-align: center; }
.formSection .btnWrapper .getOffer { height: 53px; width: 70%;  color: #ffffff; background: transparent; border:1px solid #ffffff; font-size: 20px; border-radius:5px; text-transform: uppercase; margin: 0 auto;}

.cardSlider { margin: 10px 0; }


.cardSlider .SlideItem { text-align: center; padding-top: 20px; } 
.cardSlider .SlideItem .imageBox { margin: 20px auto; display: inline-block; }
.cardSlider .SlideItem .imageBox img { width: 90%; margin: 0 auto;}
/*.cardSlider .SlideItem:nth-child(2) .imageBox img { transform: scale(1.3, 1.3); }*/

.slickSlider { width: calc(100% - 50px); margin: 0 auto; }
.slickSlider .slick-prev, .slickSlider .slick-next { height: 28px; width: 14px;  }
.slickSlider .slick-prev:before, .slick-next:before { display: none; }
.slickSlider .slick-prev { left: -15px;  background: url('../images/slick-arrow-left.png') center center;  }
.slickSlider .slick-next { right: -15px;  background: url('../images/slick-arrow-right.png') center center;  }


.orangeBlock .slick-prev, .orangeBlock .slick-next { height: 28px; width: 14px; top: 50%;  } 

.footer {  background: #053c6d; padding: 30px 0 60px 0px; text-align: center; }
.footer p { font-size:13px; width: 50%; float: left; }

.footer p, .footer p a { color: #ffffff; text-decoration: none;  text-align: right;  }
.footer p:nth-child(1) { text-align: left; }

.sections:after { content: ''; display: table; clear: both;}
::placeholder {  color: #ffffff !important; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { color:  #ffffff !important; /* Internet Explorer 10-11 */ }
::-ms-input-placeholder { color:  #ffffff !important; /* Microsoft Edge */ }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

select option:hover { background: #ae282e;}
.ui-datepicker .ui-datepicker-header { border-radius: 0; background: #f9e1d5; border-color:#f9e1d5; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { border-color: #f9e1d5; } 
.ui-datepicker th { font-weight: 100; }
.ui-datepicker-div { font-family: zurich_cn_btregular; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #f9e1d5; background: #f9e1d5; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background: #ae282e; color: #ffffff; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br,.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl,
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr,.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0 !important; }
.ui-widget.ui-widget-content { border: 1px solid #e6e6e6; }
.ui-widget-header { font-weight: 100;}


.select-control { -webkit-appearance: none; -moz-appearance: none;  appearance: none;  background: url('../images/select-arrow.png') no-repeat right center !important;}
.select-control option { padding: 0 15px;}

select option { margin: 40px; background: rgba(256, 256, 256, 1); color: #333333; text-shadow: 0 1px 0 rgba(256, 256, 256, 1); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { border: 1px solid transparent;  -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;     transition: background-color 5000s ease-in-out 0s;
}

.loader { position: fixed; height: 100vh; width: 100vw; background: rgba(0,0,0,0.9); /* url('../images/loder.gif') no-repeat center center */
    top: 0; left: 0; z-index: 99; display: none; }

.loader:after { content:''; position:absolute; height:100px; width:100px; border:5px solid #ed7e2f; left:0; top:0; bottom:0; right:0; margin:auto; border-radius:50%; border-right:none; border-top:none; animation:loader 1500ms infinite linear;}
.loader:before { content:''; position:absolute; height:80px; width:80px; border:5px solid #a03636; left:0; top:0; bottom:0; right:0; margin:auto; border-radius:50%; border-right:none; border-top:none; animation:loader 1500ms infinite linear reverse;}
.applyNowStickyWrap { position:relative; text-align:center; margin-bottom:30px;display:none; }
.applyNowSticky { padding:20px 30px; color:#ffffff; background:#ed7e2f; display: inline-block; cursor:pointer;  }
.scrollToTop {position: fixed; right: 10px; cursor: pointer; color: #e4701e; background: #fff; border-radius: 50%; height: 46px; width: 46px; bottom: 0; display: none; }

.scrollToTop.active { display: block; }

.thankYouContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.thankYouContainer .imgBlock { height: 250px; width: 250px; border-radius: 50%; background: #ffffff; margin:0 auto 30px auto; position: relative;}
.thankYouContainer .imgBlock img { width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  }
.thankYouContainer .titleSection { color: #a03636; text-transform: uppercase; font-size: 24px; margin-bottom: .8em; line-height: 1.4em; text-align: center; font-family: 'Zurich'; font-weight: bold; }

@keyframes loader {
  0% { transform:rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.Autocomplete-Loading { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; }
.ui-menu .ui-menu-item-wrapper { font-size:14px;}
.ui-autocomplete { width:280px !important; }

@media (min-width: 992px) { 
    .bannerSection .bannerimg { width: 100%; min-height: 100%; background: url('../images/cc_banner_full.jpg') no-repeat center center; background-size: cover; position: absolute; top: 0; left:0;  }
    .bannerSection .bannerimg.fuelCoralCreditCard { width: 100%; min-height: 100%; background: url('../images/fuel-Chip-Credit-Card-D.jpg') no-repeat center center; background-size: cover; position: absolute; top: 0; left:0; background-position: 20% 0;  }
    .bannerSection .bannerimg.rewardCoralCreditCard { width: 100%; min-height: 100%; background: url('../images/reward-coral-credit-card.jpg') no-repeat center center; background-size: cover; position: absolute; top: 0; left:0; background-position: 20% 0;  }
    .bannerSection .bannerimg.rubyx-credit-card { width: 100%; min-height: 100%; background: url('../images/rubyx-credit-card-D.jpg') no-repeat center center; background-size: cover; position: absolute; top: 0; left:0; background-position: 20% -18px;  }
    .bannerSection .bannerimg.sapphiro-credit-card { width: 100%; min-height: 100%; background: url('../images/sapphiro-credit-card-D.jpg') no-repeat center center; background-size: cover; position: absolute; top: 0; left:0; background-position: 32% 0;  }
    .bannerSection .bannerimg.thankYouBanner { width: 100%; min-height: 100%; background: #f3f3f4; background-size: cover; position: absolute; top: 0; left:0; background-position: 20% 0;  }
}

@media (min-width: 1200px) {
    .formSection .container { width: unset; }
      .headerSection .creditCardBox .card-header { display:none;}
      .headerSection .creditCardBox .cardBox:hover .dropDownBox { display: block;}
  .headerSection .creditCardBox .cardBox:hover, .headerSection .creditCardBox .cardBox.active { border-top:5px solid #a03636; }
}

  @media (min-width: 1400px) {
    .creditCardBox { display: block; }
    .container { width: 1366px; }
    .headerSection .creditCardBox .cardBox .dropDownBox li:hover { background: #e68636;}
  }
 
  @media (max-width: 1199px) {    
    .headerSection .creditCardBox { display: none; float:none; margin:0; }
    .headerSection .creditCardBoxMobile { display: none;  }
    .headerSection .creditCardBox .cardBox { float:none; padding:15px 0; background:url('../images/card-shadow.png') no-repeat center bottom; background-size: 100% 11px; position:relative; }
    .headerSection .creditCardBox .cardBox:after { content:''; position:absolute; height:15px; width:15px; border-bottom:2px solid #a03636; border-left:2px solid #a03636; transform:rotate(-45deg); right:10px; top:15px; }
    .headerSection .creditCardBox .icon { display:inline-block; padding:2px 20px 2px 10px; }
    .headerSection .creditCardBox .text { text-align:left; display:inline-block; }
    .headerSection .creditCardBox .cardBox .dropDownBox { position:relative; }
    .formSection { width: 36.21%;  }
    .formSection .formBody { padding: 20px; }  
    .bannerSection .bannerContent .orangeBlock { max-width: 60%;}  
    .headerSection .logo { float:none; padding:15px 0; }
    .headerSection .creditCardBox .cardBox.active { background:#efefef; border-top:5px solid #efefef; }
    .headerSection .creditCardBox .cardBox.active .dropDownBox { display:block; background:none; border:none; }
    .headerSection .creditCardBox.active { display:block; }
    .headerSection .toggleMenu { display: block;}
  }

  @media (max-width: 1199px) {    
    .formSection { width: 100%; position: relative;  }  
    .offerFilterSection .offerFilterHead { padding: 20px 0;}  
    .offerFilterSection .offerFilterHead .fliterBox .text { font-size: 1em; }
    .headerSection .creditCardBoxMobile { float: right; } 
    .bannerSection { margin-bottom: 95px; }
    .bannerSection .bannerContent .orangeBlock { max-width: 100%; margin: 0 auto; left: 0;  right: 0;}
    .bannerSection .bannerContent .orangeBlock .box { margin: 0 15px;}
    .headerSection .creditCardBox .cardBox .dropDownBox .cardBlock { width:30%;}
  }

  @media (max-width: 991px) {
    .offerFilterSection .offerCodeBoxWrapper { columns: 2;}
    .offerFilterSection .offerFilterHead .fliterBox { padding-left: 84px; margin: 15px 0; }
    .headerSection { min-height: unset; padding-bottom: 0;}
    .cardSlider .SlideItem:nth-child(2) .imageBox img { transform: scale(1, 1); }
    .bannerSection .bannerimg { 
      width: 100%;
      min-height: 100%; 
      background: url('../images/cc_platinum.jpg') no-repeat center right; 
      background-size: contain; 
      position: absolute; 
      top: 0; 
      left:0;
      }
    .bannerSection .bannerimg.fuelCoralCreditCard { width: 100%; min-height: 100%; background: url('../images/fuel-Chip-Credit-Card-M.jpg') no-repeat center right; background-size: cover; position: absolute; top: 0; left:0;  }
    .bannerSection .bannerimg.rewardCoralCreditCard { width: 100%; min-height: 100%; background: url('../images/reward-coral-credit-card-M.jpg') no-repeat center right; background-size: cover; position: absolute; top: 0; left:0;  }
    .bannerSection .bannerimg.rubyx-credit-card { width: 100%; min-height: 100%; background: url('../images/rubyx-credit-card-M.jpg') no-repeat center right; background-size: cover; position: absolute; top: 0; left:0;  }
    .bannerSection .bannerimg.sapphiro-credit-card { width: 100%; min-height: 100%; background: url('../images/sapphiro-credit-card-M.jpg') no-repeat center right; background-size: cover; position: absolute; top: 0; left:0;  }
    .bannerSection .bannerimg.thankYouBanner { width: 100%; min-height: 100%; background: #f3f3f4; background-size: cover; position: absolute; top: 0; left:0; background-position: 20% 0;  }
    .applyNowStickyWrap.active { display:block; position:fixed; bottom:0; width:100%; margin-bottom:0; }
    .applyNowSticky { padding:15px 30px; display:block; }
  }
  @media (max-width: 767px) {
    .creditCardBox { display: none; }
    .footer p, .footer p:nth-child(1) {  width: 100%; margin-bottom: 10px; text-align: center;}
    .bannerSection .bannerContent .text { font-size: 22px;}
    .bannerSection .bannerContent .cardimg { width: 55%; }
    .orangeBlock { position: relative;}
    .headerSection .creditCardBox .cardBox .dropDownBox .cardBlock { width:unset; margin-bottom:30px; padding:0 10px;}
    .headerSection .creditCardBoxMobile { margin-left: 0; }
    .headerSection .creditCardBoxMobile.mobile { display: none; }
    .headerSection .creditCardBoxMobile.mobile.active { display: block; }
    .section .titleSection { font-size: 17px;}
    .headerSection .creditCardBoxMobile .form-group {  min-width: 180px; }
    .section { padding-top: 45px; padding-bottom: 45px; }
    .cardSlider .SlideItem { padding-top: 0;}
    .cardSlider .SlideItem .imageBox { margin: 0;}
    .formSection .thankYou { min-width:unset; max-width:unset;}
    .applyNowStickyWrap { position:fixed; bottom:0; margin-bottom:0; width:100%; z-index: 1; }
    .applyNowSticky { display:block;  }
    .formSection {top: 220px;}
    .bannerSection .bannerimg.sapphiro-credit-card {background-position: -50px 4px;}
    .bannerSection .bannerContent .orangeBlock-sapphiro {transform: translateY(118%);}
    .bannerSection .bannerContent .orangeBlock-ruby {transform: translateY(138%);}
    .container-fluid .content-style {margin-bottom: 230px;}
    .container-fluid .content-style1 {margin-bottom: 250px;}
    .form-style {margin-top: -94px;}
    .fuel-form-style {margin-top: -50px;}

  }
  @media (max-width: 479px) {
    .bannerSection .container { min-height: 300px; }
    .offerFilterSection .offerCodeBoxWrapper { columns: 1;}
    .bannerSection .bannerContent { margin-top: 30px;  }
    .headerSection .creditCardBoxMobile .form-group { min-width: 140px; margin-left: 0; }
    .headerSection .creditCardBoxMobile { margin-left: 0; width: calc(100% - 170px); padding: 0 0 5px 0;}
    .headerSection .creditCardBoxMobile .form-group { min-width: calc(100% - 45px); }
    .headerSection {     padding-top: 15px; }
    .headerSection .logo img { width: 130px; }
    .headerSection .creditCardBoxMobile .img  { width: 40px; margin-top: 5px;}
    .bannerSection .bannerContent .orangeBlock .box img { float: left; margin: 0 15px 0 0}
    .bannerSection .bannerContent .orangeBlock p { margin: 0; line-height: 1.4; }
    .bannerSection { margin-bottom: 60px; }
    .reduce-bottom-margin{ margin-bottom: 0px; }
    .formSection .formBody { padding: 0 15px 20px; }
    .section .bodyText { margin-bottom: 3em; }
    .bannerSection .bannerContent .text { font-size: 17px;}
    .formSection .formHeader { font-size: 15px;}
    .bannerSection .container.ThankYouContainer { min-height: 500px; }
  }
  @media (max-width: 375px){
    .headerSection .creditCardBoxMobile .img { display: none; }
    .headerSection .creditCardBoxMobile .form-group { min-width: 100%;}
    .section { padding-top: 25px; padding-bottom: 25px; }
    .offerFilterSection .offerFilterHead .fliterBox { margin: 10px 0; }
  }
.headerSection .toggleMenu .cardName, .headerSection .toggleMenu .Explore-all-Cards{
  font-size: 12px !important;
}