/*
	Remittance
*/
.remittance {
  padding: 10px 0 45px 0;
  min-height: -webkit-calc(100vh - 184px);
  min-height: -moz-calc(100vh - 184px);
  min-height: -ms-calc(100vh - 184px);
  min-height: -o-calc(100vh - 184px);
  min-height: calc(100vh - 184px);
}

.custom-carlo {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  color: grey;   color: black;
  padding: 13px 0 0 0;
  font-weight: bold;
  -webkit-background-clip: text;
  background-clip: text;
}
.panel-heading .panel-title:after {
  /* symbol for "opening" panels */
  font-family: "Glyphicons Halflings"; /* essential for enabling glyphicon */
  content: "\e114"; /* adjust as needed, taken from bootstrap.css */
  float: right; /* adjust as needed */
  color: #0046b0;
}
.panel-heading .panel-title.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e080"; /* adjust as needed, taken from bootstrap.css */
  color: grey;   color: black;
}

.box {
  display: block;
  background: #ffffff 0% 0% no-repeat;
  box-shadow: 0px 3px 6px #ccc;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  color: #000 !important;
  text-decoration: none !important;
  margin: 10px 0 10px;
  width: 217px;
}

.box:hover {
  color: #0046b0 !important;
}

.box .abstract {
  display: block;
  font-size: 14px;
  color: inherit !important;
}

.box .img-box {
  display: block;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 130px;
  max-width: 145px;
  margin: 0 auto;
}

.list-inline {
  padding-left: 0px !important;
}

.list-inline > li {
  display: inline-block !important;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
}

.nav-tabs-custom-rounded {
  display: inline-block;
  background: #f4f4f4;
  border-radius: 100px;
  overflow: hidden;
  margin: 20px auto 20px !important;
  padding-left: 0 !important;
}

.nav-tabs-custom-rounded > li a {
  padding: 0 !important;
}

.nav-tabs-custom-rounded li a {
  background: #f4f4f4 !important;
  min-width: 192px;
  padding: 12px 20px !important;
  color: #1d1d1f !important;
  border-radius: 100px;
  display: inline-block;
  font-size: 16px !important;
}

.nav-tabs-custom-rounded li.active a {
  background: #0046b0 !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  .nav-tabs-custom-rounded {
    background: none !important;
    border-radius: 0px !important;
  }

  .nav-tabs-custom-rounded li a {
    min-width: unset !important;
    padding: 8px 10px !important;
    margin-bottom: 10px;
    font-size: 12px !important;
  }
  .white-box-bordered {
    width: 100px;
  }
  .white-box-bordered > .img-box {
    height: 80px;
  }
  .white-box-bordered > .abstract {
    font-size: 10px;
  }
}
.title {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  padding: 25px 0 25px 0;
  font-size: 32px;
  font-weight: bold;
  line-height: 50px;
  background: -webkit-linear-gradient(#0046b0, #19347d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-title > li {
  padding-bottom: 20px;
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  font-weight: bold;
  font-size: 18px;
  white-space: inherit;
}
.sub-title-cont {
  list-style: none;
  margin-left: -20px;
}
.sub-title-cont > li {
  font-family: AvantGarde-Bk-BT, Fallback, sans-serif;
  font-size: 16px;
}

.details {
  font-family: AvantGarde-Bk-BT, Fallback, sans-serif;
  font-size: 16px;
  list-style: none;
  margin-left: -2em;
  padding-bottom: 6px;
}
.medium {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  font-size: 18px;
}
@media only screen and (max-width: 749px) {
  .title {
    font-size: 35px;
    line-height: 35px;
  }
  .sub-title {
    font-size: 16px;
  }
  .details {
    font-size: 14px;
    padding-bottom: 4px;
  }
  .medium {
    font-size: 16px;
  }
}

/*
	common style of the two center
*/
.table-pc,
.table-bc {
  border-collapse: separate;
  border-spacing: 5px;
  font-size: 18px;
}
.table th,
.table td {
  border-top: none !important;
}
.table > thead > tr > th {
  text-align: center;
}
/*content:"✓";*/
.check:before {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  content: url(../img/remittance/check.png);
  color: #090;
  font-size: 24px;
  font-weight: bold;
}
.table-pc > thead > tr.first-head th:first-child,
.table-bc > thead > tr.first-head th:first-child {
  width: 20%;
  vertical-align: middle;
  color: #fff;
  border-top-left-radius: 1em;
  background: #0046b0; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Firefox 3.6 to 15 */
  background: -ms-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Opera 11.1 to 12.0 */
  background: linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* Standard syntax */
}

.table-pc > thead > tr.first-head th,
.table-bc > thead > tr.first-head th {
  color: #fff;
  background: #0046b0; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Firefox 3.6 to 15 */
  background: -ms-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* For Opera 11.1 to 12.0 */
  background: linear-gradient(
    to bottom,
    #0046b0,
    #19347d
  ); /* Standard syntax */
  border-bottom: none;
  font-size: 22px;
}

.table-pc > thead > tr.second-head th,
.table-pc > thead > tr.third-head th,
.table-bc > thead > tr.second-head th,
.table-bc > thead > tr.third-head th {
  color: #fff;
  background: #ff6a00; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    to bottom,
    #ff6a00,
    #e04700
  ); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(
    to bottom,
    #ff6a00,
    #e04700
  ); /* For Firefox 3.6 to 15 */
  background: -o-linear-gradient(
    to bottom,
    #ff6a00,
    #e04700
  ); /* For Opera 11.1 to 12.0 */
  background: linear-gradient(
    to bottom,
    #ff6a00,
    #e04700
  ); /* Standard syntax */
  border-bottom: none;
  font-size: 22px;
  vertical-align: middle;
}

.table-pc > tbody > tr td,
.table-bc > tbody > tr td {
  text-align: center;
  height: 120px;
  vertical-align: middle;
  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    to bottom,
    #fff,
    #efefef,
    #f0f0f0,
    #dadada,
    #fff
  ); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(
    to bottom,
    #fff,
    #efefef,
    #f0f0f0,
    #dadada,
    #fff
  ); /* For Firefox 3.6 to 15 */
  background: -o-linear-gradient(
    to bottom,
    #fff,
    #efefef,
    #f0f0f0,
    #dadada,
    #fff
  ); /* For Opera 11.1 to 12.0 */
  background: linear-gradient(
    to bottom,
    #fff,
    #efefef,
    #f0f0f0,
    #dadada,
    #fff
  ); /* Standard syntax */
  letter-spacing: 1px;
}
.table-pc > thead > tr.second-head th.grey,
.table-bc > thead > tr.second-head th.grey {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  font-size: 16px;
  color: #19347d;
  font-weight: bold;
  background: #c7c7c7;
  padding: 2px;
  background: #e6e7e8; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    to bottom,
    #e6e7e8,
    #c7c7c7
  ); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(
    to bottom,
    #e6e7e8,
    #c7c7c7
  ); /* For Firefox 3.6 to 15 */
  background: -o-linear-gradient(
    to bottom,
    #e6e7e8,
    #c7c7c7
  ); /* For Opera 11.1 to 12.0 */
  background: linear-gradient(
    to bottom,
    #e6e7e8,
    #c7c7c7
  ); /* Standard syntax */
}

/*
	table for payment center
*/

.table-pc > thead > tr.first-head th:nth-child(2) {
  width: 32%;
}
.table-pc > thead > tr.first-head th:last-child {
  width: 48%;
  border-top-right-radius: 1em;
}
.table-pc > thead > tr.second-head th:first-child {
  width: 40%;
  min-width: 120px;
  font-size: 17px;
}
.table-pc > thead > tr.second-head th:not(:first-child) {
  width: 20%;
  min-width: 120px;
  font-size: 17px;
}
.table-pc > thead > tr.third-head th {
  width: 20%;
  min-width: 120px;
  font-size: 17px;
}
/*
	table for bank center
*/
.table-bc > thead > tr.first-head th:nth-child(2) {
  width: 45.6%;
}
.table-bc > thead > tr.first-head th:last-child {
  width: 34.4%;
  border-top-right-radius: 1em;
}
.table-bc > thead > tr.second-head th:first-child {
  letter-spacing: 0.6px;
  width: 26.66%;
  min-width: 120px;
  font-size: 15px;
}
.table-bc > thead > tr.second-head th:not(:first-child) {
  letter-spacing: 0.6px;
  width: 13.33%;
  min-width: 120px;
  font-size: 15px;
}
.table-bc > thead > tr.third-head th {
  letter-spacing: 0.6px;
  width: 13.33%;
  min-width: 120px;
  font-size: 15px;
}
.bold {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
}
.note {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  text-align: center;
  font-size: 18px;
  line-height: 18px;
  padding: 10px 0;
  margin: 20px 0;
  color: #0046b0;
  background: #e6e7e8;
  font-weight: bold;
}
.asterisk,
.asterisk-bayadcenter,
.asterisk-711,
.asterisk-BDO,
.asterisk-BPI,
.asterisk-bancnet,
.asterisk-eastwest {
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  font-size: 24px;
}
.pc-logo {
  margin-top: -50px;
}
.bc-logo div.asterisk-bayadcenter {
  line-height: 0;
  margin-left: 130px;
  margin-top: -95px;
}
.pc-logo div.asterisk-711 {
  line-height: 0;
  margin-left: 130px;
  margin-top: -95px;
}
.bc-logo {
  margin-top: -50px;
}
.bc-logo div.asterisk-BDO {
  line-height: 0;
  margin-left: 175px;
  margin-top: -60px;
}
.bc-logo div.asterisk-BPI {
  line-height: 0;
  margin-left: 180px;
  margin-top: -75px;
}
.bc-logo div.asterisk-bancnet {
  line-height: 0;
  margin-left: 180px;
  margin-top: -65px;
}
.bc-logo div.asterisk-eastwest {
  line-height: 0;
  margin-left: 180px;
  margin-top: -65px;
}
/*button download*/
.icon-download-alt {
  background-color: #06f;
  padding: 5px 11px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 4px;
  margin-left: -1px;
  background: #0046b0; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(
    #0046b0,
    #19347d
  ); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(
    #0046b0,
    #19347d
  ); /* For Firefox 3.6 to 15 */
  background: -ms-linear-gradient(#0046b0, #19347d); /* For Microsoft */
  background: -o-linear-gradient(#0046b0, #19347d); /* For Opera 11.1 to 12.0 */
  background: linear-gradient(#0046b0, #19347d); /* Standard syntax */
}
.btn-orange {
  border-radius: 5px;
}

.btn-orange {
  padding-left: 0px;
  padding-right: 5px;
  font-size: 22px;
  font-weight: bold;
}
.download {
  padding: 25px 0 10px 0;
  line-height: 52px;
  text-align: right;
}


/*card for icons*/
.bank-card-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin:20px;
}

.bank-card {
    width: 220px;
    height: 160px;
    /* background: #fff; */
    border-radius: 10px;
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.12); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bank-card img {
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
}

.bank-name {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

.bank-card:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 8px 18px rgba(0,0,0,0.18); */
    /* box-shadow: 0 8px 18px rgba(4, 80, 147, 0.18);
    border: 1px solid #b9cde9; */
}


/*modal animation*/
.modal.fade .modal-dialog {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s ease;
}

/* When modal is visible */
.modal.in .modal-dialog {
    transform: scale(1);
    opacity: 1;
}


/*modal backdrop*/
.modal-backdrop {
    background-color: rgba(3, 18, 59, 0.582);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(50px);
}


/*modal-body card - contents*/
.bank-card-box {
    background: #fff;
    border-radius: 10px;
    /* border: 2px solid #337ab7;  */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow: hidden; /* keeps header rounded */
    margin-bottom: 20px;
}

.bank-card-header {
    background: #f5f7fa;
    padding: 12px 15px;
    font-weight: 600;
    border-bottom: 1px solid #e5e5e5;
    text-align: left !important;
}

.bank-card-body {
    padding: 15px;
    text-align: left !important;
}

.bank-card-body p {
    margin-bottom: 8px;
}

/*modal body background*/
.bank-modal .modal-body {
    background-color: #f0f4f8; /* light gray-blue background */
    padding: 20px;            /* add some spacing */
}

.modal-header{
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.panel-title{
  padding-top: 0 !important;
  /* color: black !important; */
}

/* Collapsed — black */
.panel-heading .panel-title.collapsed.custom-carlo {
    color: black !important;
}

/* Expanded — blue */
.panel-heading .panel-title:not(.collapsed).custom-carlo {
    color: #0046b0 !important;
}



#bankModal .modal-dialog,
#bayadModal .modal-dialog,
#ecpay .modal-dialog,
#SEVEN-ELEVEN .modal-dialog,
#touchpay .modal-dialog,
#eastwest .modal-dialog,
#BPI .modal-dialog,
#unionbank .modal-dialog,
#RCBC .modal-dialog,
#bancnet .modal-dialog,
#aub .modal-dialog,
#gcash .modal-dialog,
#cliqq .modal-dialog,
#lazada .modal-dialog,
#shopeepay .modal-dialog,
#grabpay .modal-dialog,
#maya .modal-dialog,
#coinsph .modal-dialog,
#juancash .modal-dialog,
#diskartech .modal-dialog,
#peppermint .modal-dialog,
#justpayto .modal-dialog,
#alipay .modal-dialog,
#wechatpay .modal-dialog,
#cards .modal-dialog {
    position: fixed;           /* relative to viewport */
    top: 50%;                  /* vertical center */
    left: 50%;                 /* horizontal center */
    transform: translate(-50%, -50%); /* perfect center */
    margin: 0;                 /* remove Bootstrap default margin */
    width: 600px;              /* adjust as needed */
    max-width: 90%;            /* responsive on smaller screens */
}

.modal-dialog {
  max-width: 600px;           /* optional, modal width */
  margin: 30px auto;          /* vertical spacing */
}

.modal-content {
  max-height: 80vh;           /* max height relative to viewport */
  display: flex;
  flex-direction: column;     /* needed for header/footer + scroll body */
}

.modal-body {
  overflow-y: auto;           /* scroll if content exceeds max-height */
  padding: 20px;
}

/*Online Payment*/
.payment-header {
    /*background-color: #0046b0;    /* blue background */
    background-color: #000067;
    color: white;               
    padding: 40px 20px;          
    text-align: center;          
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px;
    width: 100%;                  
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* optional subtle shadow */
}

.form-container {
    background-color: #ffffff;       /* white background */
    padding: 30px 25px;
    border-radius: 0 0 20px 20px;              /* 12px smooth rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.12); /* card shadow */

    
    margin-left: auto;   /* push to right */
    margin-right: 0;
}

/* Optional: light gray background instead */
.form-container.light-bg {
    background-color: #f8f9fb;
}



/*Floating Labels */
/*------------ design for floating label ------------*/

.floating-label-group {
	position: relative;
	margin-bottom: 1.5rem;
}
  
.floating-label-group input { /*for positioning of text input on fieldform*/
	/*padding-top: 1.25rem;*/
	padding-top: 2px;  /* 2rem uncomment for perfect alignment*/
	padding-bottom: .25rem;
}
  
.floating-label-group label {
	position: absolute;
	/* top: 18px; */
	top: 6px; /*12px*/
	left: 25px; /*12px*/
	/* color: #999; */
	color: #7da8dd;
	font-size: 15px;
	pointer-events: none;
	transition: 0.2s ease all;
	background: white;
	padding: 0 4px;
	letter-spacing: 1.9px;
	background: linear-gradient(to right, transparent 0.2%, white 4%, white 94%, transparent 100%);
}

.floating-label-group input:focus + label,
.floating-label-group input:not(:placeholder-shown) + label {
	/*top: 4px; /*-8px*/
	top: -9px;  /*8px uncomment for perfect alignment*/
	left: 25px; /*10px*/
	font-size: 12px;
	color: #1976d2; /*0145ae*/ /*253c78*/ /*1976d2*/
}

.floating-label-group input:not(:placeholder-shown):not(:focus) + label {
    color: #7da8dd;  
}

/* .floating-label-group .su887{
	top: 8px; 
	left: 90px;
	font-size: 12px;
	color: #1976d2; 
} */
/*------------ design for floating label ------------*/

/*------------ fields ------------*/
.fieldform{
	width: 100%; /*300px*/
	/* height: 55px; */
	height: 34px;
	border: 1px solid #0046b0; /*0145ae*/
	/*border: 1px solid #c7c7c9;*/   
	border-radius: 8px;
	padding: 25px 12px 8px;
	letter-spacing:1.8px;
	color: #253c78;
	font-weight: bolder;
}

/*Not focused and input field has value*/
.fieldform:not(:placeholder-shown) { 
	 /*border: 1px solid #0145ae;*/ 
}

/*focused and input field has value*/
.fieldform:focus:not(:placeholder-shown) {
	border: 1px solid #1976d2; /*0145ae*/
	/*border: 2px solid #ccc ; /*0145ae*/
}

/*focus on field design*/
input:focus{
	outline: none; /* Removes the default outline */
	border: 1px solid #1976d2; /*0145ae*/
	/*border: 1px solid #ccc;*/
	box-shadow: 0 0 8px 1px rgba(0, 123, 255, 0.2); /* Glowing effect */
}

/*contact number +63*/
.su887{
	padding: 25px 45px 8px !important;
	color: #253c78;
	font-size: 15px !important;
	font-weight: bolder;
}

.prefix-code {
	position: absolute;
	font-weight: bolder;
	font-size: 15px !important;
	top: 25px;
	left: 25px;
	color: #253c78;
	font-size: 14px;
	z-index: 2;
	pointer-events: none;
  }
  
  .floating-label-group .floating-label.always-float {
	top: 10px !important;
	font-size: 12px !important;
	color: #999 !important;
  }
  /*contact number +63*/
/*------------ fields ------------*/

/*------------ button design ------------*/
.suButton{
	font-size: 16px;
	font-weight: bold;
	width: 299px; /*305*/ /*299*/
	height:34.5px; /*53px;*/ /*48px*/
	background-color:#ff5400 !important; 
	border-color:#ff6c00 !important; 
	letter-spacing:3px; 
	/*border-radius:25px; /*50*/
	/*transition: transform 0.3s ease; /*newly add*/

	background: linear-gradient(#FF6A00, #E04700);
    /* background-color: rgba(0, 0, 0, 0); */
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: linear-gradient(rgb(255, 106, 0), rgb(224, 71, 0));
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
	border-radius:8px;
}


.blockedButton{
	cursor: default;
	font-size: 16px;
	font-weight: bold;
	pointer-events: none; 
	width: 299px; /*305*/ /*299*/
	height:34.5px; /*53px;*/ /*48px*/
	background-color:#e0e0e0 !important; 
	border-color:#e0e0e0 !important; 
	color:#a6a6a6;
	letter-spacing:3px; 
	/*border-radius:25px; /*50*/
	border-radius:8px;
	/*transition: transform 0.3s ease; /*newly add*/
}

button,
.suButton,
.blockedButton {
  transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;
}

/* .returnButton{
	font-size: 16px;
	font-weight: bold;
	width: 299px;  */
	/***305*/ /**/
	/* height:48px;  */
	/***53px;*/ 
	/* background-color:#ff5400 !important; 
	border-color:#ff6c00 !important; 
	letter-spacing:3px; 
	border-radius:25px;  */
	/***50*/
	/*transition: transform 0.3s ease; /*newly add*/

	/* background: linear-gradient(#FF6A00, #E04700); */
    /*** background-color: rgba(0, 0, 0, 0); */
    /* background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: linear-gradient(rgb(255, 106, 0), rgb(224, 71, 0));
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
} */


.returnButton {
    font-size: 16px;
    font-weight: bold;
    width: 299px;  /* keep consistent width */
    height: 34.5px;  /* keep consistent height */ /*48px*/
    background-color: transparent;  /* lighter, less dominant */
    border: 2px solid #ffffff;      /* #ff6c00; use a color from your proceed button border */
    color: #a6a6a6;   /*ff6c00*/             /* match border color for text */
    letter-spacing: 3px;
    /*border-radius: 25px;            /* same rounded corners */
	border-radius: 8px; 
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;

	/* border: 2px solid #cac5c5;
	color: #cac5c5;            */

	background-color: #eaeaea !important;
}

.returnButton:hover {
	/* border: 1px solid #ff6c00;   */
    /*background-color: #ff6c00;      /* fill on hover for clarity */
	/* border: 1px solid #9197AE;
	background-color: #9197AE;
    color: white; */

	/* border: 1px solid #ff6c00; */
	border: 1px solid rgba(255, 166, 0, 0.295);
	/* background-color: white !important; */ 
	background-color: rgba(255, 165, 0, 0.1) !important;
    color: #ff6c00;

}

.returnButton:focus,
.returnButton:active {
	border: none;  
    /*background-color: #ff5400 !important; /* or your gradient */
	/* background-color: #9197AE !important; */
	background-color: white !important;
	color: #ff6c00 !important;
    outline: none;
    box-shadow: none;
}




/* .suButton:hover{
	/transform: scale(1.01);/
	cursor:pointer;
	background-color: #ff5500ec !important; 
} */
/* .gradient-orange {
	background-color: -webkit-linear-gradient(#ff9900, #ff4500); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
} */
/*------------ button design ------------*/

/*------------ helper ------------*/
.helperText{
	font-weight: 400; /*added today*/
	color: rgb(0, 0, 0);
	letter-spacing:0.8px; 
	font-family:  'Gotham Book';
	font-size:  1.5rem;
	/* line-height: 1.3125rem; */
	line-height: 1.8;

	height:80px;
	padding-bottom:15px; 
	text-align:center; 
	/* letter-spacing:1.8px;  */
	/* color:#333; */
	font-family: 'AvantGarde-Md-BT', 'Fallback', 'sans-serif' !important;
}

.custom-label {
	position: absolute;
	top: 8%;
	left: 50%;
	width: 80%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: #333;
	pointer-events: none;
  }

  .custom-card {
	position: relative;
	top: 25px;     
  }
/*------------ helper ------------*/

/*------------ loader ------------*/
#loader {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 1;
    width: 30px;
    height: 30px;
    margin: -75px 0 0 -75px;
    border: 8px solid #ff5400; /*16px*/ /*#f3f3f3*/
    border-radius: 50%;
    border-top: 8px solid #f3f3f3; /*16px*/ /*#3498db*/
    /* width: 50px;
    height: 50px; */
    -webkit-animation: spin 1s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

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

/*line animation in payment form*/
.anim{
  width:0px;
  animation: growLines 1s ease forwards;
  border-color: #1c2e5d71 !important;
}

@keyframes growLines {
to {
  width: 90%;
}
}

















/*otp design*/
   .otp-inputs {
 	 display: flex;
 	 justify-content: center;
 	 gap: 16px; /*10px*/
	 /* position:relative;
	 top: 25px; */
 	}

   /* .otp-box {
     width: 40px;
     text-align: center;
     font-size: 20px;
     border: none;
	 border-radius: 0px;
     border-bottom: 3px solid #007BFF; 
     background: transparent;
     outline: none;
	 box-shadow: none;    
   }
   .otp-box:focus,
   .otp-box:hover {
     border-bottom: 3px solid #ff5400 ; 
     outline: none; 
     box-shadow: none; 
	 border-top: none;
	 border-left: none;
	 border-right: none;
   } */

  .otp-box {
    width: 40px; /*40px*/
	height: 40px;
    text-align: center;
    font-size: 18px;
    display: inline-block;
  }

  #OtpModalVerifaciton .modal-dialog {
    width: 700px; /*360px*/               
    max-width: 90%;              
    margin: 30px auto !important;
  }

  .modal-body-test {
    height: 160px;
	font-family: 'Roboto', sans-serif;
  }
  .modal-content-test{
  	height: 400px;
	  left: 0;
  	right: 0;
  	top: 0;
  	bottom: 0;
  }

  #headerotp{
	height:165px;
	font-family: 'Roboto', sans-serif;
  }

  #OtpModalVerifaciton .modal-footer {
  	border-top: none;
  }

  .centered{
 	position: absolute;
 	bottom: 20px;              /* adjust spacing */
 	left: 50%;
 	transform: translateX(-50%);
	white-space: nowrap;
  }
  
  .centered-error{
 	position: absolute;
 	bottom: 75px;              /* adjust spacing */
 	left: 50%;
 	transform: translateX(-50%);
	white-space: nowrap;
  }

  .modal-backdrop-new {
	/*padding-top:25vh; /*150px 190px*/
	/*padding-bottom: 25vh;*/
	padding-top: 190px;
	/* background: rgba(0, 0, 0, 0.5); */ 
 	background-color: #fff !important;  /* make backdrop white */
 	opacity: 1 !important;              /* remove transparency */
  }

  @media(max-width:767px){
	.modal-content-test{
		border: 0px;
	}
	.modal-content-test{
		box-shadow: none;
	}
	.modal-backdrop-new{
		padding-top:80px;
	}
  }

  @media(max-width:575px){
	.modal-backdrop-new{
		padding-top:0px;
	}
  }

  /*button for verifications*/
  .modal-footer {
    display: flex;
    justify-content: center; /* align to right */
    gap: 10px;                 /* space between buttons */
    flex-wrap: nowrap;          /* prevent wrapping on large screens */
  }
  
  .modal-footer button,
  .modal-footer a {
    display: inline-block;      /* make links inline */
    text-align: center;
  }

  .otp-buttonsize{
	width: 150px !important;
  }
  
  /* On small screens, stack vertically */
  @media (max-width: 480px) {
    .modal-footer {
      /*flex-direction: column;   /* stack vertically */
      /*align-items: stretch;     /* make buttons full width */

	    display: flex;
  		flex-direction: column;   /* stack vertically */
  		align-items: center;      /* center buttons horizontally */
  		gap: 10px;    
    }
    .modal-footer button,
    .modal-footer a {
      width: 100%;
	  margin-left: 0px !important;
    }

	.otp-buttonsize{
		width: 100% !important;
  	}
  }
  /*button for verifications*/

  /*otp design*/


  .simple-card {
    background-color: #ffffff;                  /* white card */
    border-radius: 0 0 0px 12px;                        /* rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);   /* soft shadow */                     
    margin-bottom: 20px;                        /* spacing from other elements */
    height:580px;
}



/*tabs*/
.nav-tabs-custom-rounded li button{
  /*min-width: 25vw !important; /*30vw*/
  border-radius: 20px 20px 0 0 !important;
  height: 80px;
  border: none;
  /* background: #f4f4f4 !important; */
  background-color: #0046b03d !important;
  /* background: linear-gradient(to bottom, rgba(0, 70, 176, 0.15), rgba(0, 70, 176, 0.3)) !important; */
  min-width: 192px;
  padding: 12px 20px !important;
  /* color: #1d1d1f !important; */
  /* color: white; */
  /* color: #0046b099 !important; */
  color: #4a5f87 !important;
  display: inline-block;
  font-size: 32px !important;
  /* font-weight: bold; */
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
}

.nav-tabs-custom-rounded{
  display: flex !important; 
  border-radius: 0px !important;
  background: none !important;
  margin-bottom: 0px !important;
}

.list-inline > li{
  padding: 0px !important;
}

.content{
  margin-top: 0px !important;
}

.content p{
  margin: 0px !important;
}

.nav-tabs-custom-rounded li.active button {
  /* background: #0046b0 !important; */
  /* color: #fff !important; */
    background: #fff !important;
    color: #0046b0 !important;
    /* font-weight:700; */
}

.form-container {
    box-shadow: none !important; 
    border-radius: 0 0px 20px 20px !important;
}

.remittance{
  padding:0px !important;
}

.reminder{
	margin-top:20px;
	text-align: center;
}

.form-check{
  padding: 0 20px 0 20px !important;
}


.Separate{
  display: flex;              /* make content a flex container */
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */

  text-decoration: none !important;
  /* background-color: white; */ 
  background-color: #b9cde9;
  color: #4a5f87 !important;
  /* border: 1px solid lightblue; */
  /* border: none; */
  border-radius: 20px;
  padding:10px;
  /* margin: 0 0 0 22px; */
  margin-left: auto;
  height: 75px;
  font-size: 32px !important;
  font-weight: bold;
  font-family: AvantGarde-Md-BT, Fallback, sans-serif;
  box-shadow: 0 6px 15px -6px rgba(1, 33, 214, 0.15);
  border: 1px solid transparent;
  /* box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); */
  transition: 
    box-shadow 0.4s ease,
    border-color 0.6s ease; /* fade in effect */

  /* width:27vw; */
}

.Separate:hover {
  box-shadow: none;
  border-color: #283894; /* fully visible border */
  background-color: white;
}

@media screen and (max-width: 1199px) {
  .nav-tabs-custom-rounded li button{
    font-size: 20px !important;
  }

  .Separate{
    font-size: 20px !important;
  }
}




.fade-in-up {
  opacity: 0;                 /* start hidden */
  transform: translateY(20px); /* start slightly below */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);   /* move to original position */
}

/* Slide-in from right button */
.slide-in-right {
  opacity: 0;
  transform: translateX(50px);  /* start 50px to the right */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When container triggers animation, button becomes visible */
.fade-in-up.visible .slide-in-right {
  opacity: 1;
  transform: translateX(0);     /* slides to original position */
}



/*------------ error design ------------*/
.error{
	/* color:rgb(174, 37, 61) !important;  */
	/* color: #D36582 !important; 	 */
	/* color: #f44336 !important; 	 */
	color: #f6685e !important;
}

input.errorglow:focus {
	border: 1px solid red;
	box-shadow: 0 0 8px 1px rgba(255, 0, 0, 0.2);
}
  

.noerror{
	color: #0145ae;
}

.bordererror{
	/* border:1px solid rgb(174, 37, 61)!important; */
	border:1px solid #D36582 !important;
}

.bordererror:focus {
	/* border:2px solid rgb(174, 37, 61)!important; */
	border:1px solid #D36582 !important;
}

.bordernoerror{
	/* border: 1px solid #c7c7c9;   */
}
/*------------ error design ------------*/

/* .modal-header.gradient-bg {
    background: linear-gradient(
        150deg,        
        #ffffff 0%,   
        #ffffff 50%,  
        #3399ff 75%,  
        #12398b 100%
    );
} */




/*offices section*/
.offices-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 25px 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* .offices-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
} */

.offices-text h2 {
  color: #004a99;
  margin-bottom: 5px;
}

.offices-text p {
  color: #555;
  color: white;
  margin-bottom: 0;
}

.offices-cta {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .offices-card {
    flex-direction: column;
    text-align: center;
  }

  .offices-cta {
    margin-top: 15px;
  }
}

.bgimg{
	 background-image: url('../img/offices/offices.jpg'); /* your image path */
	   /* background-size: cover;  
  background-position: center;  
  background-repeat: no-repeat;  */
}

.head-office {
  color: #fff !important;  /* make text white */
}

.head-office-hr {
  border: 1px solid #fff; /* white line */
}

.head-office-icon {
  color: #fff; /* white icon */
  margin-right: 5px; /* optional spacing */
}

.button-rounded{
	border-radius: 100px;
	background-color: #0648c0;
	border: 2px solid  #001aff;

	  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button-rounded:hover {
  background-color: #0a5ae0;  
  border-color: #0033ff;      
}

.head-office-icon{
	color: white !important;
}





.switchable-tabs {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.switchable-tabs li {
    flex: 1; /* 50% each */
}

.switchable-tabs li button {
    width: 100%;
    padding: 15px 10px;
    border: none;
    background: #f5f5f5;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
}

.switchable-tabs li.active button {
    background: #fff;
    border-bottom: 2px solid transparent;
}



.bank-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.bank-card-container {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.bank-card {
    width: 200px;
    height: 120px;
    /* background: #f5f5f5; */
    border-radius: 8px;
    display: flex;              
    align-items: center;        
    justify-content: center;    
    cursor: pointer;
    text-align: center;
}


.bank-card.extra {
    display: none;
}


/* .view-more-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff !important;  
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;                  
    transition: background 0.3s;
}

.view-more-btn:hover {
    background-color: #0056b3; 
}


.view-more-btn .arrow {
    display: inline-block;
    transition: transform 0.3s; 
}

.view-more-btn:hover .arrow {
    transform: translateX(5px); 
} */


#viewMoreBtn {
    background: linear-gradient(135deg, #6a11cb, #2575fc); /* gradient background */
    background: linear-gradient(135deg, #a8edea, #fed6e3);
    background: linear-gradient(135deg, rgba(100,180,255,0.3), rgba(255,255,255,0.1));
    background: linear-gradient(135deg, #3399ff, #66ccff);
    /* background: linear-gradient(135deg, #3578e5, #2aa0f4); */
    color: #fff !important; /* force white text */
    border: none;
    padding: 0px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

#viewMoreBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.vert{
  padding: 25px 0 25px 0 !important;
  line-height: 50px;
}


.img-header {
    height: 100px;      /* make this smaller */
    padding: 0;
    /*overflow: hidden;*/
}

.img-header img {
    height: 100%;
    width: auto;        /* keeps image from stretching */
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: auto;       /* centers image */
    width: 500px;
    height: 60px;
    object-fit: contain;
    margin-top: 20px;
    margin-bottom: 20px;
}